Shape、Selector、Vector

要想APP用户体验好，精美 UI 少不了。

而 Shape 和 Selector 可以帮助我们轻易实现 View 的形状设计及状态变化后背景与颜色的变化，而不需很多逻辑代码。

Shape 学习

6个子标签，各属性如下：

填充(solid)：

    设置填充的颜色

　　内间距(padding)：设置四个方向上的间距

　　大小(size)：设置大小

　　圆角(corners)：
　　
    　 同时设置五个属性，则Radius属性无效
　　
　　　　android:Radius="20dp"          设置四个角的半径

　　　　android:topLeftRadius="20dp"   设置左上角的半径   

　　　　android:topRightRadius="20dp"  设置右上角的半径   

　　　　android:bottomLeftRadius="20dp"  设置右下角的半径   

　　　　android:bottomRightRadius="20dp"  设置左下角的半径

　　描边(stroke)：
　　dashWidth和dashGap属性，只要其中一个设置为0dp，则边框为实现边框

　　　　android:width="20dp" 设置边边的宽度   

　　　　android:color="@android:color/black"  设置边边的颜色   

　　　　android:dashWidth="2dp"  设置虚线的宽度   

　　　　android:dashGap="20dp" 设置虚线的间隔宽度

　　渐变(grndient)：
　　当设置填充颜色后，无渐变效果。
　　angle的值必须是45的倍数（包括0），仅在type="linear"有效，不然会报错。android:useLevel 这个属性不知道有什么用。

示例

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

    <!-- 圆角 -->
    <corners
        android:radius="9dp"  <!-- 无效 -->
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"
        android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"/><!-- 设置圆角半径 -->

    <!-- 渐变 -->
    <gradient
        android:startColor="@android:color/white"
        android:centerColor="@android:color/black"
        android:endColor="@android:color/black"
        android:useLevel="true"
        android:angle="45"
        android:type="radial"
        android:centerX="0"
        android:centerY="0"
        android:gradientRadius="90"/>

    <!-- 间距 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><!-- 各方向的间距 -->

    <!-- 大小 -->
    <!-- 宽度和高度 -->
    <size
        android:width="50dp"
        android:height="50dp"/>

    <!-- 填充 -->
    <solid
        android:color="@android:color/white"/><!-- 填充的颜色 -->

    <!-- 描边 -->
    <stroke
        android:width="2dp"
        android:color="@android:color/black"
        android:dashWidth="1dp"   <!-- 边的长度 -->
        android:dashGap="2dp"/>  <!-- 边与边间隔 -->

</shape>

Selector 学习

分 Color_Selector 和 Drawable_Selector 两种

Color_Selector 文件的位置存储于res/color/xxx.xml

使用：跟颜色一样使用
在Java中使用是：R.color.filename
在XML中使用是：@[package]color/filename

语法：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color" //颜色值RGB,$ARGB,
                                    #RRGGBB,#AARRGGBB
        android:state_pressed=["true" | "false"]//是否触摸 
        android:state_focused=["true" | "false"]//是否获得焦点
        android:state_selected=["true" | "false"]//是否被状态
        android:state_checkable=["true" | "false"]//是否可选
        android:state_checked=["true" | "false"]//是否选中
        android:state_enabled=["true" | "false"]//是否可用
        android:state_window_focused=["true" | "false"] />//是否窗口聚焦
</selector>

示例：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:color="#ffff0000"/> <!-- pressed -->
    <item android:state_focused="true"
          android:color="#ff0000ff"/> <!-- focused -->
    <item android:color="#ff000000"/> <!-- default -->
</selector>

Drawable-Selector 文件存储于/res/drawable/xxx.xml

使用：跟图片一样使用
Java中调用：R.drawable.filename
XML中调用：@[package:]drawable/filename

语法：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]//drawable的大小是否当中状态变化，true表示是变化，false表示不变换，默认为false
    android:dither=["true" | "false"]//当位图与屏幕的像素配置不一样时(例如，一个ARGB为8888的位图与RGB为555的屏幕)会自行递色(dither)。设置为false时不可递色。默认true
    android:variablePadding=["true" | "false"] >//内边距是否变化，默认false
    <item
        android:drawable="@[package:]drawable/drawable_resource"//图片资源
        android:state_pressed=["true" | "false"]//是否触摸
        android:state_focused=["true" | "false"]//是否获取到焦点
        android:state_hovered=["true" | "false"]//光标是否经过
        android:state_selected=["true" | "false"]//是否选中
        android:state_checkable=["true" | "false"]//是否可勾选
        android:state_checked=["true" | "false"]//是否勾选
        android:state_enabled=["true" | "false"]//是否可用
        android:state_activated=["true" | "false"]//是否激活
        android:state_window_focused=["true" | "false"] />//所在窗口是否获取焦点
</selector>

示例：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/button_bg_press" />
    <item android:state_focused="true" android:drawable="@drawable/button_bg_press" />
    <item android:state_pressed="true" android:drawable="@drawable/button_bg_press"  />
    <item android:drawable="@drawable/button_bg_normol"  />
</selector>

经常是两者结合一起使用：

<?xml version="1.0" encoding="utf-8"?>
<!--左下圆角 By Moses-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@android:color/white"/>
            <padding
                android:right="10dp"
                android:left="10dp"/>
            <corners
                android:bottomLeftRadius="10dp"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/defaultColor"/>
            <padding
                android:right="10dp"
                android:left="10dp"/>
            <corners
                android:bottomLeftRadius="10dp"/>
        </shape>
    </item>

</selector>

Vector的学习

知道目前自己再怎么学习，也写不出什么东西来，就直接贴大佬们的链接了。

群英传作者的博客：http://blog.csdn.net/eclipsexys/article/details/51838119

学无止境

Shape、Selector、Vector

猜你喜欢