一、简介
- 在
Android开发中，可以使用shape定义各种各样的形状，也可以定义一些图片资源，相对于传统图片来说，使用shape可以减少资源占用，减少安装包大小，还能够很好地适配不同尺寸的手机。
二、子标签属性
Shape子标签属性可以定义控件的一些展示效果，例如圆角、渐变、填充、描边、大小、边距…
<?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="integer" android:centerY="integer" 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>
corners：用来定义圆角。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners // 定义圆角 android:radius="20dp" // 全部的圆角半径 android:topLeftRadius="10dp" // 左上角的圆角半径 android:topRightRadius="10dp" // 右上角的圆角半径 android:bottomLeftRadius="10dp" // 左下角的圆角半径 android:bottomRightRadius="10dp" /> // 右下角的圆角半径 </shape>
solid：用以指定内部填充色。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#f66"/> // 内部填充色 </shape>
gradient：用以定义渐变色，可以定义两色渐变、三色渐变及渐变样式。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:type=["linear" | "radial" | "sweep"] // 共有3中渐变类型：线性渐变（默认）、放射渐变、扫描式渐变； android:angle="90" // 渐变角度，必须为45的倍数，0为从左到右，90为从上到下； android:centerX="0.5" // 渐变中心X的相当位置，范围为0～1； android:centerY="0.5" // 渐变中心Y的相当位置，范围为0～1； android:startColor="#24e9f2" // 渐变开始点的颜色； android:centerColor="#2564ef" // 渐变中间点的颜色，在开始与结束点之间； android:endColor="#25f1ef" // 渐变结束点的颜色； android:gradientRadius="5dp" // 渐变的半径，只有当渐变类型为radial时才能使用； android:useLevel="false" /> // 使用 LevelListDrawable 时就要设置为true。设为 false 时才有渐变效果。 </shape>
stroke：是描边属性，可以定义描边的宽度、颜色、虚实线等。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <stroke android:width="1dp" // 描边的宽度 android:color="#ff0000" // 描边的颜色 // 以下两个属性设置虚线 android:dashWidth="1dp" // 虚线的宽度，值为0时是实线 android:dashGap="1dp" /> // 虚线的间隔 </shape>
padding：用来定义内部边距。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <padding android:left="10dp" // 左内边距； android:top="10dp" // 上内边距； android:right="10dp" // 右内边距； android:bottom="10dp" /> // 下内边距。 </shape>
size：用来定义图形的大小的。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <size android:width="50dp" // 宽度 android:height="50dp" /> // 高度 </shape>
三、特殊属性
Shape特殊属性可以定义当前Shape的形状，比如矩形、椭圆形、线形、环形… 这些都是通过Shape标签属性。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] // Shape 的形状，默认为矩形，可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring) // 下面的属性只有在 android:shape="ring" 时可用： android:innerRadius="10dp" // 内环的半径 android:innerRadiusRatio="2" // 浮点型，以环的宽度比率来表示内环的半径 android:thickness="3dp" // 环的厚度 android:thicknessRatio="2" // 浮点型，以环的宽度比率来表示环的厚度 android:useLevel="false"> // boolean 值，如果当做是 LevelListDrawable 使用时值为 true，否则为 false。 </shape>
rectangle：矩形
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/colorPrimary" /> </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/colorPrimary" /> <size android:height="100dp" android:width="100dp" /> </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/colorAccent" android:dashGap="3dp" // 虚线间距 android:dashWidth="4dp" /> // 虚线宽度 <size android:height="3dp" /> </shape>
ring：圆环
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:useLevel="false" android:innerRadius="20dp" // 内环的半径 android:thickness="10dp"> // 圆环宽度 <!-- useLevel需要设置为 false --> <solid android:color="@color/colorAccent"/> </shape>
四、使用
Shape文件新建在res/drawable文件夹下，例如shape_text.xml
shape_text.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 设置一个边框 --> <stroke android:width="5px" android:color="#f11" /> <!-- 背景渐变--> <gradient android:angle="90" android:endColor="#fcf" android:startColor="#cff"/> <!-- 给使用容器添加内间距 --> <padding android:left="20dp" android:top="20dp" android:right="20dp" android:bottom="20dp"/> </shape>
- 布局中使用
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- 流水布局 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <!-- 输入框 --> <TextView android:id="@+id/dzm" android:layout_width="300dp" android:layout_height="300dp" android:text="@string/app_name" android:textSize="50sp" android:background="@drawable/shape_text" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>
