安卓第一次启动引导页使用ViewPager实现

我们在安装某个APP的时候，基本都会有一个引导页的提示，他们可以打广告，或者介绍新功能的加入和使用说明等。
一般都支持滑动并且下面有几个点，显示共有多少页和当前图片的位置，在IOS上这个实现起来比较简单，但在安卓上如何实现呢。
今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果。

先上图：

下面是我的实现，一个xml布局，一个GuideActivity和一个GuidePageAdapter.

先上XML.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.nanchen.guidepagedemo.GuideActivity">
 
    <android.support.v4.view.ViewPager
        android:id="@+id/guide_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
 
    <LinearLayout
        android:id="@+id/guide_ll_point"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:gravity="center_horizontal">
    </LinearLayout>
 
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guide_ib_start"
        android:src="@mipmap/btn_start"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/guide_ll_point"
        android:background="@null"
        android:visibility="gone"/>
</RelativeLayout>

在准备一个Adapter,这个没什么好说的、

package com.example.nanchen.guidepagedemo;
 
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
 
import java.util.List;
 
/**
 * Created by 南尘 on 2016/7/10.
 */
public class GuidePageAdapter extends PagerAdapter {
 
    private List<View> viewList;
 
    public GuidePageAdapter(List<View> viewList) {
        this.viewList = viewList;
    }
 
    /**
     * @return 返回页面的个数
     */
    @Override
    public int getCount() {
        if (viewList != null){
            return viewList.size();
        }
        return 0;
    }
 
    /**
     * 判断对象是否生成界面
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
 
    /**
     * 初始化position位置的界面
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }
 
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }
}

最后就是我们的Activity了

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

package com.example.nanchen.guidepagedemo;
 
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
 
import java.util.ArrayList;
import java.util.List;
 
/**
 * 实现首次启动的引导页面
 */
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
 
    private ViewPager vp;
    private int []imageIdArray;//图片资源的数组
    private List<View> viewList;//图片资源的集合
    private ViewGroup vg;//放置圆点
 
    //实例化原点View
    private ImageView iv_point;
    private ImageView []ivPointArray;
 
    //最后一页的按钮
    private ImageButton ib_start;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
 
        ib_start = (ImageButton) findViewById(R.id.guide_ib_start);
        ib_start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(GuideActivity.this,MainActivity.class));
                finish();
            }
        });
 
        //加载ViewPager
        initViewPager();
 
        //加载底部圆点
        initPoint();
    }
 
    /**
     * 加载底部圆点
     */
    private void initPoint() {
        //这里实例化LinearLayout
        vg = (ViewGroup) findViewById(R.id.guide_ll_point);
        //根据ViewPager的item数量实例化数组
        ivPointArray = new ImageView[viewList.size()];
        //循环新建底部圆点ImageView，将生成的ImageView保存到数组中
        int size = viewList.size();
        for (int i = 0;i<size;i++){
            iv_point = new ImageView(this);
            iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20));
            iv_point.setPadding(30,0,30,0);//left,top,right,bottom
            ivPointArray[i] = iv_point;
            //第一个页面需要设置为选中状态，这里采用两张不同的图片
            if (i == 0){
                iv_point.setBackgroundResource(R.mipmap.full_holo);
            }else{
                iv_point.setBackgroundResource(R.mipmap.empty_holo);
            }
            //将数组中的ImageView加入到ViewGroup
            vg.addView(ivPointArray[i]);
        }
 
 
 
    }
 
    /**
     * 加载图片ViewPager
     */
    private void initViewPager() {
        vp = (ViewPager) findViewById(R.id.guide_vp);
        //实例化图片资源
        imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};
        viewList = new ArrayList<>();
        //获取一个Layout参数，设置为全屏
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
 
        //循环创建View并加入到集合中
        int len = imageIdArray.length;
        for (int i = 0;i<len;i++){
            //new ImageView并设置全屏和图片资源
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(params);
            imageView.setBackgroundResource(imageIdArray[i]);
 
            //将ImageView加入到集合中
            viewList.add(imageView);
        }
 
        //View集合初始化好后，设置Adapter
        vp.setAdapter(new GuidePageAdapter(viewList));
        //设置滑动监听
        vp.setOnPageChangeListener(this);
    }
 
 
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
    }
 
    /**
     * 滑动后的监听
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        //循环设置当前页的标记图
        int length = imageIdArray.length;
        for (int i = 0;i<length;i++){
            ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);
            if (position != i){
                ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);
            }
        }
 
        //判断是否是最后一页，若是则显示按钮
        if (position == imageIdArray.length - 1){
            ib_start.setVisibility(View.VISIBLE);
        }else {
            ib_start.setVisibility(View.GONE);
        }
    }
 
 
    @Override
    public void onPageScrollStateChanged(int state) {
 
    }
}