Android学习之路---使用ViewPager实现引导页

　　许多app安装之后都有可滑动的引导页，今天看了视频学习了下ViewPager的使用。

　　

　　下面是我的实现：

　　

　　1.主类：

public class ViewPagerProject extends Activity implements ViewPager.OnPageChangeListener {

private ViewPager viewPager;
private ArrayList<View> views = new ArrayList<>();//装载每个view的容器
private ImageView[] imageViews;//小圆点数组
private int currentIndex;//当前正在显示的卡页

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_project);
initView();
initDot();

}

/**
* 初始化底部圆点
*/
private void initDot() {
LinearLayout layout = (LinearLayout) findViewById(R.id.dotLayout);//找到盛放四个小圆点的LinearLayout布局
imageViews = new ImageView[views.size()];
for (int i = 0; i < imageViews.length; i++) {
imageViews[i] = (ImageView) layout.getChildAt(i);//得到LinearLayout布局中的每个小圆点图片
}
currentIndex = 0;//设置默认显示第一选项卡
imageViews[currentIndex].setImageResource(R.mipmap.point_focused);//设置默认第一选项卡的小圆点为被选中

}

/**
* 设置小圆点的图片
*
* @param position
*/
private void setCurrentIndex(int position) {
if (currentIndex < 0 || currentIndex == position || currentIndex > imageViews.length - 1) {
return;
}
imageViews[currentIndex].setImageResource(R.mipmap.point_unfocused);//将上一个选项卡小圆点设置为未被选中
imageViews[position].setImageResource(R.mipmap.point_focused);//将选中的选项卡的小圆点设置为被选中
currentIndex = position;//将“上一个”选项卡位置设置为当前选项卡位置
}

private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager_project);
//将每个选项卡视图添加到views容器中
views.add(getLayoutInflater().inflate(R.layout.layout1, null));
views.add(getLayoutInflater().inflate(R.layout.layout2, null));
views.add(getLayoutInflater().inflate(R.layout.layout3, null));
views.add(getLayoutInflater().inflate(R.layout.layout4, null));

//设置默认显示的选项卡
viewPager.setCurrentItem(1);
viewPager.setAdapter(new MyPagerAdapter());//添加适配器
viewPager.setOnPageChangeListener(this);//注册滑动界面事件
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
setCurrentIndex(position);
}

@Override
public void onPageScrollStateChanged(int state) {

}

/**
* 自定义适配器
*/
class MyPagerAdapter extends PagerAdapter {

@Override
public int getCount() {
return views.size();//返回views容器大小
}

/**
* 判断view和对象是否相等
*
* @param view
* @param object
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//常用写法
}

/**
* 实例化选项卡
*
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);//得到选项卡视图
container.addView(view);//添加选项卡视图
return view;
}

/**
* 删除选项卡
*
* @param container
* @param position
* @param object
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));//删除视图
}
}
}

　　2.主布局文件activity_view_pager_project.xml：最外面是帧布局，里面有个ViewPager，下方是一个LinearLayout，LinearLayout中存放着四张小圆点图片：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_view_pager_project"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.nuc.rxk.highui2.ViewPagerProject">

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

<LinearLayout
android:id="@+id/dotLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:gravity="center">

<ImageView
android:layout_width="20dp"
android:paddingRight="10dp"
android:layout_height="20dp"
android:src="@mipmap/point_unfocused" />

<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:paddingRight="10dp"
android:src="@mipmap/point_unfocused" />

<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:paddingRight="10dp"
android:src="@mipmap/point_unfocused" />

<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:paddingRight="10dp"
android:src="@mipmap/point_unfocused" />
</LinearLayout>

</FrameLayout>

　　3.每张引导图布局layout1.xml（有4个，只是图片换了其他代码相同）：

<?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:orientation="vertical">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="@mipmap/p1" />
</LinearLayout>

　　4.效果图：