自定义ViewPager的导航indecator（非常实用和主流）

自定义ViewPager的导航indecator（非常实用和主流）

           现在很多App的欢迎页或者主页的轮播下面都有indicator（就是那个随着viewpager滚动而跟着滚动的小圆点）；然后很多显示效果基本就是放一个选中的图片和一个未选择的图片，让这两个图片不断的轮换，这个效果都是烂大街了。而有一种效果就是那个选中的小圆点是随着viewpager的滑动而滑动有明显的动画效果，我就琢磨着怎样做这样一个效果，果不起然，功夫不负有心人，终于弄出来了，效果如下：

先制作一个草稿图如下：

要考虑的技术点：

         1、小圆点的个数怎么确定；

         2、小圆点的背景色、圆半径和他们之间的间距margin可不可以自定义；

         3、小圆点的摆放位置；

         4、小圆点对象的创建；

         5、被选中的小原点是怎样在图层上面滑动显示的；

想到了问题，那么就开始着手找解决方法，看看没有有不会的，就要查查资料。想想总是有办法的，下面就是个人的一些解决办法：

        

        1、小圆点个数要与ViewPager的内容个数相同，用viewPager.getAdapter().getCount()获取个数；

        2、小圆点的背景色，和半径，margin可以使用自定义属性来设置；

        3、小圆点的位置可以使用自定义view中的layout方法获取父容器宽度 - 小圆点总宽度，这就水平居中了，然后取容器高度的一半-半径就是小圆点y开始的位置；

        4、小圆点要动态的保存它的宽度，绘制背景色，X,Y坐标等信息，这个时候就要开始选好对象，采用ShapeDrawable；

        5、最重要的一点就是，小圆点要随着Viewpager移动，它是绘制在图层上面的，这个时候就要设置好Paint的属性，非常关键，如下：

//在目标图片顶部绘制源图像,从命名上也可以看出来就是把源图像绘制在上方，把选中的小原点绘制在上面
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));

上面分析完成后，那么我们就开始动手了：

      1、创建自定义属性：

[java]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <declare-styleable name="CircleIndicator">  
5.         <attr name="indicator_radio" format="dimension" />  
6.         <attr name="indicator_margin" format="dimension" />  
7.         <attr name="indicator_background" format="color|integer" />  
8.         <attr name="indicator_selected_background" format="color|integer" />  
9.     </declare-styleable>  
10.   
11. </resources>  

       2、在main_activity.xml使用自定义View

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:indicator="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context="com.world.hello.circleindicator.MainActivity">  
8.   
9.     <android.support.v4.view.ViewPager  
10.         android:id="@+id/view_pager"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="match_parent" />  
13.   
14.     <com.world.hello.circleindicator.CircleIndicator  
15.         android:id="@+id/pager_indicator"  
16.         android:layout_width="match_parent"  
17.         android:layout_height="40dp"  
18.         android:layout_alignParentBottom="true"  
19.         android:layout_marginBottom="40dp"  
20.         indicator:indicator_background="@android:color/white"  
21.         indicator:indicator_margin="20dp"  
22.         indicator:indicator_radio="10dp"  
23.         indicator:indicator_selected_background="@android:color/holo_red_light" />  
24. </RelativeLayout>  

       3、MainActivity.class，为ViewPager配置几张图片

[java]  view plain  copy

 

