Android UI 详解之Shape

shape和selector是Android UI设计中经常用到的，比如我们要自定义一个圆角Button，点击Button有些效果的变化，就要用到shape和selector。可以这样说，shape和selector在美化控件中的作用是至关重要的。

1.Shape

　　简介

　　作用：XML中定义的几何形状

　　位置：res/drawable/文件的名称.xml

　　使用的方法：

　　Java代码中：R.drawable.文件的名称

　　XML中：android:background="@drawable/文件的名称"

　　属性：

　　<shape> android:shape=["rectangle" | "oval" | "line" | "ring"]

　　其中rectagle矩形，oval椭圆，line水平直线，ring环形

　　<shape>中子节点的常用属性：

　　<gradient> 渐变

android:startColor 起始颜色

　　 android:endColor 结束颜色

　　 android:angle 渐变角度，0从上到下，90表示从左到右，数值为45的整数倍默认为0；

　　 android:type 渐变的样式 liner线性渐变 radial环形渐变 sweep

　　<solid > 填充

　　 android:color 填充的颜色

　　<stroke > 描边

　　 android:width 描边的宽度

　　 android:color 描边的颜色

　　 android:dashWidth 表示'-'横线的宽度

　　 android:dashGap 表示'-'横线之间的距离

　　<corners > 圆角

　　 android:radius 圆角的半径值越大角越圆

　　 android:topRightRadius 右上圆角半径

android:bottomLeftRadius 右下圆角角半径

android:topLeftRadius 左上圆角半径

　　android:bottomRightRadius 左下圆角半径

2.Selector

　　简介

Android中的Selector主要是用来改变ListView和Button控件的默认背景。其使用方法可以按一下步骤来设计:

　　位置：res/drawable/文件的名称.xml

　　使用的方法：

　　Java代码中：R.drawable.文件的名称

　　XML中：Android:background="@drawable/文件的名称"

例如；

编写 button_selector.xml

<?xml version="1.0" encoding="utf-8" ?>   
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<!-- 默认时的背景图片-->  
  <item android:drawable="@drawable/pic1" />    
<!-- 没有焦点时的背景图片 -->  
  <item android:state_window_focused="false"   
        android:drawable="@drawable/pic1" />   
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->  
  <item android:state_focused="true" android:state_pressed="true"   android:drawable= "@drawable/pic2" /> 
<!-- 触摸模式下单击时的背景图片-->  
<item android:state_focused="false" android:state_pressed="true"   android:drawable="@drawable/pic3" />  
<!--选中时的图片背景-->  
  <item android:state_selected="true"   android:drawable="@drawable/pic4" />   
<!--获得焦点时的图片背景-->  
  <item android:state_focused="true"   android:drawable="@drawable/pic5" />   
</selector>

在用到组件上引用，例如button 的背景，就可以这样写,android:background="@drawable/button_selector"

效果图

xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="oval" > 
       <!-- 填充的颜色 -->   
        <solid android:color="#FFCC66" /> 
             
             <gradient android:startColor="#FFFFFF"
                 android:endColor="#FFFFF0"/>
             
             <!--  android:radius="70dp"-->
             <corners   
                   android:bottomLeftRadius="20dp"     
                   android:bottomRightRadius="20dp"
                    />    <!-- 描边 -->  
              <stroke      
                   android:width="5dp"     
                   android:color="#000000" />  
               <!-- padding：Button里面的文字与Button边界的间隔 --> 
           	  <padding 
                   android:bottom="10dp"
                   android:left="10dp"   
                   android:right="10dp"    
                   android:top="10dp" />
</shape>

Android UI 详解之Shape

猜你喜欢