实战 Android 自定义 View

Android Java 设计模式

---

基础知识

参考资料:《Expert Android》 + 《Android Programming Pushing》

View 的类层次

• View
• ViewParent (interface)
  
  • defines the protocol for any object that wants to play the role of a parent to other views.
• ViewGroup (extends View and implements ViewParent)
  
  • defines the protocol for a collection of child views.
  • plays a central role in placing the controls (views) at the right place.
  • also controls the background and animation of its child views.
• ViewRoot (aslo called ViewRootImplementation, implements ViewParent)
  
  • this class is important for understanding how drawing is done in Android.

View 的生命周期

Layout Phase : Measurement and Layout

目的 -> 获取 View 的大小和位置。该阶段包含两个子过程：onMeasure() + onLayout()

• public final void measure(int widthMeasureSpec, int heightMeasureSpec)
  
  • The derived views need to set their dimensions by calling setMeasuredDimension().
  • If the inherited custom view is a collection of other views, as in a ViewGroup, then you need to call measure() on child views in your onMeasure() method.
• public void layout(int left, int top, int right, int bottom)
• protected void onSizeChanged(int w, int h, int oldw, int oldh)
• protected void onLayout(boolean changed, int left, int top, int right, int bottom)

Drawing Phase : Mechanics of onDraw

• 需要在该方法实现的约定有 ：
  
  • Draw the background
  • Draw view's content by delegating to onDraw()
  • Draw children by delegating to dispatchDraw()
  • Draw decorations such as scroll bars

Measure 子过程剖析

• Android passes something called a mode bit to onMeasure() to give context to calculating the size of the view. This mode bit can be one of three: AT_MOST, UNSPECIFIED, and EXACT.

在 View 类中 onMeasure() 的默认实现

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(
        getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
        getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
public static int getDefaultSize(int size, int measureSpec) {
    int result = size;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);
    switch (specMode) {
    case MeasureSpec.UNSPECIFIED:
        result = size;
        break;
    case MeasureSpec.AT_MOST:
    case MeasureSpec.EXACTLY:
        result = specSize;
        break;
    }
    return result;
}

另一种自定义实现

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(
        getImprovedDefaultWidth(widthMeasureSpec),
        getImprovedDefaultHeight(heightMeasureSpec));
}
private int getImprovedDefaultHeight(int measureSpec) {
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize =  MeasureSpec.getSize(measureSpec);
    switch (specMode) {
    case MeasureSpec.UNSPECIFIED:
        return hGetMaximumHeight();
    case MeasureSpec.EXACTLY:
        return specSize;
    case MeasureSpec.AT_MOST:
        return hGetMinimumHeight();
    }
    // shouldn't come here
    Log.e(tag,"unknown specmode");
    return specSize;
}
protected int hGetMinimumHeight() {
    return this.getSuggestedMinimumHeight();
}

Draw 过程示例 ：onDraw()

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int w = this.getWidth();
    int h = this.getHeight();
    int t = this.getTop();
    int l = this.getLeft();
    int ox = w/2;
    int oy = h/2;
    int rad = Math.min(ox,oy)/2;
    canvas.drawCircle(ox, oy, rad, getBrush());
}

自定义属性

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:circleViewPkg="http://schemas.android.com/apk/res/com.androidbook.custom"
    .... 
<com.androidbook.custom.CircleView
    android:id="@+id/circle_view_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    circleViewPkg:strokeWidth="5"
    circleViewPkg:strokeColor="@android:color/holo_red_dark"
    />
</LinearLayout>
...
<resources>
<declare-styleable name="CircleView">
    <attr name="strokeWidth" format="integer"/>
    <attr name="strokeColor" format="color|reference" />
</declare-styleable>
</resources>
...

publicCircleView(Context context, AttributeSet attrs, int defStyle){
    super(context, attrs, defStyle);
    //Use the array constant to read the bag once
    TypedArray t = context.obtainStyledAttributes(attrs,
                     R.styleable.CircleView,
                     defStyle, 0);
    strokeColor = t.getColor(R.styleable.CircleView_strokeColor, strokeColor);
    strokeWidth = t.getInt(R.styleable.CircleView_strokeWidth, strokeWidth);
    //Recycle the typed array
    t.recycle();
    initCircleView();
}

案例研究

出处：https://github.com/daimajia/NumberProgressBar

实战

出处：https://github.com/mSoloYu/StyleNumberProgressBar
以桥接（Bridge）设计模式改造 NumberProgressbar 库文件；
在第 1 步基础上，实现更多 Progressbar 的定制；

项目库包结构

最终效果

示范

attrs.xml 的改变

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="NumberProgressBar">
        <attr name="progress" format="integer"/>
        <attr name="progress_unreached_color" format="color"/>
        <attr name="progress_reached_color" format="color"/>
        <attr name="progress_reached_bar_size" format="dimension"/>
        <attr name="progress_unreached_bar_size" format="dimension"/>
        <attr name="progress_text_size" format="dimension"/>
        <attr name="progress_text_color" format="color"/>
        <attr name="progress_text_offset" format="dimension"/>
        <attr name="progress_timeline" format="string" />
        <attr name="progress_text" format="string" />
        <attr name="progress_shape" format="enum">
            <enum name="horizontal_default" value="0" />
            <enum name="vertical_default" value="1" />
            <enum name="horizontal_timeline" value="2" />
            <enum name="vertical_timeline" value="3" />
            <enum name="pie_default" value="4" />
        </attr>
    </declare-styleable>
</resources>

View.java（AOSP）

• 定义抽象类的接口（如 onDraw() ）

StyleNumberProgressBar.java

• 扩充并实现 View 定义的接口
• 维护一个指向 TemplateTextProgressShape 类对象的引用

TemplateTextProgressShape.java

• 定义实现类的接口，该接口并不一定要与 View 的接口完全一致；事实上这两个接口可以完全不同。一般来讲，TemplateTextProgressShape 接口仅提供基本操作（真正的绘制 Progressbar 操作），而 View 则定义了基于这些基本操作的较高层次的操作。

TextHoriTimelineProgressBar.java
TextHorizontalProgressBar.java
TextVerticalProgressBar.java
TextPieProgressBar.java

• 实现 TemplateTextProgressShape 的接口并定义它的具体实现。