1. package com.world.hello.circleindicator;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.view.PagerAdapter;  
5. import android.support.v4.view.ViewPager;  
6. import android.support.v7.app.AppCompatActivity;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.widget.ImageView;  
10.   
11. import java.util.ArrayList;  
12.   
13. public class MainActivity extends AppCompatActivity {  
14.   
15.     private ViewPager mViewPager;  
16.     //这里为ViewPager模拟5张图片  
17.     private int[] mImags = new int[]{  
18.             R.drawable.img1,  
19.             R.drawable.img2,  
20.             R.drawable.img3,  
21.             R.drawable.img4,  
22.             R.drawable.img5};  
23.   
24.     private ArrayList<ImageView> mImageViews = new ArrayList<ImageView>();  
25.     //Viewpager小圆点导航  
26.     private CircleIndicator mIndicator;  
27.   
28.     @Override  
29.     protected void onCreate(Bundle savedInstanceState) {  
30.         super.onCreate(savedInstanceState);  
31.         setContentView(R.layout.activity_main);  
32.   
33.         mViewPager = (ViewPager) findViewById(R.id.view_pager);  
34.         for (int i = 0; i < mImags.length; i++) {  
35.             ImageView imageView = new ImageView(MainActivity.this);  
36.             imageView.setImageResource(mImags[i]);  
37.             imageView.setScaleType(ImageView.ScaleType.FIT_XY);  
38.             mImageViews.add(imageView);  
39.         }  
40.         mViewPager.setAdapter(pagerAdapter);  
41.   
42.         mIndicator = (CircleIndicator) findViewById(R.id.pager_indicator);  
43.         //将indicator和ViewPager绑定起来，实现联动效果  
44.         mIndicator.setViewPager(mViewPager);  
45.     }  
46.   
47.   
48.     PagerAdapter pagerAdapter = new PagerAdapter() {  
49.   
50.         @Override  
51.         public int getCount() {  
52.             return mImags.length;  
53.         }  
54.   
55.         @Override  
56.         public boolean isViewFromObject(View view, Object object) {  
57.             return view == object;  
58.         }  
59.   
60.         @Override  
61.         public void destroyItem(ViewGroup container, int position, Object object) {  
62.             container.removeView(mImageViews.get(position));  
63.         }  
64.   
65.         @Override  
66.         public CharSequence getPageTitle(int position) {  
67.             return "null";  
68.         }  
69.   
70.         @Override  
71.         public Object instantiateItem(ViewGroup container, int position) {  
72.   
73.             container.addView(mImageViews.get(position));  
74.             return mImageViews.get(position);  
75.         }  
76.     };  
77. }  

           4、创建小原点自定义对象CircleShape

[java]  view plain  copy

 

1. package com.world.hello.circleindicator;  
2.   
3. import android.graphics.Paint;  
4. import android.graphics.drawable.ShapeDrawable;  
5. import android.graphics.drawable.shapes.Shape;  
6.   
7. /** 
8.  * 小圆点类 
9.  * Created by chengguo on 2016/6/1. 
10.  */  
11. public class CircleShape {  
12.     //设置默认值  
13.     private float x = 0;  
14.     private float y = 0;  
15.     private ShapeDrawable shape;  
16.     private Paint paint;  
17.   
18.     public CircleShape(ShapeDrawable shape) {  
19.         this.shape = shape;  
20.     }  
21.   
22.     public void setPaint(Paint value) {  
23.         paint = value;  
24.     }  
25.   
26.     public Paint getPaint() {  
27.         return paint;  
28.     }  
29.   
30.     public void setX(float value) {  
31.         x = value;  
32.     }  
33.   
34.     public float getX() {  
35.         return x;  
36.     }  
37.   
38.     public void setY(float value) {  
39.         y = value;  
40.     }  
41.   
42.     public float getY() {  
43.         return y;  
44.     }  
45.   
46.     public void setShape(ShapeDrawable value) {  
47.         shape = value;  
48.     }  
49.   
50.     public ShapeDrawable getShape() {  
51.         return shape;  
52.     }  
53.   
54.     public float getWidth() {  
55.         return shape.getShape().getWidth();  
56.     }  
57.   
58.     public void setWidth(float width) {  
59.         Shape s = shape.getShape();  
60.         s.resize(width, s.getHeight());  
61.     }  
62.   
63.     public float getHeight() {  
64.         return shape.getShape().getHeight();  
65.     }  
66.   
67.     public void setHeight(float height) {  
68.         Shape s = shape.getShape();  
69.         s.resize(s.getWidth(), height);  
70.     }  
71.   
72.     public void resizeShape(final float width, final float height) {  
73.         shape.getShape().resize(width, height);  
74.     }  
75.   
76. }  

 

          5、自定义CirCleIndicator 实现类

[java]  view plain  copy

 

