底部带有Indicator的RadioButton，自定义View -- UnderLineRadioBtn的实现

最新推荐文章于 2022-08-30 11:19:14 发布

_WJerry

最新推荐文章于 2022-08-30 11:19:14 发布

阅读量719

点赞数 1

分类专栏： Android 文章标签：自定义view radiobutton indicator android UnderLineRadioButton

本文链接：https://blog.csdn.net/sunnyjerry/article/details/85285788

版权

Android 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

github项目地址：https://github.com/Jerry930326/UnderLineRadioBtn

前言：该项目实现效果为RadioButton仿照TabLayout底部的Indicator下划线，可通过自定义属性和暴露的方法进行：1、文字默认/选中颜色设置；2、下划线默认/选中颜色设置；3、下划线的宽、高；4、下划线的圆角。实现该效果我先使用了layer-list方式，之后自己自定义View写了一个，于是有了这篇文章。该项目适用于不想导入其他过大的开源项目(该项目只有一个类)，而系统自带的TabLayout可配置性有限。写这篇文章的时候该项目为1.0.2版本，可留言或自行修改添加其他功能。

实现方式1：layer-list
该方式是通过background属性指定一个drawable文件，文件内部指定下划线距离上下左右的距离，类似于绝对定位，所以还需要实现知道设置该属性的view的宽高，所以不能动态根据宽高自适应，而且文字的默认/选中颜色还需要另外设置，代码如下：
布局文件：

<RadioButton
	android:layout_width="120dp"
	android:layout_height="105dp"
	android:layout_marginEnd="@dimen/x100"
	android:button="@drawable/chart_pie_radiobtn"
	android:textColor="@color/text_color_selector"
	android:background="@drawable/radiobutton_under_line"
	android:text="RadioButton"/>

radiobutton_under_line.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:top="100dp" android:left="30dp" android:right="30dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/red"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:drawable="@color/transparent"/>
</selector>

这样写下划线的高度为5dp，宽度为60dp且居中，也可以通过节点下添加节点添加圆角，文字的颜色通过textColor属性指定selector文件实现根据选中状态更改颜色。可以感觉到这样的方式太过于繁琐，且不好扩展，所以可以采用自定义View方式实现。

实现方式2：继承AppCompatRadioButton自定义View
实现之前先理一下思路，我们需要实现效果需要以下几个步骤：

对外暴露自定义属性和方法，方便使用。
所以我们要定义属性如下：线的宽高、默认/选中颜色、圆角，文字的默认/选中颜色，然后在构造方法中去获取我们自定义的属性，同时我们还要设置他们的默认值，即外部没有设置这些属性时的值。
测量 onMeasure
自定义View分为直接继承View/ViewGroup和继承系统自带的View，其中直接继承View/ViewGroup时需要我们在onMeasure中处理测量模式为wrap_content的情况(这个结论请参照《Android开发艺术探索》自定义View章节)，而继承系统自带的View/ViewGroup，由于系统自带的View/ViewGroup已经帮我们处理好了，我们只需要关注我们自己的逻辑即可。
在这个方法中我们需要处理的事情有：1、获取控件未添加下划线前的宽高；2、判断用户是否设置的下划线的高度，如果没有设置，就不做任何操作(包括绘制)；3、如果设置了高度，我们就要将下划线的高度与控件本身的高度相加，也就是说这个自定义View会比你设置的控件本身高度多出一个下划线的高度，既不占用padding也不占用margin，宽度我们在onDraw中处理。
注意：这里我们还要处理在控件没有设置Drawable时需要添加一个下划线与内容之间的空隙，因为如果没有设置Drawable时内容与下划线会紧贴在一起(Drawable在RadioButton中是默认的，也就是左边的按钮，这里处理的就是button="@null"的情况)。
onMeasure代码：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //触发原有的测量过程
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();

        if (mLineHeight > 0) {
            // 下划线的高度合并进控件高度
            mHeight += mLineHeight;
            //这里还要判断是否有按钮，没有按钮的时候线会和文字紧紧贴在一起，不美观
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (getButtonDrawable() == null) {
                    mSpaceHeight = 20f;
                }
            }
            mHeight += mSpaceHeight;
        }
        setMeasuredDimension(mWidth, mHeight);
    }

绘制 onDraw
在拿到自定义属性值与测量结束后，我们开始设置文字默认/选中颜色、绘制下划线。
第一步我们先根据当前RadioButton的选中状态设置文字颜色：

