Android UI设计——ViewPager中设立底部显示圆点焦点（二）

　　ViewPager中设置底部显示圆点焦点这种使用其实还是很常见的，对于这个功能的实现其实有很多方式：
　　
1. 通过在显示图片中加入圆点，也就是我们可以直接使用带圆点的图片。
2. 通过在代码中实现这一功能。
　　我个人还是比较赞同第一种方式的，因为并没有什么缺点，并且还可以简化代码。这只是我个人认为哈……

　　即使第一种方法好用，我们也应该掌握如何在代码中实现这一功能。

功能实现

1.在布局中通过FrameLayout布局在ViewPager上覆盖一个LinearLayout，这个LnearLayout中包含三个点。也就是我们滑动界面时显示的三个点。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.lishuang.administrator.viewpager0901.ShowActivity">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <!-- 定义ViewPager充满整个FrameLayout布局 -->        <android.support.v4.view.ViewPager            android:id="@+id/viewpager_show"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <!--在FrameLayout布局的底部放置三个点-->        <LinearLayout            android:layout_width="match_parent"            android:layout_height="30dp"            android:layout_gravity="bottom"            android:gravity="center"            android:orientation="horizontal">            <ImageView                android:id="@+id/dot_first"                android:layout_width="10dp"                android:layout_height="10dp"                android:layout_margin="10dp"                android:background="@drawable/dot_normal" />            <ImageView                android:id="@+id/dot_second"                android:layout_width="10dp"                android:layout_height="10dp"                android:layout_margin="10dp"                android:background="@drawable/dot_normal" />            <ImageView                android:id="@+id/dot_thrid"                android:layout_width="10dp"                android:layout_height="10dp"                android:layout_margin="10dp"                android:background="@drawable/dot_normal" />        </LinearLayout>    </FrameLayout></RelativeLayout>

2. 创建一个MyPagerAdapter继承PagerAdapter，重写其中个四个方法，具体在《Android UI设计——ViewPager的简单使用（一）》
这篇博客总中已经进行了描述，这里不再赘述，直接上代码。

public class MyPagerAdapter extends PagerAdapter {    private List<View> mViews;//三个布局的集合    /*    通过构造器获得数据     */    public MyPagerAdapter(List<View> mViews) {        this.mViews = mViews;    }    @Override    public int getCount() {        return mViews.size();//显示的布局的数量，我们这里为三个。    }    @Override    public boolean isViewFromObject(View view, Object o) {        return view == o;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        //增加View        container.addView(mViews.get(position));        return mViews.get(position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        //删除View        container.removeView(mViews.get(position));    }}

3. 首先要先分析一下dot的显示：
　　我们通过滑动屏幕翻页，当前页面的dot显示为浅色， 未显示页面的dot为深色。
**在MainActivity中通过定义一个List集合存储dot在布局中的对象。通过viewPager的点击事件setOnPageChangeListener()
来蒋婷页面的滑动，当页面滑动后将代表当前页面的dot赋值为浅色，将前一个页面恢复为深色。**

public class ShowActivity extends Activity {    private ViewPager mViewPager;    private List<View> mViews;    private LayoutInflater mInflater;    private MyPagerAdapter myPagerAdapter;    private List<ImageView> mDots;//定义一个集合存储三个dot    private int oldPosition;//记录当前点的位置。    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //去除标题栏，这样界面感觉会好看点,必须在setContentView()方法前。        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_show);        mViewPager = (ViewPager) findViewById(R.id.viewpager_show);        mInflater = getLayoutInflater();        //初始化是三个界面        mViews = new ArrayList<View>();        View viewFirst = mInflater.inflate(R.layout.item_frist, null);        View viewSecond = mInflater.inflate(R.layout.item_second, null);        View viewThrid = mInflater.inflate(R.layout.item_third, null);        mViews.add(viewFirst);        mViews.add(viewSecond);        mViews.add(viewThrid);        //初始化三个dot        mDots = new ArrayList<ImageView>();        ImageView dotFirst = (ImageView) findViewById(R.id.dot_first);        ImageView dotFSecond = (ImageView) findViewById(R.id.dot_second);        ImageView dotThrid = (ImageView) findViewById(R.id.dot_thrid);        mDots.add(dotFirst);        mDots.add(dotFSecond);        mDots.add(dotThrid);        oldPosition = 0;        mDots.get(oldPosition).setImageResource(R.drawable.dot_focused);        myPagerAdapter = new MyPagerAdapter(mViews);        mViewPager.setAdapter(myPagerAdapter);        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                mDots.get(oldPosition).setImageResource(R.drawable.dot_normal);                mDots.get(position).setImageResource(R.drawable.dot_focused);                oldPosition = position;            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }}

效果展示：