ViewPager之app向导页面开发

ViewPager之app向导页面开发

viewpager常用语开发轮播图，app新手向导页面，本文介绍向导页面开发。

1.布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--小圆点-->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >

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

<View
android:id="@+id/red_point"
android:layout_width="5dp"
android:layout_height="5dp"
android:background="@drawable/guide_red_shape"
/>
</RelativeLayout>
</RelativeLayout>

ViewPager填充数据

准备显示的图片保存在list中

private void initData() {

int[] imageResIDs = { R.drawable.guide_1, R.drawable.guide_2,

R.drawable.guide_3 };

mImageList = new ArrayList<ImageView>();
for (int i = 0; i < imageResIDs.length; i++) {
ImageView image = new ImageView(this);
image.setBackgroundResource(imageResIDs[i]);// 注意设置背景, 才可以填充屏幕
mImageList.add(image);
}

}

初始化UI

private void initUI() {
setContentView(R.layout.activity_guide);
llPoints = (LinearLayout) findViewById(R.id.ll_points);
redPoint = findViewById(R.id.red_point);
vpGuide = (ViewPager) findViewById(R.id.vp_guide);
}

自定义adapter

class GuideAdpater extends PagerAdapter {

@Override
public int getCount() {
return imageLists.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
vpGuide.removeView((View) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
vpGuide.addView(imageLists.get(position));
return imageLists.get(position);
}

}

到这里基本的功能就已经完成了，下面再增加引导页的小圆点。

自定义小圆点

自定义xml文件画出灰色小圆点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="5dp"/>
<solid android:color="@android:color/darker_gray" />

initdata方法中初始化小圆点

for (int i = 0; i < viewPagerIDS.length; i++) {
View view = new View(this);
view.setBackgroundResource(R.drawable.guide_gray_shape);
LayoutParams params = new LayoutParams(10, 10);
if (i > 0) {
params.leftMargin = 10;
}
view.setLayoutParams(params);
llPoints.addView(view);
}

滑动viewpager使红色小圆点跟着移动

获取小圆点直接的距离，使用监听

//获取视图树 设置layout绘制完的监听事件 来获取圆点之间的距离
redPoint.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

@Override
public void onGlobalLayout() {
//解除监听事件 防止重复调用
redPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
pointWidth = llPoints.getChildAt(1).getLeft() - llPoints.getChildAt(0).getLeft();
System.out.println(pointWidth);
}});

获取小圆点直接的距离,通过将dp转化为px，然后与初始化小圆点的margin值相加就是其距离。

设置viewpager的滑动监听

//设置viewpager的页面移动事件  使小红点移动
vpGuide.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
//设置按钮显示隐藏
if(position==imageLists.size()-1){
btnGo.setVisibility(View.VISIBLE);
}else{
btnGo.setVisibility(View.INVISIBLE);
}
}

/**
* @param position 当前页数
* @param positionOffset 移动百分比
* @param positionOffsetPixels 移动的像素
*/
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
int delay = (int) (pointWidth * (positionOffset + position));
RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) redPoint.getLayoutParams();
System.out.println(params.leftMargin);
params.leftMargin = delay; //相对于父布局

redPoint.setLayoutParams(params);
}

@Override
public void onPageScrollStateChanged(int state) {
}
});