Android Selector使用案例

最近一个项目中需要实现下面这样的效果，头部条三个按钮切换。

首先布局：
头部条整个是一个LinearLayout,中间的三个按钮外层再嵌套一个LinearLayout,然后居中。

<?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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:gravity="center"
        android:background="@color/market_red">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:background="@drawable/login_btn_bg">
        <Button
            android:id="@+id/deal_btn_a"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:text="A股交易"
            android:textSize="12sp"
            android:textColor="@drawable/deal_topbtn_text_color"
            android:background="@drawable/deal_topbtn_selector"/>
        <Button
            android:id="@+id/deal_btn_gang"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:text="港美股股交易"
            android:textSize="12sp"
            android:textColor="@drawable/deal_topbtn_text_color"
            android:background="@drawable/deal_topbtn_selector"/>
        <Button
            android:id="@+id/deal_btn_moni"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:text="模拟交易"
            android:textSize="12sp"
            android:textColor="@drawable/deal_topbtn_text_color"
            android:background="@drawable/deal_topbtn_selector"/>
    </LinearLayout>
    </LinearLayout>
</LinearLayout>

然后观察，三个按钮的容器是一个圆角矩形，因此用一个shape搞定，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android = "http://schemas.android.com/apk/res/android">
    <stroke
        android:color="@color/white"
        android:width="0.5dp">

    </stroke>
    <solid android:color="#A12D28"/>
    <corners
        android:bottomLeftRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"
        android:bottomRightRadius="2dp"/>
</shape>

之后是按钮上面的文字，选中后文字是红色，没选中是白色，使用一个Selector来实现。代码如下：

<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:color="@color/tv_pressed_color" android:state_selected="true"/>
    <item android:color="@color/white"/>
</selector>

最后就是按钮的状态改变，选中时，按钮背景为白色，没选中为红色，描边(stroke)一直为白色，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <shape>
            <stroke
                android:color="@color/white"
                android:width="1dp">

            </stroke>
            <solid android:color="@color/white"/>
        </shape>
    </item>
    <item android:state_selected="false">
    <shape>
        <stroke
            android:color="@color/white"
            android:width="1dp">
        </stroke>
        <solid android:color="@color/market_red"/>
    </shape>
    </item>

</selector>

最后需要注意的就是：
需要在java代码中处理点击事件，在button点击以后，调用button的setSelected()方法。主要代码如下:

 private void reset(){
        btnTab1.setSelected(false);
        btnTab2.setSelected(false);
        btnTab3.setSelected(false);
    }

    private void setPosition(int position){
        reset();
        switch (position){
            case 0:
                btnTab1.setSelected(true);
                break;
            case 1:
                btnTab2.setSelected(true);
                break;
            case 2:
                btnTab3.setSelected(true);
                break;
        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.deal_btn_a:
                setPosition(0);
                break;
            case R.id.deal_btn_gang:
                setPosition(1);
                break;
            case R.id.deal_btn_moni:
                setPosition(2);
                break;
        }
    }