xml布局之shape绘制控件圆角，背景，边框等属性

xml中使用shape可以绘制多种控件样式，相比于让UI切图要方便很多：

a，可以缩小app体积；

b，代码控制各种状态的变换更为灵活，且拓展性更好；

c，更为精确，图片的话还可能存在边边角角的地方有锯齿存在等情况

一、圆角背景

 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 设置按钮的四个角为弧形 -->
    <stroke
        android:width="1dp"
        android:color="@color/blue" />

    <!-- padding：Button里面的文字与Button边界的间隔 -->
    <!--
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
        -->
    <solid android:color="@color/white" />
    <corners android:radius="5dip" />
</shape>

 

相关属性解释：corners：圆角弧度	solid：里面背景	stroke：外框背景	padding：文字与边框的距离

shape：背景整体类型，取值有rectangle（矩形）	oval（椭圆形）	line（线性）	ring（环形）

效果图：

 

二、两层圆角背景

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false" >
    <solid android:color="@color/white" />
    <padding
        android:left="2dp"
        android:top="1dp"
        android:right="2dp"
        android:bottom="1dp" />
    <stroke
        android:width="3dp"
        android:color="#33FFFFFF" />
    <size android:width="15dp"
        android:height="15dp" />
</shape>

 

相关属性解释：solid：里面背景	stroke：外框背景	size：外层背景与里层背景的边距，其中里层背景是覆盖外层背景的

 

效果图：

另外这里纯色的圆使用得比较多，贴一下xml源码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <solid android:color="@color/red" />
    <stroke
        android:width="5dp"
        android:color="#00000000" />
    <size android:width="15dp"
        android:height="15dp" />
</shape>

效果图：

三、半圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#CCCCCC"/>
    <corners
        android:bottomLeftRadius="0px"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="0px"
        android:topRightRadius="30dp"/>
</shape>

效果图

四、渐变色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
      startColor : 设置渐变颜色的开始值
      endColor: 设置渐变颜色的结束值

      angle : 设置渐变的角度
          90 ：从下往上开始渐变
          0 ：从左往右开始渐变
   -->
    <gradient
        android:startColor="#dedede"
        android:endColor="#f0f0f0"
        android:angle="90" />
</shape>

注意：这里endColor在上面

效果图：

 

五、selector实现多种状态的变色

即控件原本是什么背景，点击时是什么背景，获取焦点是什么背景，被选中是什么背景，这个用的比较多

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:drawable="@drawable/home_slc" android:state_selected="true" />-->
    <!--<item android:drawable="@drawable/home_nor" />-->
    <item android:drawable="@drawable/buy_sec" android:state_selected="true" />
    <item android:drawable="@drawable/buy_nor" />
</selector>

其中state_selected的取值有true false,另外还有state_pressed state_checked state_selected state_foucused。值得注意的是并不是所有控件都有上面所有属性：

六、另外还有一个用的比较多的是在stirng.xml中定义数组，不用笨拙地一个个getString

<? xml version = "1.0"  encoding = "utf-8" ?> 
<resources> 
     <string-array name = "planets_array" > 
         <item> Mercury </item> 
         <item> Venus </item> 
         <item> Earth </item> 
         <item> Mars </item> 
     </string-array> 
</resources>

获取方法是：

Resources res = getResources () ; 
String[] planets =res.getStringArray(R.array.planets_array);

上面只针对常用的xml控件作列举，更多详细资料可以参考这里