一个带指示器的引导页(ViewPager)

一个简单的引导页,由ViewPager和PagerAdapter组成

package com.xspacing.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
/**
 * 
 * @ClassName MainActivity.java
 * @Description TODO 引导页
 * @author Smile
 * @version v1.0
 * @date 2016年9月26日 
 */
public class MainActivity extends Activity {

    protected static final String TAG = "MainActivity";
    ViewPager mViewPager;
    List<ImageView> list;
    private LinearLayout mLinearLayout;

    // 两个小灰点的距离
    private int poitWidth;
    private ImageView mViewPress;
    private ImageView mViewNotPress;
    private Button btnStart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.main_view_pager);
        mLinearLayout = (LinearLayout) findViewById(R.id.main_point);
        mViewPress = (ImageView) findViewById(R.id.main_red_point_press);
        btnStart = (Button) findViewById(R.id.main_btn);
    }

    private void initDatas() {
        list = new ArrayList<ImageView>();
        final int imageId[] = { R.drawable.a, R.drawable.b, R.drawable.c };
        for (int i = 0; i < imageId.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageId[i]);
            list.add(imageView);
            mViewNotPress = new ImageView(this);
            mViewNotPress.setImageResource(R.drawable.shape_grey_point_not_press);
            LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            if (i != 0) {
                layoutParams.leftMargin = 20;
            }
            mLinearLayout.addView(mViewNotPress, layoutParams);

        }

        // 由于在执行onCreate()的时候,界面还没有被绘制完成,所有拿不到poitWidth,
        // 要拿到视图树,监听视图的绘制完成,才能拿到poitWidth
        mViewPress.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                poitWidth = mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();
                Log.i(TAG, poitWidth + "");
            }
        });
        mViewPager.setAdapter(new ViewPgerAdapter(this, list));

        mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            // 当前选中的是第几个界面
            @Override
            public void onPageSelected(int position) {
                if (position==imageId.length-1) {
                    btnStart.setVisibility(View.VISIBLE);
                }
                else {
                    btnStart.setVisibility(View.GONE);
                }
            }

            // 界面滑动的时候,会不断地回调这个方法
            // 第二个参数是当前页面滑过的百分比(0.0到1.0)
            @Override
            public void onPageScrolled(int position, float offset, int arg2) {
                Log.i(TAG, "arg1:" + offset);
                // 小红点当前滑动的距离
                int width = (int) (poitWidth * offset + position * poitWidth);
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mViewPress.getLayoutParams();
                layoutParams.leftMargin = width;
                mViewPress.setLayoutParams(layoutParams);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

}

package com.xspacing.viewpager;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewPgerAdapter extends PagerAdapter {

    Context mContext;
    List<ImageView> list;

    public ViewPgerAdapter(Context context, List<ImageView> list) {
        this.mContext = context;
        this.list = list;
    }

    // 页数
    @Override
    public int getCount() {
        return list.size();
    }

    // 复用页卡
    @Override
    public boolean isViewFromObject(View view, Object obj) {
        return view == obj;
    }

    // 销毁页卡
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(list.get(position));
    }

    // 生成页卡
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = list.get(position);
        container.addView(view);
        return view;
    }

}

shape文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <size
        android:height="10dp"
        android:width="10dp" />
    <solid android:color="#C3C3C3"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <size
        android:height="10dp"
        android:width="10dp" />
    <solid android:color="#44FF0000"/>

</shape>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xspacing.viewpager.MainActivity" >

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

    <RelativeLayout
        android:id="@+id/main_relative"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp" >

        <LinearLayout
            android:id="@+id/main_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

        <ImageView
            android:id="@+id/main_red_point_press"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_red_point_press" />
    </RelativeLayout>

    <Button
        android:id="@+id/main_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:visibility="gone"
        android:layout_above="@id/main_relative"
        android:layout_centerHorizontal="true"
        android:text="开始体验" />

</RelativeLayout>