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) {
        }
    });