Android中的shape
在Android程序开发中，我们经常会去用到Shape这个东西去定义各种各样的形状，shape可以绘制矩形环形以及椭圆，所以只需要用椭圆即可，在使用的时候将控件比如imageview或textview的高宽设置成一样就是正圆，solid表示远的填充色，stroke则代表远的边框线，所以两者结合可以实现带边缘的圆，当然也可以直接加上size控制高宽。那么我首先带你们了解一下Shape下有哪些标签，并且都代表什么意思：
shape属性：
rectangle：矩形
oval：椭圆
line：线，需要 stroke 来设置宽度
ring：环形
solid属性：
color：填充颜色
stroke属性：
color：边框颜色
width：边框宽度
dashWidth：虚线框的宽度
dashGap：虚线框的间隔
corners属性：
radius：四个角的半径
topRightRadius：右上角的半径
bottomLeftRadius：右下角的半径
opLeftRadius：左上角的半径
bottomRightRadius：左下角的半径
gradient属性：
startColor：其实颜色
centerColor：中间颜色
endColor：结束颜色
centerX：中间颜色的相对X坐标（0 -- 1）
centerY：中间颜色的相对Y坐标（0 -- 1）
useLevel：（true/false）， 是否用作LevelListDrawable的标志
angle是渐变角度，必须为45的整数倍。0从左到右，90从下到上，180从右到左，270从上到下
type：渐变模式。 默认线性渐变，可以指定渐变为radial（径向渐变）或者sweep（类似雷达扫描的形式）
gradientRadius：渐变半径，径向渐变需指定半径。
padding属性：
left：左内边距
top：上内边距
right：右内边距
bottom：下内边距
size属性:
width：宽
height：高
现在接下来我们通过一个例子，画了五个不一样的形状，来详细了解有关Shape的用法。例子如下：
1、画椭圆虚线边框背景，资源文件代码如下：
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android" >
- <!-- 圆角 -->
- <corners
- android:bottomLeftRadius="8dp"
- android:bottomRightRadius="8dp"
- android:radius="15dp"
- android:topLeftRadius="8dp"
- android:topRightRadius="8dp" />
- <!-- 描边 -->
- <stroke
- android:dashGap="4dp"
- android:dashWidth="4dp"
- android:width="2dp"
- android:color="@color/ellipse_dashed_line_color" />
- </shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 圆角 -->
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:radius="15dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<!-- 描边 -->
<stroke
android:dashGap="4dp"
android:dashWidth="4dp"
android:width="2dp"
android:color="@color/ellipse_dashed_line_color" />
</shape>
2、画实线透明边框背景，资源文件代码如下：
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android" >
- <!-- 圆角 -->
- <corners
- android:bottomLeftRadius="6dp"
- android:bottomRightRadius="6dp"
- android:radius="10dp"
- android:topLeftRadius="6dp"
- android:topRightRadius="6dp" />
- <!-- 描边 -->
- <stroke
- android:width="1dp"
- android:color="@color/ellipse_dashed_line_color" />
- </shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 圆角 -->
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:radius="10dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />
<!-- 描边 -->
<stroke
android:width="1dp"
android:color="@color/ellipse_dashed_line_color" />
</shape>
3、画实线填充颜色边框背景，资源文件代码如下：
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android" >
- <!-- 圆角 -->
- <corners
- android:bottomLeftRadius="6dp"
- android:bottomRightRadius="6dp"
- android:radius="10dp"
- android:topLeftRadius="6dp"
- android:topRightRadius="6dp" />
- <!-- 描边 -->
- <solid
- android:width="1dp"
- android:color="@color/ellipse_dashed_line_color" />
- </shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 圆角 -->
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:radius="10dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />
<!-- 描边 -->
<solid
android:width="1dp"
android:color="@color/ellipse_dashed_line_color" />
</shape>
4、画实线透明半边椭圆边框，资源文件代码如下：
- <?xml version="1.0" encoding="utf-8"?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
- <item>
- <shape android:shape="rectangle" >
- <stroke
- android:width="1.2dp"
- android:color="#669df3" />
- <solid android:color="#00000000" />
- <corners
- android:bottomRightRadius="10dp"
- android:topRightRadius="10dp" />
- <padding
- android:bottom="8dp"
- android:left="12dp"
- android:right="12dp"
- android:top="8dp" />
- </shape>
- </item>
- </layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="1.2dp"
android:color="#669df3" />
<solid android:color="#00000000" />
<corners
android:bottomRightRadius="10dp"
android:topRightRadius="10dp" />
<padding
android:bottom="8dp"
android:left="12dp"
android:right="12dp"
android:top="8dp" />
</shape>
</item>
</layer-list>
5、画实线填充颜色半边椭圆边框，资源文件代码如下：
- <?xml version="1.0" encoding="utf-8"?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
- <item>
- <shape android:shape="rectangle" >
- <solid android:color="#669df3" />
- <corners
- android:bottomLeftRadius="10dp"
- android:topLeftRadius="10dp" />
- <padding
- android:bottom="8dp"
- android:left="12dp"
- android:right="12dp"
- android:top="8dp" />
- </shape>
- </item>
- </layer-list>
//---------------------------------------------------------------------
TextView组件可指定一个android:background属性，该属性用于为该文本框指定背景。大部分的时候，文本框的背景只是一个简单的图片，或者只是一个简单的颜色。
如果程序使用ShapeDrawable资源作为文本框的android:background属性，则可以在Android应用中作出各种外观的文本框。
ShapeDrawable资源文件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml version="1.0" encoding="UTF-8"?> android:shape="rectangle"> <!-- 设置填充颜色 --> <solid android:color="#fff"/> <!-- 设置四周的内边距 --> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <!-- 设置边框 --> <stroke android:width="3dip" android:color="#ff0" /></shape> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?xml version="1.0" encoding="UTF-8"?> android:shape="rectangle"> <!-- 定义填充渐变颜色 --> <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="45"/> <!-- 设置内填充 --> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <!-- 设置圆角矩形 --> <corners android:radius="8dp" /></shape> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?xml version="1.0" encoding="UTF-8"?> android:shape="oval"> <!-- 定义填充渐变颜色 --> <gradient android:startColor="#ff0" android:endColor="#00f" android:angle="45" android:type="sweep"/> <!-- 设置内填充 --> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <!-- 设置圆角矩形 --> <corners android:radius="8dp" /></shape> |
接下来在界面布局文件中用这三个ShapeDrawable资源作为文本框的背景。界面布局文件代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?xml version="1.0" encoding="utf-8"?> android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" ><EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/my_shape_1" /><EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/my_shape_2" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/my_shape_3" /></LinearLayout> |
