Shape

Drawable分为两种，一种是普通的图片资源，另外一种是XML形式的Drawable资源。
这里讲的是如何编写XML形式的drawable。

知识点 - Shape

理解
用于设置ViewGroup的形状
设置divider的时候 shape必须设置size，即宽高。

标签	意义	属性	值
Shape	设置Shape的基础形状	Android:Shape	“rectangle”(矩形 - 默认) “oval”(椭圆) “line”(直线) “ring”(环形)

子标签	意义	属性
solid	设置填充Drawable的颜色	Android:color
stroke	设置Drawable描边的颜色 设置描边的宽 设置横线的宽 设置横线之间的间隔	Android:color Android:width Android:dashWidth Android:dashGap
corners	设置圆角 右上圆角半径 右下圆角半径 左上圆角半径 左下圆角半径	Android:radius Android:topRightRadius Android:bottomRightRadius Android:topLeftRadius Android:bottomLeftRadius
size	设置Drawable宽 设置Drawable高	Android:width Android:height
gradient	设置渐变开始颜色 设置渐变结束颜色 设置渐变中间颜色 渐变的半径，只有渐变类型为radial时才使用 渐变中心的相对X/Y坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间 设置渐变的样式，liner线性渐变、 radial环形渐变、sweep扫描性渐变 设置渐变角度，0表示从左到右，90表示从下到上，数值为45的整数倍，默认为0	Android:startColor Android:endColor Android:centerColor Android:gradientRadius Android:centerX/centerY Android:type Android:angle
padding	设置Drawable的Padding	Android:left、top、right、bottompadding

Shape值 - Rectangle

Solid标签代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置填充颜色-->
    <solid android:color="@color/blue"></solid>
    <!--设置Drawable的padding-->
</shape>

常见 - Divider代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--用于控制高度，通常用在divider-->
    <solid android:color="@color/green"></solid>
    <size android:height="10dp"></size>
</shape>

Corners标签代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置填充颜色-->
    <solid android:color="@color/blue"></solid>
    <!--设置圆角-->
    <corners
        android:bottomLeftRadius="30dp"
        android:topLeftRadius="30dp"></corners>
    <!--设置Drawable的padding-->
    <padding android:left="40dp"></padding>
</shape>

Stroke标签代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/blue"></solid>
    <stroke
        android:width="5dp"
        android:color="#fff"
        android:dashGap="10dp"
        android:dashWidth="60dp"></stroke>
</shape>

Gradient标签代码

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

    <gradient
        android:angle="45"
        android:centerColor="@color/red"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="@color/blue"
        android:gradientRadius="100dp"
        android:startColor="@color/green"
        android:type="linear"></gradient>

    <padding
        android:left="10dp"
        android:right="10dp"></padding>

</shape>

Shape值 - line

示例 - 虚线

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="1dp"
        android:color="@color/white"
        android:dashGap="5dp"
        android:dashWidth="5dp"></stroke>
        <size android:height="4dp" />
</shape>

总结

使用
1.只能画水平线。
2.stroke的width属性设置drawable高度，size的height属性设置形状所占的高度。
3.使用虚线的View需要在xml理设置layerType属性的值为software，否则虚线不显示。
4.xml里尽量不要使用View来做分割线，View不会显示默认设置的高度，而是填满屏幕。
5.设置height必须要比width大，否则不显示。
6.建议使用View为TextView、ImageView。
7.常用属性size、stroke。

Shape值 - Oval

示例 - 画圆

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

总结

使用
1.设置shape为oval，使用solid设置颜色，使用size设置宽高。
2.建议使用View为TextView、ImageView。
3.常用属性solid、padding、size。

Shape值 - Ring

Shape的属性	意义
android:uselevel	当shape为ring才有效,表示是否允许根据level来显示环的一部分,需要设置为false
android:thickness	设置环的厚度
android:innerRadius	设置环的内半径尺寸
android:thicknessRatio	设置环的厚度占半径的比率
android:innerRadius	设置环的内半径占半径的比率

示例 - 做一个进度条

定义shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="9dp"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thickness="30dp"
    android:useLevel="false">
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    <stroke
        android:width="1dp"
        android:color="@color/red"></stroke>
</shape>

要使drawable动起来，需要在外层添加rotate标签。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="9dp"
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thickness="30dp"
        android:useLevel="false">
        <gradient
            android:endColor="#2F90BD"
            android:startColor="#FFFFFF"
            android:type="sweep" />
        <stroke
            android:width="1dp"
            android:color="@color/red"></stroke>
    </shape>
</rotate>

在XML中使用

使用
使用android:indeterminateDrawable属性设置进度条drawable。

<ProgressBar
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="8dp"
    android:background="@drawable/bg_ring_with_gradient_rotate"
    android:indeterminateDrawable="@drawable/bg_ring_with_gradient_rotate" />

总结

使用
1.设置uselevel为false、设置innerRadius内半径、thickness厚度。
2.设置shape的值为ring，设置相关的属性。
3.通过stroke设置外边框、通过gradient设置渐变颜色。
4.需要在xml中设置宽高一致。

知识点 - Selector

Selector在Button里无效的原因

默认图必须放在最后面
示例代码

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/common_icon_gray_tab" android:state_pressed="true"></item>
    <item android:drawable="@drawable/common_icon_red_tab"></item> //默认图必须放在最下面
</selector>

示例 - RadioButton切换改变背景颜色

1.创建两个背景Drawable，一个是绿色的Shape、一个是白色的Shape。
2.在drawable文件夹下，创建xml，根标签为selector。
3.设置按下相关的属性及其显示的drawable、设置默认背景。
4.在RadioButton中设置background为该Drawable即可。

<!-- 设置不同属性下的Drawable -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_green_shape_enable" android:state_selected="true"></item>
    <item android:drawable="@drawable/radio_green_shape_enable" android:state_pressed="true"></item>
    <item android:drawable="@drawable/radio_green_shape_enable" android:state_checked="true"></item>
    <item android:drawable="@drawable/radio_white_shape_disable"></item>
</selector>

示例 - RadioButton切换改变文本颜色

设置textColor的Drawable报错

当你向上述那样设置View的textColor的selector时，你会发现报下列错误。
Caused by: android.view.InflateException: Binary XML file line #19: Error inflating class
这是因为textColor属性无法解析drawable导致的错误。

解决方法

不引用drawable，而是使用color。
使用
1.在res目录新建一个color文件夹，创建color文件。
2.在Selector标签下，设置android:color属性的值。
3.在RadioButton中设置textColor为该color文件即可。

<!-- 设置不同属性下的color -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_selected="true"></item>
    <item android:color="@color/white" android:state_pressed="true"></item>
    <item android:color="@color/white" android:state_checked="true"></item>
    <item android:color="@color/green"></item>
</selector>

知识点 - Inset

示例 - 单边padding的Divider

使用inset标签

属性	说明
android:insetTop	图像距离上边的距离
android:insetRight	图像距离右侧的距离
android:insetBottom	图像距离底边的距离
android:insetLeft	图像距离左侧的距离

(common_divider_margin_left.xml) 在LinearLayout的divider属性设置这个文件即可

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/common_divider_line" //加载divider Shape
    android:insetLeft="@dimen/common_layout_margin_15dp"> //设置左边距
</inset>

Shape系列