神奇的 Drawable 文件夹——栗子篇


废话不多说,直接上栗子。

1.小红点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#F2601F"/>
    <size
        android:width="20dp"
        android:height="20dp"/>
</shape>

2.纯色圆角选择器

如果设置禁用状态,需要放在按下等状态的前面,否则不起作用,因为系统会从上到下一次解析,遇到合适的状态就直接取值,不会再解析后面的节点。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 禁用状态 -->
    <item android:state_enabled="false">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="#A0A0A0"/>
        </shape>
    </item>
    <!-- 按下状态 -->
    <item android:state_pressed="true">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="#f58104"/>
        </shape>
    </item>
    <!-- 正常状态 -->
    <item android:state_pressed="false">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="#F89E3D"/>
        </shape>
    </item>
</selector>

3.圆角边框选择器

设置圆角边框背景的时候,需要透明化中间部分,否则在低版本手机上,会表现成黑色背景。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <stroke android:width="1dp" android:color="#A0A0A0"/>
            <corners android:radius="8dp"/>
            <!-- 中间部分背景透明 --> 
            <solid android:color="#00000000"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <stroke android:width="1dp" android:color="@color/colorAccent"/>
            <corners android:radius="8dp"/>
            <!-- 中间部分背景透明 --> 
            <solid android:color="#00000000"/>
        </shape>
    </item>
</selector>

4.文字颜色选择器

在项目 src/main/res 目录下,新建 color 资源文件夹,并在 /color 下新建 selector_text_color.xml 文件。这样就可以在设置控件的 android:textColor 属性时引用此选择器,控制控件被选中或者取消选中时文本的颜色改变。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FFFFFF" android:state_selected="true"/>
    <item android:color="#FB4A41" android:state_selected="false"/>
</selector>

5.波纹点击效果

要实现在 5.0 以上手机上点击出现波纹效果,5.0 以下单纯变灰的效果,有两种方法:

第一种:自定义两个相同名称的 selector ,分别放在 drawabledrawable-v21 区别开 21 版本之前和之后

drawable/selector_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <color android:color="#F2F2F2" />
    </item>
    <item android:state_pressed="false">
        <color android:color="@color/white" />
    </item>
</selector>

drawable-v21/selector_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#F2F2F2">
    <!-- 有界 -->
    <!-- 无界去掉 id 属性即可 -->
    <item
        android:id="@android:id/mask"
        android:drawable="@color/gray"/>
</ripple>

然后在 View 上设置:

android:clickable="true"
android:background="@drawable/selector_bg"

第二种:直接使用系统提供的 attr

android:clickable="true"
<!-- 有界 -->
android:background="?attr/selectableItemBackground"
<!-- 无界 -->
android:background="?attr/selectableItemBackgroundBorderless"

Note:有的控件需要设置 android:foreground 前景属性,比如 CardView

两种方式对比:

  1. 使用系统提供的 attr,简单方便,不用考虑配色等问题,便于和系统风格统一,
  2. 使用自定义 selector 的方式,比较灵活,可以根据需求改变波纹颜色,自定义形状等

6.自定义 EditText 背景下划线颜色和高度

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/transparent" />
                </shape>
            </item>
            <item android:left="-1dp" android:right="-1dp" android:top="-1dp">
                <shape>
                    <solid android:color="@android:color/transparent" />
                    <stroke android:width="1dip" android:color="#00887b" android:dashGap="0dp" android:dashWidth="0dip" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/transparent" />
                </shape>
            </item>
            <item android:left="-1dp" android:right="-1dp" android:top="-1dp">
                <shape>
                    <solid android:color="@android:color/transparent" />
                    <stroke android:width="1dip" android:color="#e6e6e6" android:dashGap="0dp" android:dashWidth="0dip" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

效果图:

EditText.png

为了给 EditText 的下边添加一条直线,如如果直接使用 shape 的 line 形状画出来的直线会位于 EditText 中心,所以这里使用了两层 shape,第一层绘制一个透明的矩形,第二层绘制一个 1dp 宽的边框,并且左右和上设置 -1dp 的偏移,去掉左右和上的边框。

7.同心圆(可用于标记点)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#3385ff" />
        </shape>
    </item>
    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="oval">

            <solid android:color="@color/white" />
        </shape>
    </item>
    <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp">
        <shape android:shape="oval">

            <solid android:color="#3385ff" />
        </shape>
    </item>
</layer-list>

效果图:

评论