Android實現顏色選擇控制元件

• 一、實現效果
• 二、使用方式
• 三、設計目標
• 四、程式碼分析
• 1. 控制元件佈局結構
• 2. 定義`CircleColorButton`
• 3. 核心屬性
• 4. `onMeasure`保證為圓形
• 5. `setColor`使用`tint`進行著色
• 6. 透明與非透明的不同顯示

一、實現效果

演示APK

CircleColorButton.java

演示工程專案

二、使用方式

與任何一種型別的控制元件的使用方式完全相同。

• XML佈局檔案

    <club.andnext.widget.CircleColorButton
            android:id="@+id/iv_color"
            android:layout_width="12dp"
            android:layout_height="12dp"/>

三、設計目標

為神馬筆記的標籤提供顏色選擇功能，要求有選中標識。

四、程式碼分析

1. 控制元件佈局結構

組合2個ImageView實現CircleColorButton

<merge xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">

    <ImageView
            android:id="@+id/anc_iv_color"
            android:layout_width="match_parent"
 

            android:layout_height="match_parent"
            android:layout_gravity="center"/>

    <ImageView
            android:id="@+id/anc_iv_check"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/anc_ic_check_white_24dp"/>
</merge>

2. 定義CircleColorButton

繼承自FrameLayout，並實現了Checkable介面用於設定選中狀態。

public class CircleColorButton extends FrameLayout implements Checkable {
}

3. 核心屬性

    ImageView colorView;
    ImageView checkView;

    int replaceColor;   // color for transparent
    int color;

4. onMeasure保證為圓形

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = colorView.getMeasuredWidth();
    int height = colorView.getMeasuredHeight();
    if (width > 0 && height > 0 && width != height) {
        int size = (width > height)? height: width;
        width = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);
        height = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);

        colorView.measure(width, height);
    }
}

5. setColor使用tint進行著色

public void setColor(int color) {
    this.color = color;

    if (color == Color.TRANSPARENT) {

        int c = this.getReplaceColor();

        int resId = R.drawable.anc_ic_circle_color_stroke;
        colorView.setImageResource(resId);
        colorView.setImageTintList(ColorStateList.valueOf(c));

        checkView.setImageTintList(ColorStateList.valueOf(c));

    } else {

        int c = color;

        int resId = R.drawable.anc_ic_circle_color_solid;
        colorView.setImageResource(resId);
        colorView.setImageTintList(ColorStateList.valueOf(c));

        checkView.setImageTintList(null);
    }

}

6. 透明與非透明的不同顯示

• 透明色顯示為圓環形狀，填充色為透明，體現了透明色。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">

    <stroke android:color="#ffffff" android:width="1dp"/>

    <solid android:color="#00000000"/>

</shape>

• 非透明色顯示為圓形，填充色為顏色自身。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">

    <solid android:color="#ffffff"/>

</shape>