5分钟带你搞定APP引导界面

作者： 夏至，欢迎转载，也请保留这段申明，谢谢。 http://www.jianshu.com/p/dfc188f130fd

今天讲一个比较简单的东西，那就是每一个app在第一次启动的时候，都会出现的引导界面；刚开始的时候我还想自定义下面的一些小圆点；然后网上查了一下，发现有更简单的方式，简直简单得令人发指。好吧，废话不多说，先上效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLp8oNFY-1580091638907)(https://dn-mhke0kuv.qbox.me/265ca8d77d6be0ae3652.gif)]

图片拿慕课网的，viewpager也添加了官网的动画效果，最后一页用一个 显示一个Button，最后点击跳转到主界面。整体上还是没啥难点，下面是分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nf5ukAR-1580091638908)(https://dn-mhke0kuv.qbox.me/68a7e0d05870755b6ba4)] ##1、延时启动检测 这点没啥好说的，直接一个定时器即可，至于是否为第一次启动，则用sharedpreference来检测：

Timer timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { SharedPreferences preferences = getSharedPreferences("guide",MODE_PRIVATE); boolean isfirst = preferences.getBoolean("isfirst",false); if (!isfirst) { startActivity(new Intent(SplseActivity.this, GuideActivity.class)); SharedPreferences.Editor editor = getSharedPreferences("guide",MODE_PRIVATE).edit(); editor.putBoolean("isfirst",true); editor.commit(); finish(); }else{ startActivity(new Intent(SplseActivity.this,MainActivity.class)); finish(); } } },2000);

2、圆点的绘制

上面圆点的绘制，其实很简单，我们的思路就是viewpager滑动到哪一个界面，就让它绘制成红色就可以了，所以，我们完全可以用shade属性和selector属性帮我们绘制完成。圆点如下：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/colorAccent"/> <size android:height="10dp" android:width="10dp"/> </shape>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e0fD5PSW-1580091638910)(https://dn-mhke0kuv.qbox.me/cf6b95b8ec70801d6f25)] 然后，我们只要新建多一个，把颜色改成白色，然后用 selector 就可以改变不同的颜色了：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/point_select" android:state_selected="true"/> <item android:drawable="@drawable/point_normal" android:state_selected="false"/> </selector>

至于多少个圆点，我们用动态的方式，即图片有多少张，这里就有多少个点；我们就可以使用setlayoutparmas的方式，设置我们的视图了。 首先看开机引导的主视图：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#2233" tools:context="com.rachel.guildproject.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/guide_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> <Button android:id="@+id/guide_start" android:layout_width="200dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@drawable/btn_background" android:text="开始体验" android:textColor="#ffffff" android:textSize="20sp" android:textStyle="bold" android:layout_marginBottom="20dp" android:visibility="gone"/> <LinearLayout android:id="@+id/point_ly" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="40dp" android:orientation="horizontal"/> </RelativeLayout>

viewpager 就不用讲了，button 则是我们最后一页的按钮，而 LinearLayout 则是我们的圆点绘制的，可以看到这里我把它设置成底部，这样，我们就可以在代码中去填充这些圆点了：

private void initpoint() { //获取layout mLayout = (LinearLayout) findViewById(R.id.point_ly); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); //设置每一个view即圆点的对左的偏移量 params.setMargins(15,0,0,0); //根据图片多少来确定个数 for (int i = 0; i < imgRes.length; i++) { ImageView imageView = new ImageView(this); imageView.setImageResource(R.drawable.dot_select); imageView.setLayoutParams(params); //把上面的控件属性设置到LinearLayout中 if (i == 0){ //默认第一张为红色圆点 imageView.setSelected(true); }else{ imageView.setSelected(false); } //把圆点这个子视图导入我们的LinearLayout里面 mLayout.addView(imageView); mImageViews.add(imageView);//跟着viewpager变换颜色 } }

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QwLUG46J-1580091638912)(https://dn-mhke0kuv.qbox.me/fbfc23d11dc804e3c843)]哪，是不是很简单啊，然后我们只要把viewpager填充进去就可以了，viewpager就老生常谈了，我这里就不讲了，我们只要在页面滑动完成之后，改变圆点的颜色就可以了，如下所示：

@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //滑动时改变圆点的状态 for (int i = 0; i < mImageViews.size(); i++) { if (i == position){ mImageViews.get(i).setSelected(true); }else{ mImageViews.get(i).setSelected(false); } } //当为最后一个时，显示button，并隐藏圆点 if (position == mImageViews.size() -1){ mLayout.setVisibility(View.GONE); mButton.setVisibility(View.VISIBLE); ObjectAnimator animator = ObjectAnimator.ofFloat(mButton,"alpha",0f,1f); animator.setDuration(1000); animator.start(); }else{ mLayout.setVisibility(View.VISIBLE); mButton.setVisibility(View.GONE); } }

这样就可以了，好像也没啥好讲的，权当记录吧，另外，学会使用　shade 和 selector 等一些相关属性，也可以让你的UI变得非常好看。

最后附上 demo地址： https://git.oschina.net/zhengshaorui/guideactivity.git