效果图如下:
实现方式:利用RadioButton单选功能来实现,我们只需要更改选择与为选择时的背景颜色及字体颜色即可。
item_selet_layout文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
style="@style/tabhost_left_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="10dp"
android:text="待审核" />
<RadioButton
style="@style/tabhost_center_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="10dp"
android:text="已审核" />
<RadioButton
style="@style/tabhost_right_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="10dp"
android:text="我的" />
</RadioGroup>
</LinearLayout>
TabHostSelector继承LinearLayout:
public class TabHostSelector extends LinearLayout{
public TabHostSelector(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
View view = LayoutInflater.from(context).inflate(R.layout.item_select_layout, null);
RadioGroup radioGroup = (RadioGroup) view.findViewById(R.id.radiogroup);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
Utils.showToast(getContext(), checkedId+"");
switch (checkedId) {
case 1:
break;
case 2:
break;
case 3:
break;
default:
break;
}
}
});
radioGroup.check(2);
LinearLayout.LayoutParams ll = new LayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
this.addView(view,ll);
}
由于三个选项,左右两个上下角由弧度,于是定义了三个style,分别控制角度。
<style name="tabhost_center_style" parent="@android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">@null</item>
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/tabhost_textcolor_selector</item>
<item name="android:background">@drawable/tabhost_center_elector</item>
</style>
<style name="tabhost_left_style" parent="@android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">@null</item>
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/tabhost_textcolor_selector</item>
<item name="android:background">@drawable/tabhost_left_elector</item>
</style>
<style name="tabhost_right_style" parent="@android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">@null</item>
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/tabhost_textcolor_selector</item>
<item name="android:background">@drawable/tabhost_right_elector</item>
</style>
res/color/color/tabhost_textcolor_selector:控制文字选中时改变成白色,未选中为黑色。
图:
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@android:color/white" />
<item android:color="@android:color/black"></item>
</selector>
这里设置字体颜色会出现很多问题,期初用其他方式来实现,始终无效,后来看到这种方式,可以实现。在res文件夹下面新建一个color文件夹,把字体颜色selector文件放在里面。
背景色的变换:
tabhost_right_elector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape>
<solid android:color="@color/tabhost_selected" />
<stroke android:width="1dp" android:color="@color/tabhost_selected" />
<corners android:bottomRightRadius="2dp" android:topRightRadius="2dp" />
</shape></item>
<item android:state_checked="false"><shape>
<solid android:color="@android:color/white" />
<corners android:bottomRightRadius="2dp" android:topRightRadius="2dp" />
<stroke android:width="1dp" android:color="@color/tabhost_selected" />
</shape></item>
</selector>