相信大家在很多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