自定义带数字选择的checkBox，竟然可以如此的简单

最新推荐文章于 2022-09-29 15:13:36 发布
最新推荐文章于 2022-09-29 15:13:36 发布
阅读量1.9k 收藏 4
点赞数 4
分类专栏： Android 文章标签： checkbox android 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cool_fuwei/article/details/52700133
版权

最近一直在做即时通讯，当然少不了发图片了， 既然要发图片，我连忙打开qq，看看qq发图片是个什么效果，看起来确实不错，我就照着qq仿写了一个，其中选择图片时，图片的右上角有一个标记选了多少张图片的数字，我一时兴起就想自定义一个view来实现这种效果，虽然可以通过定义一个selector然后定义shape给textView去设置这个背景来实现，后面会提及一下，但是这种效果我想通过自定义控件来实现，先看一张效果图。



第一种方式：通过selector的方式：photo_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true">
        <shape android:shape="oval">
            <stroke android:color="#FFFFFF" android:width="1dp"/>
            <solid android:color="@color/title_bg"/>
        </shape>
    </item>

    <item android:state_enabled="false">
        <shape android:shape="oval">
            <stroke android:color="@color/white" android:width="1dp"/>
            <solid android:color="@color/half_trans_bg"/>
        </shape>
    </item>
</selector>

在布局文件中的textView 

    <TextView
        android:id="@+id/tv_point"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:textColor="#FFFFFF"
        android:gravity="center"
        android:clickable="true"
        android:text="1"
        android:background="@drawable/photo_selector"/>

然后在Activity测试代码 

tv = (TextView) findViewById(R.id.tv_point);
    public void click1(View v) {
        tv.setEnabled(true);
        tv.setText("4");
    }
    public void click2(View v) {
        tv.setEnabled(false);
        tv.setText("");
    }
然后是两个按钮，点击一个让其选中，还有一个让其不选中，到这里基本效果是实现了，当给设置监听事件时，发现当按下就不能再按下了，如果我想点击自身TextView也能实现选择和不选，貌似这种方式就不好使了 

        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (tv.isEnabled()) {
                    tv.setEnabled(false);
                }else {
                    tv.setEnabled(true);
                }
            }
        });


第二种方式：自定义View

效果图如下：


①自定义属性：

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NumberSelectView);
        mBackgroundColorNormal = typedArray.getColor(R.styleable.NumberSelectView_backgroundColorNormal, Color.parseColor("#33000000"));
        mBackgroundColorSelect = typedArray.getColor(R.styleable.NumberSelectView_getBackgroundColorSelect, Color.parseColor("#ff5f62"));
        mTextColor = typedArray.getColor(R.styleable.NumberSelectView_textColor, Color.parseColor("#FFFFFF"));
        mStrokeColor = typedArray.getColor(R.styleable.NumberSelectView_strokeColor, Color.parseColor("#66FFFFFF"));
        mStrokeWidth = typedArray.getDimension(R.styleable.NumberSelectView_strokeWidth, UIUtils.dp2px(context, 2.0f));
        mSolidRadius = typedArray.getDimension(R.styleable.NumberSelectView_solidRadius, UIUtils.dp2px(context, 15.0f));
        mTextSize = typedArray.getDimension(R.styleable.NumberSelectView_textSize, UIUtils.sp2px(context, 14.0f));
        text = typedArray.getString(R.styleable.NumberSelectView_text);
        typedArray.recycle();//回收很重要

attr.xml

<span style="white-space:pre">	</span><?xml version="1.0" encoding="utf-8"?>
<span style="white-space:pre">	</span><resources>
    <span style="white-space:pre">	</span><declare-styleable name="NumberSelectView">
       <span style="white-space:pre">	</span> <attr name="backgroundColorNormal" format="color" />
        <attr name="getBackgroundColorSelect" format="color" />
        <attr name="strokeColor" format="color" />
        <attr name="textColor" format="color" />
        <attr name="strokeWidth" format="dimension" />
        <attr name="solidRadius" format="dimension" />
        <attr name="textSize" format="dimension" />
        <attr name="text" format="string"/>
    <span style="white-space:pre">	</span></declare-styleable>
