Android App 第一次打开时的引导界面

    Android App 第一次打开时的引导界面，这个需求是非常多的。在写新项目的时候，刚好要用到，在网上找了一下 demo，没发现非满意的。所以只好自己动手写一个，分享一下，避免以后大家重复造轮子。效果图如下（虽然有点丑）

    上面这个就是引导界面 GuideActivity 的界面了，实现思路很简单：主界面用 FrameLayout 布局，后面用 ViewPager 装载图片。下面几个小点指示当前滑动到哪个界面了，因为没现在的控制可用，所以自定义了一个 InidcatorView，布局文件如下

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <cn.guide.IndicatorView
        android:id="@+id/indicatorView"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginBottom="30dp"
        android:layout_gravity="bottom|center_horizontal"/>
</FrameLayout>

自定义的 IndicatorView 代码如下

public class IndicatorView extends View{

    private static final String LOG_TAG = IndicatorView.class.getName();
    private int mCurrentIndicatorIndex = 0;
    private int mIndicatorCount = 4;
    private int mIndicatorDistance = 30; // 圆点之间的距离（圆心距）
    private int mStartDotX;
    private int mDotY;
    private Paint mPaint;

    public IndicatorView(Context context) {
        super(context, null);
    }

    public IndicatorView(Context context, AttributeSet attrs){
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){

        int viewWidth = MeasureSpec.getSize(widthMeasureSpec);
        int viewHeight = MeasureSpec.getSize(heightMeasureSpec);

        int drawWidth = (mIndicatorCount + 1) * mIndicatorDistance;
        mStartDotX = (viewWidth - drawWidth) / 2;
        mDotY = viewHeight / 2;

        setMeasuredDimension(viewWidth, viewHeight) ;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float currentDotX = mStartDotX;
        for(int i = 0; i < mIndicatorCount; i++) {

            currentDotX += mIndicatorDistance;
            if(i == mCurrentIndicatorIndex) {
                mPaint.setColor(0x7fff0000);
            } else {
                mPaint.setColor(0x7f0000ff);
            }
            canvas.drawCircle(currentDotX, mDotY, 10, mPaint);
        }
    }

    public void setIndicatorCount(int count) {
        mIndicatorCount = count;
    }

    public void setCurIndicatorIndex(int index) {
        mCurrentIndicatorIndex = index;
        invalidate();
    }
}

    setIndicatorCount 用来设置总共有多少个点，引导界面要加载多少张图，setIndicatorCount  的参数就设置成多少就可以了。setCurIndicatorIndex 用来设置当前滑动到哪个点上了，顺便刷新界面。因为比较简单，所以就不做太多介绍了

    点击下载源码