if (mTextCheckColor != -0x001 && mTextDefaultColor != -0x001) {
    setTextColor(isChecked() ? mTextCheckColor : mTextDefaultColor);
}

这里看似我们几行代码就完成了文字根据状态变更颜色，但是运行起来会发现，当我们设置android:button="@null"属性后，我们在多个UnderLineRadioBtn点击切换时并没有预期的效果。通过打印Log日志我们可以发现，在没有button时UnderLineRadioBtn只会在最开始执行多次onDraw，之后我们切换时则不会在执行onDraw。这点我们也不难理解，有button时UnderLineRadioBtn内部需要去更新按钮的选中状态，而更新选中状态就需要通过重绘完成，所以，我们设置android:button="@null"属性后，在onDraw中的代码则不会执行。
所以第二步，我们需要重写方法执行 postInvalidate(); 重绘操作。这时，有两个方法映入眼帘：toggle()、setChecked()，我们该选择哪一个重写。也许有小伙伴说看方法名，一个是切换状态toggle()，一个是设置选中状态setChecked()，当然选toggle()；也可能有人说，都试一遍不就行了。没错，我就是这么做的。通过重写两个方法后，实践证明toggle()方法并不能实现我们想达到的预期效果，这里的预期效果指的是：当我们将切换选中的UnderLineRadioBtn时，之前被选中的按钮文字颜色并不会改变，新选中的按钮可以。这是为什么呢？我们查看继承类RadioButton的toggle()方法：

/**
     * {@inheritDoc}
     * <p>
     * If the radio button is already checked, this method will not toggle the radio button.
     */
    @Override
    public void toggle() {
        // we override to prevent toggle when the radio is already
        // checked (as opposed to check boxes widgets)
        if (!isChecked()) {
            super.toggle();
        }
    }

注意看方法上的注释，意思就是当RadioButton没有被选中时，才会去切换状态，也就是RadioButton再调用父类的toggle方法。这里我们就能明白为什么当我们切换去选中其他的UnderLineRadioBtn按钮时，之前被选中的按钮文字颜色不会变成默认颜色了。我们继续进入父类的toggle方法：

@Override
    public void toggle() {
        setChecked(!mChecked);
    }

原来也是调用了setChecked方法，那么我们将重绘操作放到这个方法即可实现效果。
那么为什么放在setChecked方法就可以呢？接着看父类setChecked方法里面做了什么(这里的父类是CompoundButton，RadioButton没有重写setChecked方法)：

/**
     * <p>Changes the checked state of this button.</p>
     *
     * @param checked true to check the button, false to uncheck it
     */
    @Override
    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mCheckedFromResource = false;
            mChecked = checked;
            refreshDrawableState();
            notifyViewAccessibilityStateChangedIfNeeded(
                    AccessibilityEvent.CONTENT_CHANGE_TYPE_UNDEFINED);

            // Avoid infinite recursions if setChecked() is called from a listener
            if (mBroadcasting) {
                return;
            }

            mBroadcasting = true;
            if (mOnCheckedChangeListener != null) {
                mOnCheckedChangeListener.onCheckedChanged(this, mChecked);
            }
            if (mOnCheckedChangeWidgetListener != null) {
                mOnCheckedChangeWidgetListener.onCheckedChanged(this, mChecked);
            }
            final AutofillManager afm = mContext.getSystemService(AutofillManager.class);
            if (afm != null) {
                afm.notifyValueChanged(this);
            }

            mBroadcasting = false;
        }
    }

可以看到方法中修改了mChecked的值，而我们在修改文字颜色的代码中用到的isChecked方法中返回的就是mChecked：

@ViewDebug.ExportedProperty
    @Override
    public boolean isChecked() {
        return mChecked;
    }

看到这里，还有一个疑问："之前被选中的按钮是如何改变自身的状态的呢？"toggle方法中对已经选中的按钮没有做操作，那么可以肯定的就是是RadioButton的容器RadioGroup去改变的，那么这是怎么做到的？我在上面CompoundButton的setChecked方法中看到两个具有嫌疑的代码：

...//省略部分代码
notifyViewAccessibilityStateChangedIfNeeded(
                    AccessibilityEvent.CONTENT_CHANGE_TYPE_UNDEFINED);

mBroadcasting = true;
...//省略部分代码
final AutofillManager afm = mContext.getSystemService(AutofillManager.class);
if (afm != null) {
	afm.notifyValueChanged(this);
}
mBroadcasting = false;

我觉得最有嫌疑的是 afm.notifyValueChanged(this); 因为我看到了 mBroadcasting 感觉是广播的意思，然后我在RadioGroup中也看到了AutofillManager的身影。
下面的代码是按调用顺序排序：

@Override
public void autofill(AutofillValue value) {
    if (!isEnabled()) return;

    if (!value.isList()) {
        Log.w(LOG_TAG, value + " could not be autofilled into " + this);
        return;
    }

    final int index = value.getListValue();
    final View child = getChildAt(index);
    if (child == null) {
        Log.w(VIEW_LOG_TAG, "RadioGroup.autoFill(): no child with index " + index);
        return;
    }

    check(child.getId());
}

//check方法
public void check(@IdRes int id) {
        // don't even bother
        if (id != -1 && (id == mCheckedId)) {
            return;
        }

        if (mCheckedId != -1) {
        	//将之前被选中的按钮设置为不选中
            setCheckedStateForView(mCheckedId, false);
        }

        if (id != -1) {
        	//将要选中的按钮设置为选中
            setCheckedStateForView(id, true);
        }

        setCheckedId(id);
    }

//setCheckedId方法
private void setCheckedId(@IdRes int id) {
	boolean changed = id != mCheckedId;
	mCheckedId = id;
	
	if (mOnCheckedChangeListener != null) {
	    mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId);
	}
	if (changed) {
	    final AutofillManager afm = mContext.getSystemService(AutofillManager.class);
	    if (afm != null) {
	        afm.notifyValueChanged(this);
	    }
	}
}

一切从autofill方法开始说起，该方法类似与一个接收消息的回调，在这个方法中拿到了被选中的子控件的下标，从而获取子控件，然后调用check方法，check方法中进行了判断：id是否无效、是否重复选中，然后将之前选中的按钮设置为未选中的状态。看到这就明白了：如果RadioButton当前是从未选中状态->选中状态，那么通过toggle方法就可以直接切换自身状态，然后发出一个类似广播的消息，容器类RadioGroup的autofill方法接收到消息后，通过调用内部子控件RadioButton的setCheck方法去切换状态：

private void setCheckedStateForView(int viewId, boolean checked) {
    View checkedView = findViewById(viewId);
    if (checkedView != null && checkedView instanceof RadioButton) {
        ((RadioButton) checkedView).setChecked(checked);
    }
}

知道了切换状态的原理后，我们重写setChecked方法去进行重绘：

@Override
public void setChecked(boolean checked) {
    super.setChecked(checked);
    postInvalidate();
}

文字颜色切换实现后，线的切换也是同一个道理，我们只要再绘制线就可以了：

// 线的高度小于、等于0，不绘制线了
if (mLineHeight <= 0)
    return;
if (mLineWidth <= 0 || mLineWidth == 1) {
    //这里说明用户没有手动设置宽度或者是设置了百分比为1，那么就将其设置为控件本身的宽度
    mLineWidth = mWidth;
} else if (mLineWidth < 1) {
    //设置的百分比，计算出宽度
    mLineWidth = mWidth * mLineWidth;
}
//开始画线
//1、计算线的起点和终点
float left, top = mHeight - mLineHeight, right, bottom = mHeight;
if (mLineWidth < mWidth) {
    //线的宽度比控件本身宽度小，那要让线居中，所以要进行计算
    left = (mWidth - mLineWidth) / 2;
    right = (mWidth - mLineWidth) / 2 + mLineWidth;
} else {
    //线的宽度不比控件本身宽度小
    left = 0f;
    right = mLineWidth;
}
//2、设置线的颜色
mLinePaint.setColor(isChecked() ? mLineCheckColor : mLineDefaultColor);
//3、绘制
if (mLineRadius > 0) {
    //画圆角矩形
    if (mRectF == null)
        mRectF = new RectF(left, top, right, bottom);
    else
        mRectF.set(left, top, right, bottom);
    canvas.drawRoundRect(mRectF, mLineRadius, mLineRadius, mLinePaint);
} else {
    //画矩形
    canvas.drawRect(left, top, right, bottom, mLinePaint);
}

代码中注释很清楚了，还有一些对外暴露的属性设置方法就不详细展开描述了。