<span style="white-space:pre">	</span></resources>

②重新onMeasure方法

<span style="white-space:pre">	</span>@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int exceptWidth = (int) ((mSolidRadius + mStrokeWidth) * 2) + getPaddingLeft() + getPaddingRight();
        int exceptHight = (int) ((mSolidRadius + mStrokeWidth) * 2) + getPaddingTop() + getPaddingBottom();
        widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth, MeasureSpec.EXACTLY);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHight,MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
③重写onDraw方法 

    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);//画实心圆
        drawRing(canvas);//画圆环
        drawText(canvas);//画文本
    }

（1）drawCircle方法

    private void drawCircle(Canvas canvas) {
        if (!isSelected) {
            canvas.drawCircle(mCenterX, mCenterY, mSolidRadius, mSolidPaint);
        } else {
            mSolidPaint.setColor(mBackgroundColorSelect);
            canvas.drawCircle(mCenterX, mCenterY, mSolidRadius, mSolidPaint);
            mSolidPaint.setColor(mBackgroundColorNormal);
        }

    }

（2）drawRing方法

    private void drawRing(Canvas canvas) {
        RectF rectF = new RectF();
        rectF.top = mCenterY - mRingRadius;
        rectF.bottom = mCenterY + mRingRadius;
        rectF.left = mCenterX - mRingRadius;
        rectF.right = mCenterX + mRingRadius;
        canvas.drawArc(rectF, 0, 360, false, mStrokePaint);
    }
（3 ）drawText方法 

    private void drawText(Canvas canvas) {
        Rect bounds = new Rect();
        mTextPaint.getTextBounds(text, 0, text.length(), bounds);
        float x = (getMeasuredWidth() - bounds.width()) / 2;
        float y = (getMeasuredHeight() + bounds.height()) /2;
        if (isSelected) {
            canvas.drawText(text, x, y, mTextPaint);
        } else {
            canvas.drawText("", x, y, mTextPaint);
        }
    }

初始化方法

    /**
     * 初始化操作
     */
    private void init() {
        if(TextUtils.isEmpty(text)){
            text = "1";
        }

        mRingRadius = mSolidRadius + mStrokeWidth / 2;
        setClickable(true);
        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(listener != null){
                    listener.onClick(isSelected);
                }
                toggle();
            }
        });

        mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mStrokePaint.setColor(mStrokeColor);
        mStrokePaint.setStyle(Paint.Style.STROKE);
        mStrokePaint.setStrokeWidth(mStrokeWidth);

        mSolidPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mSolidPaint.setColor(mBackgroundColorNormal);
        mSolidPaint.setStyle(Paint.Style.FILL);

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextSize(mTextSize);
    }

完整的类NumberSelectView如下： 

package com.cool.numberselectview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by cool on 2016/9/27.
 */

public class NumberSelectView extends View {

    private int mBackgroundColorNormal;
    private int mBackgroundColorSelect;
    private int mTextColor;
    private int mStrokeColor;
    private float mStrokeWidth;
    private float mSolidRadius;//实心圆半径
    private float mRingRadius;//圆环半径
    private float mTextSize;

    private int mCenterX;//圆心x坐标
    private int mCenterY;//圆心y坐标

    private Paint mStrokePaint;//圆环画笔
    private Paint mSolidPaint;//背景填充画笔
    private Paint mTextPaint;//文字画笔

    private String text;//要画的数字
    private boolean isSelected;//是否已经被选上

    private OnOnStateChangeListener listener;

    public void setOnStateChangeListener(OnOnStateChangeListener listener) {
        this.listener = listener;
    }

    public interface OnOnStateChangeListener {
        void onClick(boolean isSelected);
    }



    public NumberSelectView(Context context) {
        this(context, null);
    }

