Android 滑动效果高级篇（八）—— 自定义控件(1)

自定义控件，较常用View、ViewGroup、Scroller三个类，其继承关系如下：

本示例自定义控件，实现一个Gallery效果，并添加了一个显示View个数和位置的bar条，效果图：

自定义控件，包含通过继承实现的自定义控件和自定义控件属性两部分，即控件和属性

1、自定义属性

自定义属性，分为定义属性、解析属性、设置属性三部分，具体步骤：

首先，在res/valus/attrs.xml属性资源文件中，定义控件属性

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="com.myapps.widget.Pager">  
4.         <attr name="pageWidth" format="dimension" />  
5.     </declare-styleable>  
6.       
7.     <declare-styleable name="com.myapps.widget.PagerBar">  
8.         <attr name="barColor" format="color" />  
9.         <attr name="highlightColor" format="color" />  
10.         <attr name="fadeDelay" format="integer" />  
11.         <attr name="fadeDuration" format="integer" />  
12.         <attr name="roundRectRadius" format="dimension" />  
13.     </declare-styleable>  
14. </resources>  

然后，在自定义控件的代码中，解析自定义的属性，如在PagerBar.java：

[java] view plain copy print ?

1. // 自定义属性  
2.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_PagerBar);  
3.         int barBackColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_barColor, DEFAULT_BAR_BACKCOLOR);              // bar背景色  
4.         int barForeColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_highlightColor, DEFAULT_BAR_FORECOLOR);    // bar前景色  
5.         fadeDelay = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDelay, DEFAULT_FADE_DELAY);             // bar消失延迟时间  
6.         fadeDuration = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDuration, DEFAULT_FADE_DURATION);    // bar消失动画时间  
7.         ovalRadius = a.getDimension(R.styleable.com_myapps_widget_PagerBar_roundRectRadius, 2f);  
8.         a.recycle();  

最后，在布局文件中设置属性，如在main.xml

[html] view plain copy print ?

1. <com.homer.mycontrol.PagerBar  
2.     android:id="@+id/control"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="4dip"  
5.     android:layout_margin="8dip"  
6.     myapps:roundRectRadius="2dip" />  <!-- 自定义圆角 -->  

 

其中，在布局中间main.xml中，需要注意：

xmlns:myapps="http://schemas.android.com/apk/res/com.homer.mycontrol"

定义属性时，在declare-styleable的name中，需要包含com.myapps.widget.PagerBar，表示自定义的控件PageBar是widget子类，myapps是xmlns解析标记

解析属性时，在TypedArray中，需要包含R.styleable.com_myapps_widget_PagerBar，横线替换了圆点.

定义属性时，在com.homer.mycontrol.PagerBar中，需要包含myapps:roundRectRadius="2dip"，加上myapps解析标记

2、自定义控件PagerBar

自定义PagerBar，在图片下方用来显示图片滑到了第几页，即上面效果图（图2、图3）中的下部银白色细条，具体实现：

[java] view plain copy print ?

1. public PagerBar(Context context, AttributeSet attrs, int defStyle) {  
2.     super(context, attrs, defStyle);  
3.   
4.     // 自定义属性  
5.     TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_PagerBar);  
6.     int barBackColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_barColor, DEFAULT_BAR_BACKCOLOR);              // bar背景色  
7.     int barForeColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_highlightColor, DEFAULT_BAR_FORECOLOR);    // bar前景色  
8.     fadeDelay = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDelay, DEFAULT_FADE_DELAY);             // bar消失延迟时间  
9.     fadeDuration = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDuration, DEFAULT_FADE_DURATION);    // bar消失动画时间  
10.     ovalRadius = a.getDimension(R.styleable.com_myapps_widget_PagerBar_roundRectRadius, 2f);  
11.     a.recycle();  
12.   
13.     barBackPaint = new Paint();  
14.     barBackPaint.setColor(barBackColor);  
15.   
16.     barForePaint = new Paint();  
17.     barForePaint.setColor(barForeColor);  
18.   
19.     fadeOutAnimation = new AlphaAnimation(1f, 0f);  
20.     fadeOutAnimation.setDuration(fadeDuration);  
21.     fadeOutAnimation.setRepeatCount(0);  
22.     fadeOutAnimation.setInterpolator(new LinearInterpolator());  
23.     fadeOutAnimation.setFillEnabled(true);  
24.     fadeOutAnimation.setFillAfter(true);  
25. }  
26.   
27. public int getNumPages() {  
28.     return numPages;  
29. }  
30.   
31. public void setNumPages(int numPages) {  
32.     if (numPages <= 0) {  
33.         throw new IllegalArgumentException("numPages must be positive");  
34.     }  
35.     this.numPages = numPages;  
36.     invalidate();       // 重绘View  
37.     fadeOut();          // 设置bar消失效果  
38. }  
39.   
40. /** bar消失动画 */  
41. private void fadeOut() {  
42.     if (fadeDuration > 0) {  
43.         clearAnimation();  
44.         fadeOutAnimation.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay); //延迟fadeDelay后动画开始  
45.         setAnimation(fadeOutAnimation);  
46.     }  
47. }  
48.   
49. /**  @return  0 to numPages-1 */  
50. public int getCurrentPage() {  
51.     return currentPage;  
52. }  
53.   
54. /** @param currentPage  0 to numPages-1  */  
55. public void setCurrentPage(int currentPage) {  
56.     if (currentPage < 0 || currentPage >= numPages) {  
57.         throw new IllegalArgumentException("currentPage parameter out of bounds");  
58.     }  
59.     if (this.currentPage != currentPage) {  
60.         this.currentPage = currentPage;  
61.         this.position = currentPage * getPageWidth();   // bar前景色滑动条的起始位置（像素值）  
62.         invalidate();  
63.         fadeOut();  
64.     }  
65. }  
66.   
67. /** 获取View的宽度，即bar的宽度 */  
68. public int getPageWidth() {  
69.     return getWidth() / numPages;   // getWidth()是PagerBar的宽度（减去了margin左右距离后）  
70. }  
71.   
72. /**  @param position     can be -pageWidth to pageWidth*(numPages+1)  */  
73. public void setPosition(int position) {  
74.     if (this.position != position) {  
75.         this.position = position;  
76.         invalidate();  
77.         fadeOut();  
78.     }  
79. }  
80.   
81. @Override  
82. protected void onDraw(Canvas canvas) {  
83.     canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), ovalRadius, ovalRadius, barBackPaint);   // 绘制bar背景  
84.     canvas.drawRoundRect(new RectF(position, 0, position + (getWidth() / numPages), getHeight()), ovalRadius, ovalRadius, barForePaint);    // 绘制bar前景  
85. }