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 {@Overridepublic int getCount() {    return imageLists.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {    return view == object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {    vpGuide.removeView((View) object);}@Overridepublic 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) {        }    });