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、画椭圆虚线边框背景，资源文件代码如下：

 

[html] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.    <!-- 圆角 -->  
5.    <corners  
6.        android:bottomLeftRadius="8dp"  
7.        android:bottomRightRadius="8dp"  
8.        android:radius="15dp"  
9.        android:topLeftRadius="8dp"  
10.        android:topRightRadius="8dp" />  
11.   
12.   
13.    <!-- 描边 -->  
14.    <stroke  
15.        android:dashGap="4dp"  
16.        android:dashWidth="4dp"  
17.        android:width="2dp"  
18.        android:color="@color/ellipse_dashed_line_color" />  
19.   
20. </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、画实线透明边框背景，资源文件代码如下：

 

[html] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.    <!-- 圆角 -->  
5.    <corners  
6.        android:bottomLeftRadius="6dp"  
7.        android:bottomRightRadius="6dp"  
8.        android:radius="10dp"  
9.        android:topLeftRadius="6dp"  
10.        android:topRightRadius="6dp" />  
11.   
12.   
13.    <!-- 描边 -->  
14.    <stroke  
15.        android:width="1dp"  
16.        android:color="@color/ellipse_dashed_line_color" />  
17.   
18. </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、画实线填充颜色边框背景，资源文件代码如下：

 

[html] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.    <!-- 圆角 -->  
5.    <corners  
6.        android:bottomLeftRadius="6dp"  
7.        android:bottomRightRadius="6dp"  
8.        android:radius="10dp"  
9.        android:topLeftRadius="6dp"  
10.        android:topRightRadius="6dp" />  
11.   
12.   
13.    <!-- 描边 -->  
14.    <solid  
15.        android:width="1dp"  
16.        android:color="@color/ellipse_dashed_line_color" />  
17.   
18. </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、画实线透明半边椭圆边框，资源文件代码如下：

 

[html] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.    <item>  
5.        <shape android:shape="rectangle" >  
6.            <stroke  
7.                android:width="1.2dp"  
8.                android:color="#669df3" />  
9.   
10.            <solid android:color="#00000000" />  
11.   
12.            <corners  
13.                android:bottomRightRadius="10dp"  
14.                android:topRightRadius="10dp" />  
15.   
16.            <padding  
17.                android:bottom="8dp"  
18.                android:left="12dp"  
19.                android:right="12dp"  
20.                android:top="8dp" />  
21.        </shape>  
22.    </item>  
23.   
24. </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、画实线填充颜色半边椭圆边框，资源文件代码如下：

 

[html] view plain copy print?

1. 1. <?xml version="1.0" encoding="utf-8"?>  
   2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
   3.   
   4.    <item>  
   5.        <shape android:shape="rectangle" >  
   6.            <solid android:color="#669df3" />  
   7.   
   8.            <corners  
   9.                android:bottomLeftRadius="10dp"  
   10.                android:topLeftRadius="10dp" />  
   11.   
   12.            <padding  
   13.                android:bottom="8dp"  
   14.                android:left="12dp"  
   15.                android:right="12dp"  
   16.                android:top="8dp" />  
   17.        </shape>  
   18.    </item>  
   19.   
   20. </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"?> < shape  xmlns:android="http://schemas.android.com/apk/res/android"      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"?> < shape  xmlns:android="http://schemas.android.com/apk/res/android"      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"?> < shape  xmlns:android="http://schemas.android.com/apk/res/android"      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"?> < LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"      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 >

转载于:https://www.cnblogs.com/changyiqiang/p/6132058.html