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

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









发布了166 篇原创文章 · 获赞 16 · 访问量 19万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览