项目实战：微交互之按钮选择器

相信大家在很多APP中都见过这种微交互，点击按钮时，发现点击前和点击时按钮（甚至是按钮里的文字）的样式不一样，给用户一个友好的小提示，你确实点击了这个按钮，今天我们做一下这个效果。
首先，你以为的就是你以为的吗，表面上看它是一个按钮（Button），其实它是一个文本（TextView）。

我们先在布局中定义它。

    <TextView
        android:id="@+id/selector_tv_design"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dd_dimen_76px"
        android:layout_marginBottom="@dimen/dd_dimen_6px"
        android:layout_marginTop="@dimen/dd_dimen_6px"
        android:layout_marginLeft="@dimen/dd_dimen_36px"
        android:layout_marginRight="@dimen/dd_dimen_36px"
        android:background="@drawable/common_button_selector"
        android:gravity="center"
        android:text="Selector"
        android:textColor="@drawable/common_button_textcolor_selector"
        android:textSize="@dimen/dd_dimen_32px"
        />

当当当，主角登场，选择器：
按钮选择器@drawable/common_button_selector
文字选择器@drawable/common_button_textcolor_selector

先易后难，我们先看一下文字选择器common_button_textcolor_selector：

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

    <item android:color="@color/color_fef7ed" android:state_pressed="true"/>
    <item android:color="@color/white" android:state_pressed="false"/>

</selector>

见代码知其意，android:state_pressed="true"，按下时，文字颜色是color_fef7ed，一般情况文字颜色是white。

再看一下按钮选择器common_button_selector：
稍微复杂一点，因为嵌套又使用了一层选择器。

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

    <item android:drawable="@drawable/common_button_pressed"  android:state_pressed="true"/>
    <item android:drawable="@drawable/common_button_unpressed" android:state_pressed="false"/>

</selector>

当android:state_pressed="true"，按下时，我们使用common_button_pressed选择器。一般情况我们使用common_button_unpressed选择器。
我们看一下common_button_pressed选择器：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--指定填充的颜色-->
    <solid android:color="@color/color_dbac6f" />
    <!--圆角弧度，值越大角越圆。-->
    <corners android:radius="@dimen/dd_dimen_6px" />

</shape>

这里我们使用了shape，按下时是一个圆角（radius="@dimen/dd_dimen_6px"）矩形（shape="rectangle"）。

我们在代码里设置点击事件，象征性的弹一个Toast作为点击响应：

private TextView mSelectorTv;
mSelectorTv = (TextView) findViewById(R.id.selector_tv_design);
mSelectorTv.setOnClickListener(this);
case R.id.selector_tv_design:
Toast.makeText(MainDesignActivity.this,"selector_tv_design",Toast.LENGTH_SHORT).show();

大功告成~

原创不易，转载请注明出处哈。
权兴权意
产品可以更优雅~

项目源代码，欢迎提建议（star）。
https://github.com/HXQWill/QuanStudy/commit/ba78f471205e3bcb317994321fc7523e9ab9bff0