引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着“进入应用”的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳。
效果图:
实现步骤:
1.首先我们做个有渐变动画的启动页面SplashActivity
在onCreate里设置核心方法setAlphaAnimation()
public void setAlphaAnimation(){ //生成AlphaAnimation的对象 AlphaAnimation animation= new AlphaAnimation(this); //设置动画的持续时间 animation.setDuration(3000); //给要渐变的控件设置动画,比如说imageview,textview,linearLayout之类的 ll.setAnimation(animation); //设置动画监听,结束时跳转到下一个页面(首次打开就是引导页面,反之就是主页) animation.setAnimationListener(new Animation.AnimationListener(){ public void onAnimationStart(Animation animation){ } public void onAnimationEnd(Animation animation){ jump2Activity(); } public void onAnimationRepeat(Animation animation){ } }); }
分析一下这个跳转方法jump2Activity(),我们这里使用SharedPeference来判断应用是否首次打开,设变量isFirst默认值为0,进入引导页跳转到主页时再把这个值设为1,这样,每次跳转时判断isFirst的值,如果仍是默认值0则为首次打开进入引导页,反之进入主页。
public void jump2Activity(){ SharedPreferences sharedPreference= getSharedPreferences("data", MODE_PRIVATE); String isFirst= sharedPreferences.getString("isFirst", "0"); Intent intent= new Intent(); if("0".equals(isFirst)){ intent.setClass(this, GuideActivity.class); }else{ intent.setClass(this. MainActivity.class); } startActivity(intent); finish(); }
2.接下来我们做引导页面
引导页面是由三个控件组成,Viewpager,圆点指示器的线性布局linearlayout, 最后一页的 “进入应用” 按钮。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/guide_vp" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/guide_ll" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="100dp" android:orientation="horizontal" /> <Button android:id="@+id/guide_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/guide_ll" android:layout_centerHorizontal="true" android:text="进入应用" android:layout_marginBottom="10dp" android:visibility="gone"/> </RelativeLayout>
在GuideActivity中,首先初始化引导图片
/** * 初始化图片 */ private void initImgs() { ViewPager.LayoutParams params= new ViewPager.LayoutParams(); imageViews= new ArrayList<ImageView>(); for (int i= 0; i< imgs.length; i++){ ImageView imageView= new ImageView(this); imageView.setLayoutParams(params); imageView.setImageResource(imgs[i]); imageView.setScaleType(ImageView.ScaleType.FIT_XY); imageViews.add(imageView); } }
初始化底部圆点指示器,这里值得一提的是我们给各圆点设置相应的点击事件,当点击某个位置的圆点时,viewpager自动切换到相应位置的图片,不过实际应用中这里实用性不是很大,因为圆点太小,可触摸范围有限,点击事件不太好触发。
/** * 初始化底部圆点指示器 */ private void initDots() { LinearLayout layout= findViewById(R.id.guide_ll); LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(20, 20); params.setMargins(10, 0, 10, 0); dotViews= new ImageView[imgs.length]; for (int i= 0; i< imageViews.size(); i++){ ImageView imageView= new ImageView(this); imageView.setLayoutParams(params); imageView.setImageResource(R.drawable.dotselector); if (i== 0){ imageView.setSelected(true); }else{ imageView.setSelected(false); } dotViews[i]= imageView; final int finalI = i; dotViews[i].setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { vp.setCurrentItem(finalI); } }); layout.addView(imageView); } }
设置viewpager的滑动事件
vp.addOnPageChangeListener(this);
生成三个方法,我们主要在onPageSelected()方法中做操作,当某个位置的圆点被选中时,显示选中后的图片,其余圆点显示未选中的图片,这里主要应用selector控制器,至于相应的选中未选中圆点图片需要大家去找。当滑动到最后一个页面时,将 "进入应用" 的按钮显示,反之隐藏。
@Override public void onPageScrolled(int i, float v, int i1) {} @Override public void onPageScrollStateChanged(int i) {} @Override public void onPageSelected(int arg0) { for (int i= 0; i< dotViews.length; i++){ if (arg0== i){ dotViews[i].setSelected(true); }else { dotViews[i].setSelected(false); } if (arg0== dotViews.length- 1){ btn.setVisibility(View.VISIBLE); }else { btn.setVisibility(View.GONE); } } }
dotSelector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/focus_on" android:state_selected="true"/> <item android:drawable="@drawable/focus_nomal" android:state_selected="false"/> </selector>
在最后一个页面点击 "进入应用" 按钮跳转到主页时,将缓存中的isFirst数据改为1,以后打开应用则不会再进入引导页面了。
@Override public void onClick(View view) { switch (view.getId()){ case R.id.guide_btn: setisFirst(); Intent intent= new Intent(GuideActivity.this, MainActivity.class); startActivity(intent); finish(); break; } } /** * 改变首次打开的状态 */ private void setisFirst() { SharedPreferences.Editor editor= getSharedPreferences("data", MODE_PRIVATE).edit(); editor.putString("isFirst", "1"); editor.commit(); }
至此全部完成!demo附上
源码下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍Android控件ViewPager实现带有动画的引导页,包括了Android控件ViewPager实现带有动画的引导页的使用技巧和注意事项,需要的朋友参考一下 ViewPager实现带有动画的引导页,供大家参考,具体内容如下 好了,又到我们学习基础控件的时候了,其实引导页很简单,就是五张图片而已 一、ViewPager实现传统的引导页 传统的ViewPager实现引导页和ListV
我需要一个(响应性)引导转盘-非常像标准示例:http://getbootstrap.com/javascript/#carousel 但是,我需要每个图像“覆盖”包含的div。因此,如果它与图像的比例不同,请单击顶部 我还需要左边的 我还需要每张幻灯片中的文本随着每张幻灯片的变化而变化/不是静态的。我发现了这个,但它有静态文本-我无法让文本移动-它也缺乏导航按钮和点指示器:https://boo
本文向大家介绍iOS实现启动引导页与指纹解锁的方法详解,包括了iOS实现启动引导页与指纹解锁的方法详解的使用技巧和注意事项,需要的朋友参考一下 前言 应用程序启动时有些会有引导页,目的是用户第一次登录时对应用程序的一些简单了解介绍,一般就是几张轮播图片,当引用程序第一次进入时会跳到引导页,以后不再显示,这时就需要将不是第一次登录的标致flag保存到内存中,推荐用户偏好设置NSUserDefault
问题内容: 真的没有办法使用CSS为渐变背景设置动画吗? 就像是: 我知道,对于Safari 5.1+和Chrome 10+,有一个新的渐变语法,但是现在,对于该项目,我必须坚持使用旧的语法。 问题答案: Webkit渐变尚不支持过渡。它已在规格中,但尚无法使用。 (ps,如果您仅执行颜色转换-您可能要签出-webkit-filters-可以进行动画处理!) 更新:渐变过渡显然可以在IE10 +中
本文向大家介绍纯js和css实现渐变色包括静态渐变和动态渐变,包括了纯js和css实现渐变色包括静态渐变和动态渐变的使用技巧和注意事项,需要的朋友参考一下 说起“渐变色”,你会想起什么? 当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变。 所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的;而静态渐变,也就更
本文向大家介绍Android实现游戏中的渐隐和渐现动画效果,包括了Android实现游戏中的渐隐和渐现动画效果的使用技巧和注意事项,需要的朋友参考一下 1实现渐隐的动画 在程序中实现可以通过如下方式 当然也可以通过配置文件实现 首先在res目录下新建anim文件夹,然后再anim文件夹下新建xml文件gradually.xml 该xml文件主要定义实现渐变的方式 alpha代表透明度,0.0是完全