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