1.ShapeDrawable
可以通俗的理解为通过颜色来构造图形,可以是纯色的图形也可以是具有渐变效果的图形.(可设置圆角等)。
- 语法
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="float"
android:centerY="float"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
- 首先从android:shape属性说起:
值 | 说明 |
---|---|
rectangle | 填充包含视图的矩形,默认值 |
oval | 适应包含视图的椭圆 |
line | 跨越包含视图宽度的水平线。此形状需要 < stroke > 元素定义线宽。也可通过其属性定义虚线等 |
ring | 环形 |
其中当shape值为ring时,含5个特殊属性,如下:
值 | 说明 |
---|---|
android:innerRadius | 环内部半径,和android:innerRadiusRatio同时存在时,以此为准 |
android:innerRadiusRatio | 内部半径占整个Drawable宽度的比例,默认值为9,如果值为n,内半径= 宽度/n |
android:thickness | 圆环的厚度,外半径-内半径,和android:thicknessRatio同时存在时,以此为准 |
android:thicknessRatio | 圆环的厚度占整个Drawable宽度的比例,默认值为3,如果值为n,厚度= 宽度/n |
android:useLevel | false |
< corners >标签只适用于矩形shape,它的属性如下:
值 | 说明 |
---|---|
android:radius | 为4个角同时设置圆角,优先级较低,会被其他属性覆盖 |
android:topLeftRadius | 左上边角 |
android:topRightRadius | 右上边角 |
android:bottomLeftRadius | 左下边角 |
android:bottomRightRadius | 右下边角 |
< gradient >标签与< solid >标签相斥,solid表示纯色填充,gradient表示指定形状的渐变颜色,它的属性如下:
值 | 说明 |
---|---|
android:angle | 渐变的角度(度)。0 为从左到右,90 为从上到上。必须是 45 的倍数。默认值为 0。 |
android:centerX | 渐变的中心点的横坐标 |
android:centerY | 渐变的中心点的纵坐标 |
android:startColor | 渐变的起始色 |
android:centerColor | 渐变的中心色 |
android:endColor | 渐变的结束色 |
android:type | 渐变图案类型 |
android:gradientRadius | 渐变的半径。仅在 android:type=“radial” 时适用。 |
android:useLevel | 一般为false,当作StateListDrawable时为true |
其中type有三种类型:
- linear 线性渐变
- radial 径向渐变
- sweep 扫描线渐变
其中效果分别如下:
- < solid >表示纯色填充
- < stroke >表示shape的描边,属性如下:
?:组成虚线时android:dashGap,android:dashWidth同时存在且都不为0
值 | 说明 |
---|---|
android:width | 描边的宽度 |
android:color | 描边的颜色 |
android:dashGap | 组成虚线线段间的间距 |
android:dashWidth | 组成虚线线段的宽度 |
- < size >表示shape的大小,Drawable的固有宽高,最终还是被填充至View的大小
2.简单使用及效果
- ring
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="5dp"
android:thickness="1dp"
android:useLevel="false"
>
<solid android:color="@color/colorAccent"/>
<size android:width="50dp"
android:height="50dp"/>
</shape>
效果:
- rectangle
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
<gradient
android:type="linear"
android:startColor="@color/colorAccent"
android:endColor="@color/colorPrimary"/>
<padding
android:left="2dp"
android:right="2dp"
android:top="2dp"
android:bottom="2dp"/>
</shape>
效果:
- line
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
>
<stroke
android:color="@color/colorAccent"
android:dashWidth="10dp"
android:dashGap="10dp"
android:width="2dp"/>
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"
/>
</shape>
效果:
- oval
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
<gradient
android:type="linear"
android:startColor="@color/colorAccent"
android:endColor="@color/colorPrimary"/>
<padding
android:left="2dp"
android:right="2dp"
android:top="2dp"
android:bottom="2dp"/>
</shape>
效果: