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

本文主要是介绍底部带有Indicator的RadioButton，自定义View -- UnderLineRadioBtn的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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的宽高，所以不能动态根据宽高自适应，而且文字的默认/选中颜色还需要另外设置，代码如下：
布局文件：

<RadioButtonandroid: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代码：

@Overrideprotected 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.*/@Overridepublic 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方法：

@Overridepublic 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*/@Overridepublic 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 listenerif (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@Overridepublic 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 botherif (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);elsemRectF.set(left, top, right, bottom);canvas.drawRoundRect(mRectF, mLineRadius, mLineRadius, mLinePaint);
} else {//画矩形canvas.drawRect(left, top, right, bottom, mLinePaint);
}

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