Android实现颜色选择控件 - Go语言中文社区

Android实现颜色选择控件


一、实现效果

Android实现颜色选择控件

演示APK

CircleColorButton.java

演示工程项目

二、使用方式

与任何一种类型的控件的使用方式完全相同。

  • XML布局文件
    <club.andnext.widget.CircleColorButton
            android:id="@+id/iv_color"
            android:layout_width="12dp"
            android:layout_height="12dp"/>

三、设计目标

神马笔记的标签提供颜色选择功能,要求有选中标识。

四、代码分析

1. 控件布局结构

组合2个ImageView实现CircleColorButtonanc_iv_color显示圆形颜色,and_iv_check显示选中标识。

<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>

在这里插入图片描述

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/chuyangchangxi/article/details/83788964
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