首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Material Design Button 的 disable 效果

Material Design Button 的 disable 效果

作者头像
夏洛克的猫
发布2018-10-18 11:58:07
1K0
发布2018-10-18 11:58:07
举报
文章被收录于专栏:移动开发移动开发

针对 Material Design Button 的 disable 效果这里提一下. 我们经常有这样的需要,在按钮在 disable 状态下,背景色会呈现深色提醒用户不可点击. 但是目前,如果你像下面这样设置, disable 状态下背景色是没有什么变化的.

    <style name="BlueButton">
        <item name="android:layout_height">@dimen/button_height</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:theme">@style/BlueButtonTheme</item>
    </style>

    <style name="BlueButtonTheme" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">@color/dark_blue</item>
        <item name="colorButtonNormal">@color/blue</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">@dimen/font_three</item>
    </style>

按照以前的方式利用 background 属性加 selector 又会失去水波纹的效果.我们可以利用 colorButtonNormal 属性加 selector 达到我们所要的效果. 在 drawable目录下新建如下文件,然后 colorButtonNormal 中引用即可.

<!--selector_btn_blue-->
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/gray" android:state_enabled="false" />
    <item android:color="@color/blue" />
</selector>
  <style name="BlueButtonTheme" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">@color/dark_blue</item>
        <item name="colorButtonNormal">@drawable/selector_btn_blue</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">@dimen/font_three</item>
    </style>

在 Button 中 style 引用.

 <Button
                    android:enabled="false"
                    android:id="@+id/submit"
                    style="@style/BlueButton"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_marginTop="120dp"
                    android:text="提交"
                    android:textSize="@dimen/font_one" />

效果图:

效果图
效果图
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年03月05日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档