[Android]自定義控件入門示例

自定義控件的優勢

• 對顯示控件的完全控制權
• 使視圖層級結構平面化，減少視圖層級結構，提升程序性能

Demo

第一個自定義View是上圖下字

第二個自定義View是九宮格

自定義View步驟

測量(Measurement)

在控件被繪製之前，必須由父控件確定其規格。

• 所有的Views都會在View層級結構上從上到下被測量
• 父節點要求子節點更新規格時，字節點會調用onMeasure()方法
• 根據父節點提供的約束條件，子節點通過自行測量確定大小
• 最後調用setMeasureDimension()確定測量大小

下面給出一個絕大部分情況下可用的測量Demo

/**
 * 根據父控件提供的約束條件，測量控件的長寬
 *
 * @param measureSpec 約束條件
 * @param contentSize 期望大小
 * @return 實際大小
 */
public static int getMeasurement(int measureSpec, int contentSize) {
    int result = 0;
    //獲取約束條件
    int mode = View.MeasureSpec.getMode(measureSpec);
    //獲取約束大小
    int size = View.MeasureSpec.getSize(measureSpec);
    switch (mode) {
        case View.MeasureSpec.EXACTLY:
            //只能被約束
            result = size;
            break;
        case View.MeasureSpec.AT_MOST:
            //最大也不能比約束條件大
            result = Math.min(size, contentSize);
            break;
        case View.MeasureSpec.UNSPECIFIED:
            //返回期望大小
            result = contentSize;
            break;
    }
    return result;
}

  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //此處傳遞的參數就是父控件的約束條件，這裏的期望值可以自定義
        setMeasuredDimension(MeasureUtils.getMeasurement(widthMeasureSpec, getDesiredWidth()), MeasureUtils.getMeasurement(heightMeasureSpec, getDesiredHeight()));
    }

注意:當在xml聲明
android:layout_width="wrap_content" android:layout_height="wrap_content"
時，就需要提供自定義getDesiredWidth()和getDesiredHeight()方法求出期望寬高.

繪畫

@Override
protected void onDraw(Canvas canvas) {
    //此處傳入的canvas大小和位置是根據以上測量結果來決定的
}

自定義屬性

在res/value文件夾新建attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyImageView">
        <attr name="android:spacing"></attr>
        <attr name="android:textColor"></attr>
        <attr name="android:text"></attr>
        <attr name="android:textSize"></attr>
        <attr name="android:drawable"></attr>
    </declare-styleable>
</resources>

這裏使用Android系統預定義的值，在佈局文件中可以直接引用

<com.chensl.customview.view.MyImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:drawable="@drawable/abc_btn_rating_star_off_mtrl_alpha"
    android:textColor="@color/pink"
    android:text="@string/imageview_text"
    android:textSize="16sp"
    android:spacing="0dp" />

在構造函數中讀取到每個屬性

    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyImageView, 0, defStyleAttr);
    mSpace = a.getDimensionPixelSize(R.styleable.MyImageView_android_spacing, 0);
    mTextColor = a.getColor(R.styleable.MyImageView_android_textColor, 0);
    mText = a.getText(R.styleable.MyImageView_android_text);
    mTextSize = a.getDimensionPixelSize(R.styleable.MyImageView_android_textSize, 0);
    mDrawable = a.getDrawable(R.styleable.MyImageView_android_drawable);
    a.recycle();

自定義ViewGroup

測量

• 計算ViewGroup自身大小

• 通知子控件測量自身寬高

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  //獲取默認寬高，父控件分配的最大寬高
  int width = getDefaultSize(0, widthMeasureSpec);
  int height = getDefaultSize(0, heightMeasureSpec);
  //取寬高中的小值
  int majorSize = Math.min(width, height);
  int blockSize = majorSize / CHILD_COUNT;
  int blockSpec = MeasureSpec.makeMeasureSpec(blockSize, MeasureSpec.EXACTLY);
  //通知子控件測量自身寬高
  measureChildren(blockSpec, blockSpec);
  //測量自身寬高
  setMeasuredDimension(majorSize, majorSize);
  }

擺放控件

根據需求將擺放子控件，這裏是九宮格

   @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int row, col, left, top, count;
        count = getChildCount();
        int gridWidth = getWidth() / CHILD_COUNT;
        int gridHeight = getHeight() / CHILD_COUNT;
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            if (child != null) {
                row = i / CHILD_COUNT;
                col = i % CHILD_COUNT;
                left = gridWidth * col + child.getMeasuredWidth() / 2;
                top = gridHeight * row;
                child.layout(left, top, left + gridWidth, top + gridHeight);
            }
        }
    }

繪畫

在ViewGroup中繪畫有兩個方法

  @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        //在子視圖已經完成繪畫後調用，所以顯示在上方
        int lineHeight = getHeight() / CHILD_COUNT;
        int height = getHeight();
        for (int i = 0; i < height; i += lineHeight) {
            //畫橫線
            canvas.drawLine(0, i, getWidth(), i, mLinePaint);
        }
        int lineWidth = getWidth() / CHILD_COUNT;
        int width = getWidth();
        for (int i = 0; i < width; i += lineWidth) {
            //畫豎線
            canvas.drawLine(i, 0, i, getHeight(), mLinePaint);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //在子視圖完成之後，所以顯示在子視圖下方，適合畫動態背景等
        //記得初始化時setWillNotDraw(false);
    }

總結

自定義控件的優勢就不過多解釋了。

值得說的是，自定義控件只要考慮那些有可能出現的情況做適配即可。

像系統Relativelayout,LinearLayout這樣需要考慮全方位的的適配對於我們來說是太過於浪費時間。

而且，當可以繼承已有控件的前提下，就不要逞能繼承View或者ViewGroup。