自定義View-第十三步：xml標簽：shape、selector、layerlist

前言

根據啟艦 的博客所學習的自定義View。

一、shape講解

利用代碼繪制出背景效果，可以定義填充色、描邊、圓角、漸變等
1. 使用方法
在res/drawable文件夾下，新建一個文件，命名為xx.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="3dp" />
    <padding
        android:left="3dp"
        android:right="3dp"
        android:top="2dp"
        android:bottom="2dp"/>
    <stroke
        android:width="1px"
        android:color="@color/xhc_red" />
</shape>

調用的時候，一般這樣：

  android:background="@drawable/xx"

2. 具體講解(corners、gradient、padding、size、solid、stroke)

  1. Corners
<corners    //定義圓角    
    android:radius="dimension"    //全部的圓角半徑,與其它四個并不能共同使用
    android:topLeftRadius="dimension"   //左上角的圓角半徑    
    android:topRightRadius="dimension"  //右上角的圓角半徑    
    android:bottomLeftRadius="dimension"    //左下角的圓角半徑    
    android:bottomRightRadius="dimension" />    //右下角的圓角半徑
  1. solid和stroke
<solid  //指定內部填充色
 android:color="color" />    

<stroke        //描邊屬性 
    android:width="dimension"   //描邊的寬度    
    android:color="color"   //描邊的顏色    
    // 以下兩個屬性設置虛線    
    android:dashWidth="dimension"   //虛線的寬度，值為0時是實線    
    android:dashGap="dimension" />      //虛線的間隔
  1. size和padding
<size    //定義圖形的大小
  android:width="dimension"    
  android:height="dimension" />  

<padding     //定義內部邊距
    android:left="dimension"    
    android:top="dimension"    
    android:right="dimension"    
    android:bottom="dimension" />

舉個栗子??

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="2dp"/>
    <solid
        android:color="@color/colorPrimary"/>
    //藍色
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent"/>
    //紅色
    <padding
        android:bottom="3dp"
        android:left="5dp"
        android:right="5dp"
        android:top="3dp"/>
    <size
        android:width="160dp"/>
</shape>

   <TextView
       android:layout_centerInParent="true"
       android:textColor="#fff"
       android:gravity="center"
       android:text="shape demo"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/shapedemo"
       />

效果如下：


  1. gradient
<gradient   
    android:type=["linear" | "radial" | "sweep"]    //共有3中漸變類型，線性漸變（默認）/放射漸變/掃描式漸變    
    android:angle="integer"     //漸變角度，必須為45的倍數，0為從左到右，90為從上到下    ，只對線性漸變linear有效
    android:centerX="float"     //漸變中心X的相對位置，范圍為0～1    
    android:centerY="float"     //漸變中心Y的相對位置，范圍為0～1    
    android:startColor="color"   //漸變開始點的顏色    
    android:centerColor="color"  //漸變中間點的顏色，在開始與結束點之間    
    android:endColor="color"    //漸變結束點的顏色    
    android:gradientRadius="float"  //漸變的半徑，只有當漸變放射類型radial時才能使用
引用自http://blog.csdn.net/harvic880925/article/details/41850723

舉個栗子??

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="2dp"/>
    <padding
        android:bottom="3dp"
        android:left="5dp"
        android:right="5dp"
        android:top="3dp"/>
    <size
        android:height="160dp"
        android:width="160dp"/>

    <gradient
        android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:centerX="0.2"
        android:centerY="0.8"/>
</shape>

效果圖：

3. Shape的屬性（rectangle、oval、line、ring）

android:shape=["rectangle" | "oval" | "line" | "ring"]    
//shape的形狀，默認為矩形，可以設置為矩形（rectangle）、橢圓形(oval)、線性形狀(line)、環形(ring)    

//下面的屬性只有在android:shape="ring"時可用：    
android:innerRadius      //   尺寸，內環的半徑。    
android:innerRadiusRatio  //  浮點型，以環的寬度比率來表示內環的半徑，    
android:thickness           //尺寸，環的厚度    
android:thicknessRatio     // 浮點型，以環的寬度比率來表示環的厚度，例如，如果android:thicknessRatio="2", 那么環的厚度就等于環的寬度除以2。這個值是可以被android:thickness覆蓋的，默認值是3.    
android:useLevel         //   boolean值，如果當做是LevelListDrawable使用時值為true，否則為false.   一般設為false。

