Android从圆点导航的两个案例（ViewPager）

案例一效果：

布局文件：

<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_view_pager"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.jogger.demo.ViewPagerActivity">

<android.support.v4.view.ViewPager        android:id="@+id/vp_guide"        android:layout_width="match_parent"        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

<LinearLayout        android:id="@+id/ll_container"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="40dp"        android:gravity="center"        android:orientation="horizontal"></LinearLayout>

</RelativeLayout>

Activity：

public class ViewPagerActivity extends FragmentActivity {

private ViewPager vp_guide;    private List<ImageView> mImgList;//导航图集合    private LinearLayout ll_container;//小圆点容器    private int mCurrentIndex = 0;//当前小圆点的位置    private int[] imgArray = {R.drawable.guidance1, R.drawable.guidance2, R.drawable.guidance3, R            .drawable.guidance4};

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_view_pager);        vp_guide = (ViewPager) findViewById(R.id.vp_guide);        ll_container = (LinearLayout) findViewById(R.id.ll_container);        mImgList = new ArrayList<>();        for (int i = 0; i < imgArray.length; i++) {            ImageView imageView = new ImageView(this);//获取4个圆点            imageView.setImageResource(imgArray[i]);            mImgList.add(imageView);            ImageView dot = new ImageView(this);            if (i == mCurrentIndex) {                dot.setImageResource(R.drawable.page_now);//设置当前页的圆点            } else {                dot.setImageResource(R.drawable.page);//其余页的圆点            }            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout                    .LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);            if (i > 0) {                params.leftMargin = 10;//设置圆点边距            }            dot.setLayoutParams(params);            ll_container.addView(dot);//将圆点添加到容器中        }        vp_guide.setAdapter(new MyAdapter(mImgList));        //添加监听        vp_guide.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int                    positionOffsetPixels) {

}

@Override            public void onPageSelected(int position) {                //根据监听的页面改变当前页对应的小圆点                mCurrentIndex = position;                for (int i = 0; i < ll_container.getChildCount(); i++) {                    ImageView imageView = (ImageView) ll_container.getChildAt(i);                    if (i == position) {                        imageView.setImageResource(R.drawable.page_now);                    } else {                        imageView.setImageResource(R.drawable.page);                    }                }            }

@Override            public void onPageScrollStateChanged(int state) {

}        });    }

public class MyAdapter extends PagerAdapter {        private List<ImageView> mViewList;

public MyAdapter(List<ImageView> viewList) {            mViewList = viewList;        }

@Override        public ImageView instantiateItem(ViewGroup container, int position) {            ImageView view = mViewList.get(position);            container.addView(view);            return view;        }

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

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

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

案例二效果：

布局文件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_view_pager"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.jogger.demo.ViewPagerActivity">

<android.support.v4.view.ViewPager        android:id="@+id/vp_guide"        android:layout_width="match_parent"        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

<RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="40dp">

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

<ImageView            android:id="@+id/iv_dot_now"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/page_now"/>    </RelativeLayout>

</RelativeLayout>

Activity：

public class ViewPagerActivity extends FragmentActivity {

private ViewPager vp_guide;    private List<ImageView> mImgList;//导航图集合    private LinearLayout ll_container;//小圆点容器    private int mCurrentIndex = 0;//当前小圆点的位置    private int mDotDis;//小圆点的距离    private ImageView iv_dot_now;//当前圆点    private int[] imgArray = {R.drawable.guidance1, R.drawable.guidance2, R.drawable.guidance3, R            .drawable.guidance4};

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_view_pager);        vp_guide = (ViewPager) findViewById(R.id.vp_guide);        ll_container = (LinearLayout) findViewById(R.id.ll_container);        iv_dot_now = (ImageView) findViewById(R.id.iv_dot_now);        mImgList = new ArrayList<>();        for (int i = 0; i < imgArray.length; i++) {            ImageView imageView = new ImageView(this);//获取4个圆点            imageView.setImageResource(imgArray[i]);            mImgList.add(imageView);            ImageView dot = new ImageView(this);            dot.setImageResource(R.drawable.page);            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout                    .LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);            if (i > 0) {                params.leftMargin = 10;//设置圆点边距            }            dot.setLayoutParams(params);            ll_container.addView(dot);//将圆点添加到容器中        }        vp_guide.setAdapter(new MyAdapter(mImgList));        //添加监听        vp_guide.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int                    positionOffsetPixels) {                // 滚动过程中                // 红色小圆点的移动距离=移动百分比*两个圆点的间距                // 更新小红点距离                int dis = (int) (mDotDis * positionOffset) + position * mDotDis;//                // 因为移动完一个界面后，百分比会归0，所以要加上移动过的单位position*mPointDis                //获取小圆点的布局属性，更新左边距                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) iv_dot_now                        .getLayoutParams();                params.leftMargin = dis;// 修改左边距                // 重新设置布局参数                iv_dot_now.setLayoutParams(params);            }

@Override            public void onPageSelected(int position) {

}

@Override            public void onPageScrollStateChanged(int state) {

}        });        // 监听layout方法结束的事件，位置确定之后获取圆点间距        // 视图树        iv_dot_now.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver                .OnGlobalLayoutListener() {

@Override            public void onGlobalLayout() {                //视图树移除监听                iv_dot_now.getViewTreeObserver().removeOnGlobalLayoutListener(this);                //计算得到小圆点距离                mDotDis = ll_container.getChildAt(1).getLeft() - ll_container.getChildAt(0)                        .getLeft();            }        });    }

public class MyAdapter extends PagerAdapter {        private List<ImageView> mViewList;

public MyAdapter(List<ImageView> viewList) {            mViewList = viewList;        }

@Override        public ImageView instantiateItem(ViewGroup container, int position) {            ImageView view = mViewList.get(position);            container.addView(view);            return view;        }

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

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

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