shape 表示图形的形状，通过 shape 创建的 Drawable 其实体类是 GradientDrawable
shape 形状
-
line：直线
-
oval: 椭圆
-
rectangle: 矩形（默认）
-
ring: 圆环
shape 标签
-
corners
表示 shape 的四个角的角度，用 px 表示，只适用于 矩形 shape。
-
属性
<corners android:topRightRadius 设定左上角的角度 android:topLeftRadius 设定右上角的角度 android:bottomRightRadius 设定右下角的角度 android:bottomLeftRadius 设定左下角的角度 android:radius 为四个角同时设定相同的角度，优先级较低，会被其他四个属性覆盖/> -
示例
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 角度 --> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="160dp" android:radius="5dp" android:topLeftRadius="80dp" android:topRightRadius="40dp"/> <!-- 填充色 --> <solid android:color="@color/red"/> </shape>
-
shape_corners.png
-
gradient
gradient 表示渐变效果，与 solid 互相排斥，solid 表示纯色填充。
-
属性
<gradient android:centerX 渐变的中心点的横坐标 android:centerY 渐变的中心点的纵坐标 android:startColor 渐变的起始色 android:endColor 渐变的结束色 android:centerColor 渐变的中间色 android:gradientRadius 渐变半径，仅当 android:type="radial" 有效 android:type 渐变类别，有 linear (线性渐变)、radial (径向渐变 )、sweep (扫描线渐变)，默认是 线性渐变 android:useLevel 一般为 false，当 Drawable 作为 StateListDrawable 使用时为 true android:angle 渐变的角度，默认为 0，取值必须为 45 的倍数，0 表示从左到右边，90 表示从下到上/> -
示例
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 渐变 --> <gradient android:startColor="@color/red" android:centerColor="@color/yellow" android:endColor="@color/blue" android:gradientRadius="200dp" android:type="xxx"/> </shape>-
linear
gradinet_linear.png
-
-
radial
gradient_raidal.png
注： 当渐变类型为 radial，必须配合 android:gradientRadius 才会生效。
-
sweep
gradient_sweep.png
-
-
padding
padding 表示 View 内部的距离，等价于 View 的 android:paddingXXX属性。
-
属性
<padding android:top 距离顶部 android:bottom 距离底部 android:left 距离左侧 android:right 距离右侧/> -
示例
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 间隔 --> <padding android:bottom="100dp" android:left="40dp" android:right="8dp" android:top="50dp"/> <!-- 填充色 --> <solid android:color="@color/blue"/> </shape>
-
shape_padding.png
-
size
size 表示 shape 的宽高
-
属性
<size android:width android:height/> -
示例
-
定义 shape 资源
<?xml version="1.0" encoding="utf-8"?> <shapexmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 填充色 --> <solid android:color="@color/yellow"/> <!-- 大小 --> <size android:width="100dp" android:height="20dp"/> </shape> -
布局引用
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ...> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/shape_size" android:text="幼儿园" android:textColor="@color/red" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>
-
-
shape_size.png
注： size 指的是 shape 的大小，作为 View 的背景使用，shape 会被拉伸至 View 的大小，接下来看例子。
- 修改布局中 Button 的宽高为 300 dp
shape_size_300.png
-
solid
表示纯色填充
-
属性
<solid android:color 指定 shape 中填充的颜色/>
-
-
stroke
表示 shape 的描边
-
属性
<stroke android:width 描边的宽度 android:color 描边的颜色 android:dashGap 虚线的线段之间的间隔 android:dashWidth 虚线的线段的宽度/> -
示例
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 填充色 --> <solid android:color="@color/yellow"/> <!-- 描边 --> <stroke android:color="@color/red" android:dashWidth="50dp" android:dashGap="100dp" android:width="2dp"/> </shape>
-
shape_stroke.png
注： 如果 android:dashWidth 或 android:dashGap 有一个为 0，虚线效果将不会生效。
以上都是基于 矩形 的 shape 操作，接下来看看其他的 形状
1. line
-
line 的用来画分割线的，可以画实线和虚线。需要配合 stroke 和 size 使用。
-
示例
<?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/red"/> <!-- View 的高度 --> <size android:height="200dp" /> </shape> -
布局引用
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/iv_left" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@drawable/shape_line" android:layerType="software" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/iv_right" app:layout_constraintTop_toTopOf="parent"/> <ImageView android:id="@+id/iv_right" android:layout_width="0dp" android:layout_height="200dp" android:background="@color/yellow" app:layout_constraintLeft_toRightOf="@id/iv_left" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>
-
shape_line.png
通过对比左右两个 ImaggeView 可以清楚的看到，在 shape 中指定的 size 高度为 200dp，左边的 ImageView 引用这个 shape，显示的高度就是 200dp。
-
画线时，有几点特性需要注意：
-
只能画水平线，不能画横线
-
线的高度是通过 stroke 的 android:width 属性指定
-
size 的 android:height 指定的是引用该 shape 的 View 的高度
-
size 的 android:height 必须大于 stroke 的 android:width 才会显示
-
线在 View 显示的范围内居中显示
-
线左右两边会留有空白，线越粗，空白越大
-
引用虚线的 View，必须添加 android:layerType="software" 属性，否则虚线不显示
-
2. oval
-
oval 是用来画椭圆的，一般画正圆比较常用
-
示例
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- 大小 --> <size android:width="100dp" android:height="100dp"/> <!-- 填充色 --> <solid android:color="@color/red"/> </shape>
-
shape_oval.png
3. ring
-
针对 ring 这个形状，有五个特殊的属性
-
属性
-
android:innerRadius 圆环内半径
-
android:innerRadiusRatio 内半径占整个 Drawable 的比例，默认为 9，和 android:innerRadius 同时存在，会被覆盖
-
android:thickness 圆环的厚度
-
android:thicknessRatio 厚度占整个 Drawable 的比例，默认为 3,和android:thickness 同时存在，会被覆盖
-
android:useLevel 一般为 false ，否则圆环可能无法显示
-
-
示例
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="30dp" // 圆环的内半径 android:shape="ring" android:thickness="10dp" // 圆环的厚度 android:useLevel="false"> <!-- 填充色 --> solid android:color="@color/blue" /> </shape>
shape_ring.png
-
参考资料
- Android 开发艺术探索
-
ANDROID样式的开发:SHAPE篇
感谢以上作者的辛勤付出。
网友评论