舉個栗子：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="ring"
       android:innerRadius="10dp"
       android:thickness="50dp"
       android:useLevel="false">
<!--（這里一定要要加上useLevel屬性并定義為false，不然沒有效果）-->
    <solid android:color="#ff00ff"/>
    <size
        android:width="160dp"
        android:height="110dp" />
</shape>
效果圖

二、selector講解

用于定義在用戶不同的動作狀態下，使用不同的背景值

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"] //如果這里設置成true就相當于居中，如果不設置或者設置為false就是拉伸
    android:dither=["true" | "false"]//抖動效果
    android:variablePadding=["true" | "false"] >//可變的填充,默認值為false，一般建議設置為false就行。 
    <item
        android:drawable="@[package:]drawable/drawable_resource"http:// 設置圖標或者drawable
 android:state_pressed=["true" | "false"]//是否被按下
 android:state_checked=["true" | "false"]  //是否已勾選
 android:state_checkable=["true" | "false"] //是否可勾選
 android:state_selected=["true" | "false"] // 是否被選中
 android:state_enabled=["true" | "false"]      // 是否可用
 android:state_focused=["true" | "false"]     // 是否已獲得焦點
 android:state_active=["true" | "false"]   //是否激活
 android:state_window_focused=["true" | "false"]   //窗口是否獲得焦點
 android:state_first=["true" | "false"]  //是否處于開始狀態
 android:state_last=["true" | "false"]     //是否處于結束狀態
 android:state_hovered=["true" | "false"] //光標是否停留在View的自身大小范圍內的狀態
</selector>

系統在selector尋找符合要求的item時是按照代碼的順序從上向下遍歷的，一旦發現符合狀態的item就直接使用它，并停止繼續尋找！如果把這些狀態理解成集合的話，那么位于下面的集合一定不要是上面某個集合的子集，否則是不會輪到下面這個集合出場的。

selector用法舉例

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
<item   
android:state_pressed="true"  
android:drawable="@drawable/picture1" />
<item  
android:drawable="@drawable/picture2"/>  //不能但在最上邊哦，不然會失效的
</selector>

效果：
1.在按壓狀態下展示picture1這種圖片；
2.在默認狀態下展示picture2這種圖片;

三、layerlist講解

主要作用就是將多個圖層按照順序疊起來，做為一個背景圖來顯示。
1. layerlist用法舉例

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

   <item
       android:drawable="@mipmap/bear"
       />

   <!--left等四個偏移量和控件的margin設置差不多，都是外間距的效果。
   如果不設置偏移量，前面的圖層就完全擋住了后面的圖層，從而也看不到后面的圖層效果了。 -->
   <item
       android:bottom="2dp"
       android:left="2dp"
       android:right="2dp"
       android:top="2dp">
       <shape>
           <corners android:radius="25dp"/>
           <solid android:color="#00ff00"/>
       </shape>
   </item>

   <item
       android:bottom="5dp"
       android:left="5dp"
       android:right="5dp"
       android:top="5dp">
       <selector>
           <item android:state_pressed="true"
               >
               <shape>
                   <corners android:radius="25dp"/>
                   <solid android:color="#FF0000"/>
               </shape>
           </item>
           <item
               >
               <shape>
                   <corners android:radius="25dp"/>
                   <solid android:color="#FFFFFF"
                       />
               </shape>
           </item>
       </selector>
   </item>

</layer-list>

   <TextView
       android:clickable="true"
       android:layout_centerInParent="true"
       android:textColor="#fff"
       android:gravity="center"
       android:text="shape demo"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/shapedemo"
       />

效果：


參考網址

Android中的Selector使用詳解
Android開發中的drawable文件：shape、layer-list和selector標簽

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,466評論 25贊 708
  • 概述 今天我們來探究一下android的樣式。其實，幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 4,906評論 1贊 19
  • 1.Shape通過Shape可以在xml中繪制各種形狀在res/drawable文件夾下，新建一個文件：shape...
    瘋子一般的勇士閱讀 1,197評論 0贊 2
  • 記得剛開始學Android時，看著自己完全用系統控件寫出的不忍直視的界面，對于如何做出不一樣的按鈕，讓它們在不同狀...
    biloba閱讀 1,746評論 1贊 11
  • 前文,看到技術美文,忍不住想拿出來分享.下面是原文地址 點擊原文地址 Objective-C被夾在了兩個世界中間 ...
    指尖猿閱讀 571評論 0贊 1