1. package com.world.hello.circleindicator;  
2.   
3. import android.content.Context;  
4. import android.content.res.TypedArray;  
5. import android.graphics.Canvas;  
6. import android.graphics.Color;  
7. import android.graphics.Paint;  
8. import android.graphics.PorterDuff;  
9. import android.graphics.PorterDuffXfermode;  
10. import android.graphics.drawable.ShapeDrawable;  
11. import android.graphics.drawable.shapes.OvalShape;  
12. import android.support.v4.view.ViewPager;  
13. import android.util.AttributeSet;  
14. import android.view.View;  
15.   
16. import java.util.ArrayList;  
17. import java.util.List;  
18.   
19. /** 
20.  * 自定义indicator类 
21.  * Created by chengguo on 2016/6/1. 
22.  */  
23. public class CircleIndicator extends View {  
24.   
25.     //接收从activity传过来的ViewPager,实现联动  
26.     private ViewPager mViewPager;  
27.     //当前小圆点的对象  
28.     private CircleShape mSelectIndicator;  
29.     //所有小原点对象集合  
30.     private List<CircleShape> mIndicatorLists = new ArrayList<CircleShape>();  
31.     //小圆点的圆半径  
32.     private float mIndicatorRadius;  
33.     //小圆点之间的间隔  
34.     private float mIndicatorMargin;  
35.     //小圆点的背景  
36.     private int mIndicatorBackground;  
37.     //选中小圆点的背景  
38.     private int mIndicatorSelectedBackground;  
39.     //viewpager当前的位置  
40.     private int mCurrentPosition = 0;//默认为0  
41.     //ViewPager当前位置的偏移量  
42.     private float mCurrentPositionOffset = 0;  
43.   
44.     //下面是一些自定义属性的默认值  
45.     private final int DEFAULT_RADIUS = 10;        //默认半径  
46.     private final int DEFAULT_MARGIN = 50;  //默认间距  
47.     private final int DEFAULT_BACKGROUND = Color.WHITE;    //默认颜色  
48.     private final int DEFAULT_SELECTED_BACKGROUND = Color.YELLOW;   //默认选中颜色  
49.   
50.     public CircleIndicator(Context context) {  
51.         super(context, null);  
52.     }  
53.   
54.     public CircleIndicator(Context context, AttributeSet attrs) {  
55.         super(context, attrs);  
56.         init(context, attrs);  
57.     }  
58.   
59.     public CircleIndicator(Context context, AttributeSet attrs, int defStyleAttr) {  
60.         super(context, attrs, defStyleAttr);  
61.         init(context, attrs);  
62.     }  
63.   
64.     /** 
65.      * 初始化属性 
66.      * 
67.      * @param context 
68.      * @param attrs 
69.      */  
70.     private void init(Context context, AttributeSet attrs) {  
71.         if (attrs == null) {  
72.             return;  
73.         }  
74.         TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleIndicator);  
75.         mIndicatorRadius = ta.getDimensionPixelSize(R.styleable.CircleIndicator_indicator_radio, DEFAULT_RADIUS);  
76.         mIndicatorMargin = ta.getDimensionPixelSize(R.styleable.CircleIndicator_indicator_margin, DEFAULT_MARGIN);  
77.         mIndicatorBackground = ta.getColor(R.styleable.CircleIndicator_indicator_background, DEFAULT_BACKGROUND);  
78.         mIndicatorSelectedBackground = ta.getColor(R.styleable.CircleIndicator_indicator_selected_background, DEFAULT_SELECTED_BACKGROUND);  
79.         //回收资源  
80.         ta.recycle();  
81.     }  
82.   
83.     /** 
84.      * 从activity把ViewPager传递进来，实现ViewPager和Indicator联动 
85.      * 
86.      * @param viewPager 
87.      */  
88.     public void setViewPager(final ViewPager viewPager) {  
89.         mViewPager = viewPager;  
90.         createIndicators();  
91.         createSelectIndicator();  
92.         setUpdateChangeListener();  
93.     }  
94.   
95.     /** 
96.      * 监听ViewPager的改变，实现小圆点与ViewPager联动 
97.      */  
98.     private void setUpdateChangeListener() {  
99.         mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {  
100.             @Override  
101.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
102.                 super.onPageScrolled(position, positionOffset, positionOffsetPixels);  
103.   
104.                 mCurrentPosition = position;  
105.                 mCurrentPositionOffset = positionOffset;  
106.                 //强制从新布局  
107.                 requestLayout();  
108.                 //重新绘制  
109.                 invalidate();  
110.             }  
111.         });  
112.     }  
113.   
114.     /** 
115.      * 创建选择的小原点，就是随着viewPager移动而移动的小圆点 
116.      */  
117.     private void createSelectIndicator() {  
118.         OvalShape circle = new OvalShape();  
119.         ShapeDrawable drawable = new ShapeDrawable(circle);  
120.         mSelectIndicator = new CircleShape(drawable);  
121.         Paint paint = drawable.getPaint();  
122.         paint.setColor(mIndicatorSelectedBackground);  
123.         paint.setAntiAlias(true);  
124.         //在目标图片顶部绘制源图像,从命名上也可以看出来就是把源图像绘制在上方，把选中的小原点绘制在上面  
125.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));  
126.         mSelectIndicator.setPaint(paint);  
127.     }  
128.   
129.     /** 
130.      * 创建与ViewPager个数相同的导航小圆点 
131.      */  
132.     private void createIndicators() {  
133.         for (int i = 0; i < mViewPager.getAdapter().getCount(); i++) {  
134.             //用圆形Shape创建小圆点对象  
135.             OvalShape circle = new OvalShape();  
136.             ShapeDrawable drawable = new ShapeDrawable(circle);  
137.             CircleShape circleShape = new CircleShape(drawable);  
138.             Paint paint = drawable.getPaint();  
139.             paint.setColor(mIndicatorBackground);  
140.             paint.setAntiAlias(true);  
141.             circleShape.setPaint(paint);  
142.             mIndicatorLists.add(circleShape);  
143.         }  
144.     }  
145.   
146.   
147.     @Override  
148.     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {  
149.         super.onLayout(changed, left, top, right, bottom);  
150.         layoutIndicatorLists(getWidth(), getHeight());  
151.         layoutSelectIndicator(mCurrentPosition, mCurrentPositionOffset);  
152.     }  
153.   
154.     /** 
155.      * 放置小圆点 
156.      * 
157.      * @param containerWidth 
158.      * @param containerHeight 
159.      */  
160.     private void layoutIndicatorLists(int containerWidth, int containerHeight) {  
161.         if (mIndicatorLists == null) {  
162.             return;  
163.         }  
164.         //容器的水平中间线  
165.         float yCoordinate = containerHeight * 0.5f;  
166.         float startPosition = startDrawPosition(containerWidth);  
167.         for (int i = 0; i < mIndicatorLists.size(); i++) {  
168.             CircleShape item = mIndicatorLists.get(i);  
169.             item.resizeShape(2 * mIndicatorRadius, 2 * mIndicatorRadius);  
170.             //每个小原点的左上角Y位置  
171.             item.setY(yCoordinate - mIndicatorRadius);  
172.             //每个小圆点X开始位置  
173.             float x = startPosition + (mIndicatorMargin + mIndicatorRadius * 2) * i;  
174.             item.setX(x);  
175.         }  
176.     }  
177.   
178.     /** 
179.      * 获取总体小原点的开始位置 
180.      * 
181.      * @param containerWidth 
182.      * @return 
183.      */  
184.     private float startDrawPosition(int containerWidth) {  
185.         float tabItemsLength = mIndicatorLists.size() * (mIndicatorMargin + 2 * mIndicatorRadius) - mIndicatorMargin;  
186.         if (containerWidth < tabItemsLength) {  
187.             return 0;  
188.         }  
189.         //水平居中显示  
190.         return (containerWidth - tabItemsLength) / 2;  
191.   
192.     }  
193.   
194.     /** 
195.      * 放置滚动的小原点 
196.      * 
197.      * @param position 
198.      * @param positionOffset 
199.      */  
200.     private void layoutSelectIndicator(int position, float positionOffset) {  
201.         if (mSelectIndicator == null) {  
202.             return;  
203.         }  
204.         if (mIndicatorLists.size() == 0) {  
205.             return;  
206.         }  
207.         CircleShape item = mIndicatorLists.get(position);  
208.         mSelectIndicator.resizeShape(item.getWidth(), item.getHeight());  
209.         //设置滚动的小圆点的X位置偏移量  
210.         float x = item.getX() + (mIndicatorMargin + mIndicatorRadius * 2) * positionOffset;  
211.         mSelectIndicator.setX(x);  
212.         mSelectIndicator.setY(item.getY());  
213.     }  
214.   
215.     @Override  
216.     protected void onDraw(Canvas canvas) {  
217.         super.onDraw(canvas);  
218.         if (mIndicatorLists.size() == 0 || mSelectIndicator == null) {  
219.             return;  
220.         }  
221.         int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null,  
222.                 Canvas.MATRIX_SAVE_FLAG |  
223.                         Canvas.CLIP_SAVE_FLAG |  
224.                         Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |  
225.                         Canvas.FULL_COLOR_LAYER_SAVE_FLAG |  
226.                         Canvas.CLIP_TO_LAYER_SAVE_FLAG);  
227.         for (CircleShape item : mIndicatorLists) {  
228.             drawItem(canvas, item);  
229.         }  
230.         drawItem(canvas, mSelectIndicator);  
231.         canvas.restoreToCount(sc);  
232.     }  
233.   
234.     /** 
235.      * 绘制小圆点 
236.      * 
237.      * @param canvas 
238.      * @param indicator 
239.      */  
240.     private void drawItem(Canvas canvas, CircleShape indicator) {  
241.         canvas.save();  
242.         canvas.translate(indicator.getX(), indicator.getY());  
243.         indicator.getShape().draw(canvas);  
244.         canvas.restore();  
245.     }  
246.   
247. }  

上面代码的注释讲解的非常清楚了，大家可以学习下。下面给出源码demo，大家可以下载用到自己的工程中，非常的实用：

点击打开链接下载Demo