    public NumberSelectView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NumberSelectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NumberSelectView);
        mBackgroundColorNormal = typedArray.getColor(R.styleable.NumberSelectView_backgroundColorNormal, Color.parseColor("#33000000"));
        mBackgroundColorSelect = typedArray.getColor(R.styleable.NumberSelectView_getBackgroundColorSelect, Color.parseColor("#ff5f62"));
        mTextColor = typedArray.getColor(R.styleable.NumberSelectView_textColor, Color.parseColor("#FFFFFF"));
        mStrokeColor = typedArray.getColor(R.styleable.NumberSelectView_strokeColor, Color.parseColor("#66FFFFFF"));
        mStrokeWidth = typedArray.getDimension(R.styleable.NumberSelectView_strokeWidth, UIUtils.dp2px(context, 2.0f));
        mSolidRadius = typedArray.getDimension(R.styleable.NumberSelectView_solidRadius, UIUtils.dp2px(context, 15.0f));
        mTextSize = typedArray.getDimension(R.styleable.NumberSelectView_textSize, UIUtils.sp2px(context, 14.0f));
        text = typedArray.getString(R.styleable.NumberSelectView_text);
        typedArray.recycle();//回收很重要
        init();
    }

    /**
     * 初始化操作
     */
    private void init() {
        if(TextUtils.isEmpty(text)){
            text = "1";
        }

        mRingRadius = mSolidRadius + mStrokeWidth / 2;
        setClickable(true);
        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(listener != null){
                    listener.onClick(isSelected);
                }
                toggle();
            }
        });

        mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mStrokePaint.setColor(mStrokeColor);
        mStrokePaint.setStyle(Paint.Style.STROKE);
        mStrokePaint.setStrokeWidth(mStrokeWidth);

        mSolidPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mSolidPaint.setColor(mBackgroundColorNormal);
        mSolidPaint.setStyle(Paint.Style.FILL);

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextSize(mTextSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);//画实心圆
        drawRing(canvas);//画圆环
        drawText(canvas);//画文本
    }

    private void drawText(Canvas canvas) {
        Rect bounds = new Rect();
        mTextPaint.getTextBounds(text, 0, text.length(), bounds);
        float x = (getMeasuredWidth() - bounds.width()) / 2;
        float y = (getMeasuredHeight() + bounds.height()) /2;
        if (isSelected) {
            canvas.drawText(text, x, y, mTextPaint);
        } else {
            canvas.drawText("", x, y, mTextPaint);
        }
    }

    private void drawRing(Canvas canvas) {
        RectF rectF = new RectF();
        rectF.top = mCenterY - mRingRadius;
        rectF.bottom = mCenterY + mRingRadius;
        rectF.left = mCenterX - mRingRadius;
        rectF.right = mCenterX + mRingRadius;
        canvas.drawArc(rectF, 0, 360, false, mStrokePaint);
    }

    private void drawCircle(Canvas canvas) {
        if (!isSelected) {
            canvas.drawCircle(mCenterX, mCenterY, mSolidRadius, mSolidPaint);
        } else {
            mSolidPaint.setColor(mBackgroundColorSelect);
            canvas.drawCircle(mCenterX, mCenterY, mSolidRadius, mSolidPaint);
            mSolidPaint.setColor(mBackgroundColorNormal);
        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int exceptWidth = (int) ((mSolidRadius + mStrokeWidth) * 2) + getPaddingLeft() + getPaddingRight();
        int exceptHight = (int) ((mSolidRadius + mStrokeWidth) * 2) + getPaddingTop() + getPaddingBottom();
        widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth, MeasureSpec.EXACTLY);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHight,MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mCenterX = w / 2;//获取圆心x坐标
        mCenterY = h / 2;//获取圆心y坐标
    }

    private void toggle() {
        isSelected = !isSelected;
        invalidate();
    }

    public void setViewText(String text,boolean isViewClick) {
        this.text = text;
        if(!isViewClick){
            if (TextUtils.isEmpty(text)) {
                isSelected = false;
            } else {
                isSelected = true;
            }
        }

        invalidate();
    }
    public String getViewText(){
        return text;
    }
    public boolean isViewSelected() {
        return isSelected;
    }
}



源码下载链接： https://github.com/coolfuwei/NumberSelectView


