Android開發之自定義View（一）

YungFan發表於2017-12-13
AndroidView

Android常見的自定義控制元件有三種方式：

  • 繼承View
  • 繼承原有的控制元件，在原有控制元件的基礎上進行修改
  • 重新拼裝組合

今天先來簡單說一說第一種也是最複雜的一種~~ 剩下的下次再說~~

繼承View，重寫onDraw方法，但是注意採用這種方式需要自己在程式碼中來支援熟悉的wrap_content、padding屬性。

1、想好需要自定義的屬性，在values下建立一個attrs.xml，這裡我就演示一個簡單的顏色，自定義一個屬性集合，命名為CustomView，有一個格式為color的屬性custom_color

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomView">
        <attr name="custom_color" format="color"></attr>
    </declare-styleable>
</resources>

複製程式碼

2、自定義View

public class CustomView extends View {

    private Paint mPaint = new Paint();// 建立一個畫筆;
    private int mColor = Color.RED; //預設為紅色

    public CustomView(Context context) {
        super(context);
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //載入自定義屬性集合CustomView
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
        //解析CustomView中自定義的屬性custom_color，id為R.styleable.CustomView_custom_color，如果沒有就預設為紅色
        mColor = a.getColor(R.styleable.CustomView_custom_color, Color.RED);
        //釋放資源，方便下次使用
        a.recycle();

        //初始化畫筆的引數
        mPaint.setColor(mColor);// 設定畫筆顏色
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100, 100, 50, mPaint);// 用畫筆在畫布上新增一個圓
    }
}
複製程式碼

3、佈局中使用，注意這裡使用的時候一定要用全類名，要想用自定義屬性，必須在佈局中加入如下程式碼，這樣自定義屬性就可以用app打頭:

xmlns:app="http://schemas.android.com/apk/res-auto"
複製程式碼

設定寬高為match_parent，並設定了背景色和自定顏色

<com.example.administrator.diyview.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#123456"
        app:custom_color="#000000" />
複製程式碼

4、執行效果圖

自定義View1.png
顯示的是一個青色的背景和一個黑色的圓

5、注意：
這種方式無論怎麼設定padding的值或者更改寬和高為wrap_content，執行效果都如上，原因就如開頭所說，需要自己處理，那麼如何處理呢？

（1） 處理padding 在android:layout_width 和 android:layout_height 都為 match_parent 時，我們考慮一下左邊和上邊的padding

<com.example.administrator.diyview.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#123456"
        android:paddingLeft="100dp"
        android:paddingTop="100dp"
        app:custom_color="#000000" />
複製程式碼

在onDraw()方法中設定padding

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        canvas.drawCircle(paddingLeft + 100, paddingTop + 100, 50, mPaint);
    }
複製程式碼

執行效果：

自定義View2.png
（2）處理wrap_content 為什麼要單獨處理wrap_content呢？這和View的工作原理有關，View經過measure、layout和draw顯示出來，其中measure時需要用到MeasureSpec的變數（包含SpecMode和SpecSize），其中SpecSize指定了特定測試模式下的大小，SpecMode指定了測量的模式，分為三類：

  • UNSPECIFIED 父容器對View無任何限制，一般用於系統內部
  • EXACTLY View的最終大小就是SpecSize指定的值，適用於指定具體大小和match_parent的形式
  • AT_MOST 父容器指定了一個SpecSize，View不能超過它，適用於wrap_content

當使用wrap_content時，SpecSize其實就是父容器中可用空間的大小，即View的寬和高等於父容器當前剩餘的當前剩餘空間大小，和使用match_parent一樣，那麼怎麼處理？也很簡單，只要重寫onMeasure方法，在AT_MOST模式時，設定一個具體的寬高即可：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //獲取寬和高的SpecMode和SpecSize
        int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        //分別判斷寬高是否設定為wrap_content
        if (wSpecMode == MeasureSpec.AT_MOST && hSpecMode == MeasureSpec.AT_MOST) {
            //寬高都為wrap_content,直接指定為400
            setMeasuredDimension(400, 400);

        } else if (wSpecMode == MeasureSpec.AT_MOST) {
            //只有寬為wrap_content,寬直接指定為400，高為獲取的SpecSize
            setMeasuredDimension(400, hSpecSize);

        } else if (hSpecMode == MeasureSpec.AT_MOST) {
            //只有高為wrap_content,高直接指定為400，寬為獲取的SpecSize
            setMeasuredDimension(wSpecSize, 400);

        }
    }
複製程式碼

此時佈局如下：

<com.example.administrator.diyview.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#123456"
        android:paddingLeft="50dp"
        android:paddingTop="50dp"
        app:custom_color="#000000" />
複製程式碼

執行效果：

自定義View3.png

相關文章