利用viewPager实现导航界面

导航界面（图片下方带选中时变颜色的点点）：

首先：

1.需要一个view的list

2.需要一个PagerAdapter

重写Adapter中的4个方法：

   class pageAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            return guildList.size();
        }

        /**
         *
         * @param view
         * @param object
         * @return 返回项决定是否显示界面 ，起到过滤和判断的作用
         */  如果改成true则所有界面都显示，如果改成false则都不显示。
        @Override
        public boolean isViewFromObject(View view, Object object) {
          return   view==object;
        }
        //移除
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        //加载界面
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view=  guildList.get(position);
            container.addView(view);
            return view;
        }
    }

实现了Adapter之后开始实现下方的圆点：

下方的圆点可以采用一个布局容器，然后添加view到布局中实现4个圆点！

布局容器就用LinearLayout，通过给view添加圆点的背景图片（通过图片选择器来实现图片颜色的切换）实现圆点。

            View viewPoint =new View(this);
            viewPoint.setBackgroundResource(R.drawable.gray_point);
            //给点设置放置的位置
            LinearLayout.LayoutParams ll=  new LinearLayout.LayoutParams(40,40);//这里给圆点设置大小是通过LayoutParams的！是所在布局类型的LayoutPararams
            //点之间设置间距
            if(i==0){} 
            else{
                 ll.leftMargin=10;      //左边距
             }
            viewPoint.setLayoutParams(ll);
            llPoints.addView(viewPoint);
       

灰点的xml绘图文件：

drawable目录下。
<根元素为shape>

注意：

设定宽高在LayoutParams构造器参数里， 直接写单位是px, 不是 dp!！！
这里需要处理！

最后完成事件：

给viewPager设置事件重写三个方法：

   viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**
             * 页面滑动过程中执行
             * @param position 当前位置
             * @param positionOffset 偏移比例
             * @param positionOffsetPixels
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //计算距离滑动红点
                RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
                //设置红点在布局中的有边距
                rl.leftMargin= (int) (distens*(positionOffset+position));

                redpoint.setLayoutParams(rl);
            }

            /**
             * 当前页面执行方法
             * @param position
             */
            @Override
            public void onPageSelected(int position) {
                   if(position==guildList.size()-1){
                       finishButton.setVisibility(View.VISIBLE);
                   }else {
                       finishButton.setVisibility(View.GONE);
                   }
                 /*RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
                 //设置红点在布局中的有边距
                 rl.leftMargin= distens*position;
                 redpoint.setLayoutParams(rl);*/

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

其中onPageSelected();

这个方法是当前页面的方法因此我们可以对当前页面做一些处理，比如改变当前页面圆点的颜色，或者控制当前页面的按钮是否显示等！

如果只需要滑动时红点相应改变成选中的颜色则：

   public void onPageSelected(int position) {
                  
                 RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
       
                 rl.leftMargin= distens*position;
                 redpoint.setLayoutParams(rl);

            }

或者直接在此设置当前点颜色是红色，其他点颜色是灰色的。

如果想要出现看到点的移动效果：

1.就在普通点的布局中单独添加一个view（红颜色背景的点）覆盖住原来的点。

2.onPageScrolled()方法是在滑动时执行的，因此如果我们想在滑动时处理圆点的移动比例显示，需要这个方法。 

 2.1而移动的比例需要计算圆点和圆点之间的距离！注意：这个距离不是间距，而是左上角的点到第二个圆点左上角的点之间的距离。

因此这个距离需要界面完成绘制之后才能通过界面的参数确定下来。

 2.2:通过监听布局完成后的函数来确定点与点之间的距离：

        redpoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //取消注册只监听一次
                redpoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                //获取距离
                distens= llPoints.getChildAt(1).getLeft()-llPoints.getChildAt(0).getLeft();
            }
        });

 因为布局每进行一次重绘都会调用该函数，所以要取消监听只执行一次回调方法！

 2.3 在onPageScrolled()方法中根据移动的比例改变红点的移动距离：

 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //计算距离滑动红点
                RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
                //设置红点在布局中的有边距
                rl.leftMargin= (int) (distens*(positionOffset+position));

                redpoint.setLayoutParams(rl);
            }

通过上面的方法即可完成一个导航的viewPager。这很简单，其中需要的主要是动态添加view控件时布局参数，和点与点之间通过回调函数计算的部分！！