首页 > 代码库 > android 自定义TabHost选择器

android 自定义TabHost选择器

  效果图如下:

技术分享

实现方式:利用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>



android 自定义TabHost选择器