ViewPager实现Android向导页

APP第一次安装，用户向导是司空见惯。没有复杂的动画的话，一般就用viewpager控件左右切换几张图片即可。下面圆点指示图片的索引位置。
先看效果图。

一，android布局文件的实现。

viewpager放在最下面全屏幕显示，上面覆盖几个圆点。操作按钮浮在底部。

<RelativeLayout  android:id="@+id/rl_guide" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/guide_bg2" android:orientation="vertical">
    <!--viewpager，用户左右滑动-->
    <android.support.v4.view.ViewPager  android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/heigt20"/>
    <!--底部操作按钮，左右，体验-->
    <RelativeLayout  android:layout_width="match_parent" android:layout_height="70dp" android:layout_alignParentBottom="true" android:background="@color/common_bg">

        <ImageView  android:id="@+id/iv_pre_guide" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_centerHorizontal="true" android:layout_marginLeft="@dimen/heigt20" android:src="@drawable/ic_left"/>

        <ImageView  android:id="@+id/iv_next_guide" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentRight="true" android:layout_centerHorizontal="true" android:layout_marginRight="@dimen/heigt20" android:src="@drawable/ic_right"/>
        <ImageView  android:id="@+id/iv_guide_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:src="@drawable/guide_finish"/>
    </RelativeLayout>
    <!--小圆点-->
    <LinearLayout  android:id="@+id/ll_dots" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="80dp" android:orientation="horizontal">
    </LinearLayout>
</RelativeLayout>

二，viewPager item布局

视情况添加，本例就是展示图片。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/home_bg" android:orientation="vertical">
    <ImageView  android:id="@+id/iv_main" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerInside"/>
</LinearLayout>

三，ViewPager主要实现逻辑

findViewById这样的方法就不贴出来了。后续附上源码下载。
主要展示核心代码。

//全屏无标题显示
this.requestWindowFeature(Window.FEATURE_NO_TITLE);     this.getWindow().setFlags(WindowManager.LayoutParams.F

 //初始化向导页面图片，图片放在drawable文件夹中。
int[] pagerImages = { R.drawable.bg1,R.drawable.bg2,R.drawable.bg3,R.drawable.bg4,R.drawable.bg6,R.drawable.bg7,R.drawable.bg8,};

viewpager展示数据

vp = (ViewPager) findViewById(R.id.viewpager);
vp.setOnPageChangeListener(onPageChangedListener); //设置viewpager监听
//向集合中添加元素
for(int imageId:pagerImages) {
    list.add(imageId);
}
if (vpAdapter==null){
    vpAdapter = new GuideVPAdapter(list,context);
    vp.setAdapter(vpAdapter);
}else{
    vpAdapter.notifyDataSetChanged();
}

GuideVPAdapter，适配器，展示图片

/** * Created by duqian on 15/10/8. */
public class GuideVPAdapter extends BasePagerAdapter<Integer> {

    public GuideVPAdapter(List<Integer> list, Context context) {
        super(list, context);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = View.inflate(context, R.layout.item_guide_pager, null);
        container.addView(view);
        ImageView iv_main = (ImageView) view.findViewById(R.id.iv_main);

        if (position==0){
            iv_main.setScaleType(ImageView.ScaleType.FIT_XY);
        }else{
            iv_main.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        }
        iv_main.setImageResource(list.get(position));
        return view;
    }
}

四，初始化底部小圆点，用于表示切换的位置

 //初始化底部小圆点，代码生成，追加到LinearLayout布局中
    private void initDots() {
        LinearLayout ll_dots = (LinearLayout) findViewById(R.id.ll_dots);
        dotList = new ArrayList<>();
        for (int i = 0; i < pagerImages.length; i++) {
            ImageView point = new ImageView(this);//每个点是一ImageView
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, -2);
            params.leftMargin = 15;
            point.setLayoutParams(params);
            point.setBackgroundResource(R.drawable.point_bg);//selector选择器控制颜色
            ll_dots.addView(point);
            dotList.add(point);//添加指示点
            //默认情况下，第一个小点enable为true
            if (i == 0) {
                point.setEnabled(true);
            } else {
                point.setEnabled(false);
            }
        }
    }

selector中定义两种状态的颜色的圆形状，作为ImageView的背景，以便setBackgroundResource。

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

小圆点不建议使用图片，可以xml中用形状实现。

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

五，监听viewpager页面改变的事件。

//监听viewpager左右滑动，根据位置，做相应的操作。
    private ViewPager.OnPageChangeListener onPageChangedListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
        @Override
        public void onPageSelected(int position) {
            setCurDot(position);
            showOrDisplayPreview();//如果首页不同，可在这里判断0的位置，改变UI
        }
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    };

六，改变当前页面的UI

 /** *设置当前位置的点的状态，蓝色高亮显示 */
    private void setCurDot(int positon)
    {
        if (positon < 0 || positon > pagerImages.length - 1 || currentIndex == positon) {
            return;
        }
        dotList.get(positon).setEnabled(true);
        dotList.get(currentIndex).setEnabled(false);
        currentIndex = positon;
    }

未完待续，欢迎交流，杜乾，Dusan。。。291902259。