ViewPager创建步骤详解
Android
ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view。
在应用第一次启动时，经常会看到用ViewPager实现的Splash页面。
我们首先来看看API对于这个类的表述：
Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
Note this class is currently under early design and development. The API will likely change in later updates of the compatibility library, requiring changes to the source code of apps when they are compiled against the newer version.
ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter andFragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.
从这个描述中我们知道几点：
1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。
好了，下面我们来实现Splash页面吧！
步骤一：
创建一个Activity，并在布局文件中添加ViewPager组件：
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide_guide"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
步骤二：
新建一个类并集成PagerAdapter，即构建适配器
public class GuideAdapter extends PagerAdapter {
//图片资源合集:ViewPager滚动的页面种类
private int[] mImageId = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
private Context mContext;
public int[] getImageId() {
return mImageId;
}
//构造函数
public GuideAdapter(Context context) {
super();
this.mContext = context;
}
//返回填充ViewPager页面的数量
@Override
public int getCount() {
return mImageId.length;
}
//销毁ViewPager内某个页面时调用
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//固定是view == object
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(mContext);
//设置背景资源
imageView.setBackgroundResource(mImageId[position]);
container.addView(imageView);
return imageView;
}
}
步骤三：
在Acyivityy的Oncreate()；内获取ViewPager控件，并设置适配器:
//获取适配器
GuideAdapter mGuideAdapter = new GuideAdapter(getApplicationContext());
//获取ViewPager控件
ViewPager mGuideVp = (ViewPager)findViewById(R.id.vp_guide_guide);
//设置适配器
mGuideVp.setAdapter(mGuideAdapter);
大功告成！
下面就是设置ViewPager上面的小红点指示器：
步骤一：
首先，在res/drawable文件内新建两个xml文件，分别是shape_point_gray.xml和shape_point_red.xml，代表指示器的两种状态：
- shape_point_gray.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="@android:color/darker_gray"/>
</shape>
- shape_point_red.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="@android:color/holo_red_light"/>
</shape>
步骤二：
先设置灰色状态的圆点：在Activity的Oncreate();内添加以下代码：
//初始化灰色小圆点
for (int i=0; i<mGuideAdapter.getImageId().length; i++){
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.shape_point_gray);
LinearLayout.LayoutParams params =
new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
if (i > 0){
params.leftMargin = 10;//设置左边距
}
point.setLayoutParams(params);
mLinLayGuidepointContainer.addView(point);
}
步骤三：
设置红色状态的圆点：在布局文件内添加以下代码：
<RelativeLayout
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/linLay_guide_pointContainer"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/iv_guide_redPoint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_point_red"/>
</RelativeLayout>
步骤四：
此时已经完成了红点和灰点的初始化工作，下面就是当ViewPager页面左右滑动时，红点的位置跟着变化，实现指示器功能：
在步骤二时已经在页面添加了水平居中的三个灰色的圆点，下面就是获取相邻两个灰点之间的距离：
可以通过监听Layout执行结束事件来获取，代码如下：
int mPointWidth;
ImageView mIvGuideRedPoint = (ImageView)findViewById(R.id.iv_guide_redPoint);
// meaure->layout->draw(必须在onCreate执行结束之后才开始绘制),
// 所以不能直接在onCreate中获取位置相关信息
// 监听layout执行结束事件, 结束之后再去获取位置信息,计算圆点间距
// 获取视图树,hierarchyviewer.bat
mIvGuideRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
// layout方法执行结束之后,回调此方法
@Override
public void onGlobalLayout() {
mPointWidth = mLinLayGuidepointContainer
.getChildAt(1)
.getLeft() -
mLinLayGuidepointContainer
.getChildAt(0)
.getLeft();
}
});
然后通过ViewPager的页面监听事件来更改红点的状态：
//页面滑动事件
mGuideVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
// 页面滑动过程中回调
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
int leftMargin = (int)
(mPointWidth * positionOffset + mPointWidth * position);
//重新修改布局参数
RelativeLayout.LayoutParams params =
(RelativeLayout.LayoutParams) mIvGuideRedPoint.getLayoutParams();
params.leftMargin = leftMargin;
mIvGuideRedPoint.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
ok!终于完成了，好好试下！有耐心才可成功
效果图（按钮没有实现）：
ViewPager效果图.gif
