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

　　ViewPager中设置底部显示圆点焦点这种使用其实还是很常见的，对于这个功能的实现其实有很多方式：
　　
1. 通过在显示图片中加入圆点，也就是我们可以直接使用带圆点的图片。
2. 通过在代码中实现这一功能。在代码中实现也有两种方式：

　　在布局中直接在底部添加点。
　　在java代码中动态的添加点。

　　我个人还是比较赞同第一种方式的，因为并没有什么缺点，并且还可以简化代码。这只是我个人认为哈……

　　即使第一种方法好用，我们也应该掌握如何在代码中实现这一功能。想要源码的可以点击此处下载：源码下载链接　

XML布局中添加

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;}@Overridepublic int getCount() {return mViews.size();//显示的布局的数量，我们这里为三个。}@Overridepublic boolean isViewFromObject(View view, Object o) {return view == o;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {//增加Viewcontainer.addView(mViews.get(position));return mViews.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {//删除Viewcontainer.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;//定义一个集合存储三个dotprivate int oldPosition;//记录当前点的位置。@Overrideprotected 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);//初始化三个dotmDots = 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() {@Overridepublic 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;}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}});}
}

效果展示：

代码中动态添加

1.在布局中，在ViewPager的底部覆盖一个LinearLayout，将从代码中动态添加的点添加到这个LinearLayout布局上。

<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=".MainActivity"><android.support.v4.view.ViewPager
        android:id="@+id/viewpager_second"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager><LinearLayout
        android:id="@+id/linearlayout_dot"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="10dp"android:gravity="center"android:orientation="horizontal"></LinearLayout>
</RelativeLayout>

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

3. 在Activity中动态的添加点。

public class MainActivity extends Activity {private ViewPager mViewpagerSecond;private List<View> mViews;private List<ImageView> mDots;private MyPagerAdapter myPagerAdapter;private LinearLayout mLinearLayout;private LayoutInflater mInflater;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mViewpagerSecond = (ViewPager) findViewById(R.id.viewpager_second);mInflater = getLayoutInflater();mLinearLayout = (LinearLayout) findViewById(R.id.linearlayout_dot);//初始化页面mViews = new ArrayList<View>();View view1 = mInflater.inflate(R.layout.viewpager_item_one, null);View view2 = mInflater.inflate(R.layout.viewpager_item_two, null);View view3 = mInflater.inflate(R.layout.viewpager_item_three, null);mViews.add(view1);mViews.add(view2);mViews.add(view3);//通过循环动态的添加点。mDots = new ArrayList<ImageView>();for (int i = 0; i < mViews.size(); i++) {ImageView imageView = new ImageView(this);int width = Dp2Px(this, 10);int heigth = Dp2Px(this, 10);int margin = Dp2Px(this, 10);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, heigth);params.setMargins(margin, margin, margin, margin);//设置margin,也就是外边距。imageView.setLayoutParams(params);//传入参数params设置宽和高imageView.setImageResource(R.drawable.dot_normal);//设置图片mLinearLayout.addView(imageView);//将图片添加到布局中//将dot添加到dots集合中mDots.add(imageView);}mDots.get(0).setImageResource(R.drawable.dot_focused);//设置启动后显示的第一个点myPagerAdapter = new MyPagerAdapter(mViews);mViewpagerSecond.setAdapter(myPagerAdapter);mViewpagerSecond.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int i, float v, int i1) {}@Overridepublic void onPageSelected(int position) {//for-each循环将所有的dot设置为dot_normalfor (ImageView imageView : mDots) {imageView.setImageResource(R.drawable.dot_normal);}//设置当前显示的页面的dot设置为dot_focused        mDots.get(position).setImageResource(R.drawable.dot_focused);}@Overridepublic void onPageScrollStateChanged(int i) {}});}/*将dp转化为px*/public int Dp2Px(Context context, float dp) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dp * scale + 0.5f);}
}

效果展示：