使用场景一般是一个单选标签卡加ViewPager结构,例如下图标签卡控制ViewPager切换。
以下方式可以容易实现下划线,上划线,甚至更复杂的效果,看懂了逻辑,什么效果基本都没问题。
一、界面布局,就是一个简单的RadioGroup,内部包含两个RadioButton:
<RadioGroup
android:id="@+id/rg_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_title_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:button="@null"
android:gravity="center"
android:textColor="@drawable/btn_title_text_selector"
android:text="选课"
android:background="@drawable/btn_title_bg_selector" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:button="@null"
android:gravity="center"
android:textColor="@drawable/btn_title_text_selector"
android:text="我的"
android:background="@drawable/btn_title_bg_selector"/>
</RadioGroup>
<?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>
<shape>
<solid android:color="#fba126"/>
</shape>
</item>
<!--上面覆盖一层距离底层的底部3dp,填充白色。两层叠加一起就形成了一条下划线效果,原理自行脑补-->
<item android:bottom="3dp">
<shape>
<solid android:color="#ffffff"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<solid android:color="#797979"/>
</shape>
</item>
<item android:bottom="3dp">
<shape>
<solid android:color="#ffffff"/>
</shape>
</item>
</layer-list>
</item>
<item
android:drawable="@android:color/transparent">
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true" android:color="#fba126">
</item>
<item
android:state_pressed="true" android:color="#797979">
</item>
<item
android:color="#797979">
</item>
</selector>
四、Activity中代码如下:
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rg_title);
radioGroup.check(R.id.rb_title_select);//默认选中的RadioButton
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
}
});
RadioGroup的默认选择,需要在代码设置,xml设置会一直呈现checked的状态。