作者： 夏至，欢迎转载，也请保留这段申明，谢谢。
http://www.jianshu.com/p/dfc188f130fd
今天讲一个比较简单的东西，那就是每一个app在第一次启动的时候，都会出现的引导界面；刚开始的时候我还想自定义下面的一些小圆点；然后网上查了一下，发现有更简单的方式，简直简单得令人发指。好吧，废话不多说，先上效果图：
guide.gif
图片拿慕课网的，viewpager也添加了官网的动画效果，最后一页用一个 显示一个Button，最后点击跳转到主界面。整体上还是没啥难点，下面是分析：
Paste_Image.png
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>
效果如下：
然后，我们只要新建多一个，把颜色改成白色，然后用 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变换颜色
}
}
效果如下：
Paste_Image.png
哪，是不是很简单啊，然后我们只要把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
