引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着“进入应用”的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳。
效果图:
实现步骤:
1.首先我们做个有渐变动画的启动页面SplashActivity
在onCreate里设置核心方法setAlphaAnimation()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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则为首次打开进入引导页,反之进入主页。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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, 最后一页的 “进入应用” 按钮。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<? 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中,首先初始化引导图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/** * 初始化图片 */ 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自动切换到相应位置的图片,不过实际应用中这里实用性不是很大,因为圆点太小,可触摸范围有限,点击事件不太好触发。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
/** * 初始化底部圆点指示器 */ 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的滑动事件
1
|
vp.addOnPageChangeListener( this ); |
生成三个方法,我们主要在onPageSelected()方法中做操作,当某个位置的圆点被选中时,显示选中后的图片,其余圆点显示未选中的图片,这里主要应用selector控制器,至于相应的选中未选中圆点图片需要大家去找。当滑动到最后一个页面时,将 "进入应用" 的按钮显示,反之隐藏。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@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
1
2
3
4
5
|
<? 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,以后打开应用则不会再进入引导页面了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
@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附上
源码下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/u014078990/article/details/82414818