Android中XML繪圖：Bitmap/Shape/Seletor和Layer

Android中XML繪圖

android中xml來佈局，個人認爲主要考慮視圖與邏輯分離，最主要的是實踐mvc的開發模式，XML方式適合做可視化界面設計，而且可讀性較好，java代碼寫UI就無法動態運行代碼，在開發階段實時渲染；這樣在以後要改下視圖，就不需要動邏輯部分，改改xml就可以了，或者說後面替換UI的話，沒有必要跑到代碼中去看哪些地方要改。

Bitmap

---

非常的簡單且常用，例如：

android:src="@drawable/search"

這樣引用資源中的圖片，就可以轉成Bitmap在程序中使用了。

---

Shape

---

它的作用是在XML中定義的幾何形狀，下面展示常用的參數：
android:shape=[“rectangle” | “oval” | “line” | “ring”]
其中rectagle矩形，oval橢圓，line水平直線，ring環形，默認是rectagle
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 圓角 (當shape=“rectagle”時使用)
Android:radius （默認是1dp）
圓角的半徑 值越大角越圓
Android:topRightRadius
右上圓角半徑
Android:bottomLeftRadius
右下圓角角半徑
Android:topLeftRadius
左上圓角半徑
Android:bottomRightRadius
左下圓角半徑

---

padding 填充
android:bottom=”1.0dip”
底部填充
android:left=”1.0dip”
左邊填充
android:right=”1.0dip”
右邊填充
android:top=”0.0dip”
上面填充

---

size 指定大小
android:width=”1.0dp”
android:height=”1dp”

---

Selecter

根據不同的選定狀態來定義不同的現實效果
分爲四大屬性：
android:state_selected 是選中
android:state_focused 是獲得焦點
android:state_pressed 是點擊
android:state_enabled 是設置是否響應事件,指所有事件
另：
android:state_window_focused 默認時的背景圖片
引用位置：res/drawable/文件的名稱.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/pic_blue"   
   />       
<!-- 非觸摸模式下獲得焦點並單擊時的背景圖片 -->      
<item   
   Android:state_focused="true"   
   android:state_pressed="true"     
   android:drawable= "@drawable/pic_red"   
   />     
<!-- 觸摸模式下單擊時的背景圖片-->      
<item   
   Android:state_focused="false"   
   Android:state_pressed="true"     
   Android:drawable="@drawable/pic_pink"   
   />      
<!--選中時的圖片背景-->      
<item   
   Android:state_selected="true"   
   android:drawable="@drawable/pic_orange"   
   />       
<!--獲得焦點時的圖片背景-->      
<item   
   Android:state_focused="true"   
   Android:drawable="@drawable/pic_green"   
   />       
</selector>  

---

Layer

將多個圖片或上面兩種效果按照順序層疊起來

以下就是右側半弧的效果：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="#E5930E" />
            <corners android:radius="30dp"/>
        </shape>
    </item>

    <item android:right="30dp"
        >
        <shape
            android:shape="rectangle">
            <solid android:color="#E5930E" />
        </shape>
    </item>

</layer-list>

以下可作爲textview下劃線的bg：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FAAE4C" />
        </shape>
    </item>
    <item android:bottom="3dp">
        <shape>
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

---

結語

上面的這些方式是Android提供的幾個強大的技能，無論是扁平化還是漸變，都能繪製。將Shape/Seletor和Layer揉合到一塊兒來使用，最終達到效果。

---

                                                            困難方能見人品質，tks