cool丶
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
将checkbox选中的值生成数字（字符串）
he3236220的博客
11-04 2746
function pic_num() { var pic_num = $("input[type='checkbox']:checked").length; var areaId=$("input[type='checkbox']:checked"); // var noList = "";字符串形式 var check_val = [];数组形式 $(areaId).each(func
解决checkbox设置数字无法展示的错误
最新发布
简单点的博客
10-27 137
解决checkbox设置数字无法展示的错误
WPF 控件专题 CheckBox 控件详解
^@^lemon tea^@^
07-22 1万+
WPF 控件专题 CheckBox 控件详解
android textview时实显示checkbox选中的内容
androidxiaogang的博客
09-26 6500
在项目需求中可能遇到这种情况，要求textview时实显示checkbox选中的内容。首先看效果图主要讲解两个知识点。1.listview点击checkbox选中: 首先checkbox设置： android:focusable="false" android:clickable="false" 然后在代码是用一个map作记录，初始化所有选中为 false,在点击
el-checkbox 设置传值是数字并非true和false
weixin_58442608的博客
09-29 1232
2.:false-label="'0'" 未选中时值为 0。1.:true-label="'1'" 选中时值为 1。
Android开发之自定义CheckBox
09-01
首先，从描述中我们可以知道，我们要创建一个自定义的CheckBox，它可能具有特殊的视觉效果或交互方式。通常，CheckBox是通过继承`CompoundButton`来实现的，因为`CompoundButton`已经实现了`Checkable`接口，提供了...
WPF 自定义CheckBox样式
06-25
CheckBox是WPF中的一个标准控件，用于提供用户可以选择或取消选择的选项。它的默认样式可以通过模板进行更改，以适应各种设计需求。在XAML中，我们可以定义ControlTemplate来改变CheckBox的外观，包括背景、边框、...
C# WinForm 自定义CheckBox
04-01
5. **使用自定义CheckBox**: 在其他WinForms窗体中，我们可以像使用普通CheckBox一样添加并使用这个自定义控件。只需在工具箱中右键点击，选择"添加项"，然后找到我们刚刚创建的CheckBoxEx控件。 通过以上步骤，...
自定义购物车二级checkbox 全选、单个选择
03-16
自定义购物车二级checkbox全选与单个选择的实现，是提高用户体验和交互性的重要技术点。在这个场景中，通常会有一个顶层的全选checkbox，以及一系列代表商品的子checkbox，用户可以对单个商品进行选择，或者通过全选...
Android中自定义Checkbox组件实例
09-03
首先，自定义Checkbox的基本思路是利用Android的Drawable资源，特别是StateListDrawable（选择器），它可以根据组件的状态（如被选中或未选中）显示不同的图片。在这个例子中，你需要准备两张图片，一张表示选中状态...
MFC check box 自绘
04-29
MFC check box 自绘，适合学习 自绘控件，you can learn and modify
checkbox通过数字来判断哪个被选择了
02-12
很多时间，我们通过checkbox可以生成数字数据，比如chk1为1，chk2为2,chk3为4，chk4为8,chk5为16,则所选数据加起来是知道数字，但逆推就不好推了，比如15，可以通过计算得到chk1~chk4全被选择了，我说的就是这种方法。
自定义CheckBox样式
09-20
如何自定义CheckBox的样式 1：首先在布局文件中添加CheckBox的控件配置，如： <CheckBox android:id="@+id/button1" style="@style/CheckBoxStyles"//这里就是用户可以自定CheckBox的样式 android:layout_width...
Html中使用自定义图片来实现checkbox显示的方法
09-28
在这个标签内，我们可以放置一张图片，作为自定义的复选框显示。例如： ```html <img class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();"> ``` 这里，我们使用`...
jQuery实现自定义checkbox和radio样式
10-23
jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术，它可以帮助开发者摆脱浏览器默认样式，创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。 首先，我们要理解...
Android自定义CheckBox CheckGroup超好用
刘敬兴的博客
08-13 1万+
在MaterialDialog 仿Android 5.0原生的AlertDialog样式的对话框一文中以及详细介绍了单选/多选对话框的用法，但是在现实开发中，我们可能需要在Activity上进行单选多选操作，于是就在MaterialDialog库中进行了再次封装，其中CheckBox和CheckGroup这两个类是这次封装的结果，接下来将详细介绍这两个类的用法。首先，先看效果图：先看下布局文件<?x
android CheckBox控件的简单使用方法
热门推荐
yuanjl
10-29 3万+
 研究了一下CheckBox选择按钮，下面就以喜欢颜色为素材，做个记录，使用TableRow实现的；     1.布局activity_layout.xml： ​ &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;TableLayout xmlns:android="http://schemas.android.com/apk/res/an...
Android-CheckBox 实现计算器
weixin_30906425的博客
06-18 111
源码下载地址：http://download.csdn.net/detail/wu20093346/7718055 使用CheckBox的OnCheckedChangeListener做事件触发，效果图： list=new OnKeyListener() { @Override public boolean onKey(View v, int keyC...
WPF 扩展TreeView 自定义图标和可隐藏checkbox
05-24
要扩展 WPF TreeView 控件以自定义图标和可隐藏复选框，你可以通过继承 TreeView 类来实现自定义控件。 以下是一个自定义 TreeView 控件的示例代码： ```csharp public class CustomTreeView : TreeView { public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(CustomTreeView)); public ImageSource Icon { get { return (ImageSource)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } protected override DependencyObject GetContainerForItemOverride() { return new CustomTreeViewItem(); } protected override bool IsItemItsOwnContainerOverride(object item) { return item is CustomTreeViewItem; } } public class CustomTreeViewItem : TreeViewItem { public static readonly DependencyProperty ShowCheckBoxProperty = DependencyProperty.Register("ShowCheckBox", typeof(bool), typeof(CustomTreeViewItem), new PropertyMetadata(true)); public bool ShowCheckBox { get { return (bool)GetValue(ShowCheckBoxProperty); } set { SetValue(ShowCheckBoxProperty, value); } } public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(CustomTreeViewItem)); public ImageSource Icon { get { return (ImageSource)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } public override void OnApplyTemplate() { base.OnApplyTemplate(); var checkBox = GetTemplateChild("PART_CheckBox") as CheckBox; if (checkBox != null) { checkBox.Visibility = ShowCheckBox ? Visibility.Visible : Visibility.Collapsed; } var icon = GetTemplateChild("PART_Icon") as Image; if (icon != null) { icon.Source = Icon; icon.Visibility = Icon != null ? Visibility.Visible : Visibility.Collapsed; } } } ``` 在上面的代码中，自定义 TreeView 控件包含一个 Icon 属性，该属性可以设置 TreeView 的图标。自定义 TreeViewItem 控件包含一个 ShowCheckBox 属性，该属性可以控制复选框是否可见，以及一个 Icon 属性，该属性可以设置 TreeViewItem 的图标。在 OnApplyTemplate 方法中，我们可以获取 CheckBox 和 Image 控件并设置它们的可见性和图标源。 在 XAML 中使用自定义 TreeView 控件可以像这样： ```xml <local:CustomTreeView> <local:CustomTreeViewItem Header="Item 1" Icon="/Images/Icon1.png"> <local:CustomTreeViewItem Header="Subitem 1.1" Icon="/Images/Icon2.png"/> <local:CustomTreeViewItem Header="Subitem 1.2" Icon="/Images/Icon3.png"/> </local:CustomTreeViewItem> <local:CustomTreeViewItem Header="Item 2" Icon="/Images/Icon4.png"> <local:CustomTreeViewItem Header="Subitem 2.1" Icon="/Images/Icon5.png"/> <local:CustomTreeViewItem Header="Subitem 2.2" Icon="/Images/Icon6.png"/> </local:CustomTreeViewItem> </local:CustomTreeView> ``` 在上面的 XAML 代码中，我们可以使用 Icon 属性来设置 TreeView 和 TreeViewItem 的图标，并使用 ShowCheckBox 属性来控制 TreeViewItem 的复选框是否可见。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值