利用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>

<conters :角

<radius :半径

<solid : 固体 颜色等

注意：

设定宽高在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控件时布局参数，和点与点之间通过回调函数计算的部分！！