Android UI美化之Shape Drawable的使用


想美化一下程序里的EditText，发现网上关于美化的文章较少，即使有也大多是直接翻译文档，索性一边研读一边写例子。

先看一下文档对Shape Drawable的描述：

Shape Drawable
An XML file that defines a geometric shape, including colors and gradients. Creates aShapeDrawable. 一个定义几何形状的XML文件，包括颜色和渐变。创建一个ShpeDrawable对象
用Android:background="@drawable/xxx.xml"或相应的Java代码引用，Shape Drawable说白了就是可自定义的多样化的背景。
现在对比较重要的标签和属性进行解释：

和其它drawable文件一样，在drawable目录下创建xml文件，以<shape>为根元素，有两个重要属性

1、xmlns:android="http://schemas.android.com/apk/res/android"   这个不说了，必填

2、android:shape 定义shape的形状有4个值"rectangle","oval","line","ring"分别是矩形、椭圆、线型和环形，一般用的较多的是前两种

shape元素下的其它属性均仅适用于android:shape="ring"时。

Shape的子元素包括

<corners>
<gradient> 

<padding> 
<size> 
<solid> 
<stroke>
        <corners>指定边角的半径，简单的说，数值越大角越圆，数值越小越趋近于直角，参数为： 
  1. android:radius="integer"  
  2. android:topLeftRadius="integer"  
  3. android:topRightRadius="integer"  
  4. android:bottomLeftRadius="integer"  
  5. android:bottomRightRadius="integer"  
 android:radius直接指定4个角的半径，另外4个属性可以单独设置4个角的角度

        <gradient>的作用是设置颜色渐变，有以下属性

  1. android:angle="integer"    设置渐变的角度，数值必须为45的倍数，默认为0，即从左到右渐变。当值为90时，从下到上渐变，以此类推当值为180时  
  2. 为270时从上向下渐变。  
  3. android:centerX="integer"   渐变的水平中心点，值为0-1.0  
  4. android:centerY="integer"   渐变的垂直中心点，值为0-1.0  
  5. android:centerColor="integer"   中心的颜色，非必须  
  6. android:endColor="color"    结束渐变时的颜色  
  7. android:gradientRadius="integer"   渐变的半径，仅适用于android:type="radial"时  
  8. android:startColor="color"  开始渐变时的颜色  
  9. android:type=["linear" | "radial" | "sweep"]   渐变的类型，分别为线状、中心放射状、经测试类似于雷达扫描的一种形态（词汇匮乏不知道该怎么翻译，⊙﹏⊙b汗）  
  10. android:usesLevel=["true" | "false"]   貌似是可以被当做level-list用的意思   

        <padding>是为内容或子标签设置边距，4个属性top、bottom、left、right，需要注意的是这个标签的作用是为内容设置与当前应用此shape的View的边距，而不是设置当前View与父元素的边距。

     <size>就不用说了，设置背景大小，width和height俩属性。

    <solid>只有一个属性，即color，设置整个背景的颜色，如果已经定义了渐变色，那么这个属性就无效了。

    <stroke>  描边，即设置边框 

 
  1. <span style="font-size:16px;">        android:width="integer"   描边的宽度  
  2.         android:color="color"    描边的颜色  
  3.         android:dashWidth="integer"   必须与下面的dashGap搭配使用缺一不可，也就是说可以两个属性都不用，如果用，两个都必须得用。那么这哥俩有什么作用呢？  
  4. 原来是可以实现边框分段的效果，前者指定每段的长度后者指定两端之间的间隙或者说距离。  
  5.         android:dashGap="integer"   上图说明，如下，灰色部分为背景，黄绿色部分是边框（好恶心的颜色啊，我随便填了几个数出来的）</span>  


至此，关于Shape Drawable的大部分功能都介绍完了，快去做出自己的漂亮的UI吧。

相关内容