系列文章之 Android中自定義View(一)
系列文章之 Android中自定義View(二)
系列文章之 Android中自定義View(三)
系列文章之 Android中自定義View(四)
系列文章之 Android中自定義View(xml繪圖)
本文出自:
http://www.itdecent.cn/u/a1251e598483

最近在看自定義View 的相關(guān)內(nèi)容, 在<Android 群英傳> 上看到Android XML 繪圖相關(guān)的內(nèi)容,遂摘抄下來記錄之

http://keeganlee.me/post/android/20150830

XMl在Android中可不僅僅是一個(gè)布局文件、配置列表。它甚至可以變成一張畫、一張圖。

Bitmap

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_launcher_background" />

這樣做可以直接將圖片轉(zhuǎn)換成Bitmap 在程序中使用

Shape

android的樣式主要?jiǎng)t是通過shape、selector、layer-list、level-list、style、theme等組合實(shí)現(xiàn)。

一般用shape定義的xml文件存放在drawable目錄下，若項(xiàng)目沒有該目錄則新建一個(gè)，而不要將它放到drawable-hdpi等目錄中。

使用shape可以自定義形狀，可以定義下面四種類型的形狀，通過android:shape屬性指定：

• rectangle: 矩形，默認(rèn)的形狀，可以畫出直角矩形、圓角矩形、弧形等
• oval: 橢圓形，用得比較多的是畫正圓
• line: 線形，可以畫實(shí)線和虛線
• ring: 環(huán)形，可以畫環(huán)形進(jìn)度條
  通過shape可以在XML中繪制任何形狀，下面展示了Shape所支持的參數(shù)

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    //默認(rèn)為rectangle
    android:shape=["rectangle"|"oval"|"line"|"ring"]>
    <corners //當(dāng)shape="rectangle"時(shí)使用
        //半徑，會(huì)被后面的單個(gè)半徑屬性覆蓋
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLegtRadius="integer"
        android:bottomRightRadius="integer"/>
    <gradient   //漸變
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="color"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear"|"radial"|"sweep"]
        android:useCenter=["true"|"false"]/>
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer"/>
    <size //指定大小，一般用在ImageView配合scaleType屬性使用
        android:width="integer"
        android:height="integer"/>
    <solid  //填充顏色
        android:color="color"/>
    <stroke //指定邊框
        android:width="integer"
        android:color="color"
        //虛線寬度
        android:dashWidth="integer"
        //虛線間隔寬度
        android:dashGap="integer"/>
</shape>

oval

oval用來畫橢圓，而在實(shí)際應(yīng)用中，更多是畫正圓，比如消息提示，圓形按鈕等，下圖是一些例子：

上面的效果圖應(yīng)用了solid、padding、stroke、gradient、size幾個(gè)特性。size是用來設(shè)置形狀大小的，如下：

• size: 設(shè)置形狀默認(rèn)的大小，可設(shè)置寬度和高度

  • android:width

    寬度

  • android:height

    高度

數(shù)字0是默認(rèn)的橢圓，只加了solid填充顏色，數(shù)字1則加了上下左右4dp的padding，后面的數(shù)字都是正圓，是通過設(shè)置size的同樣大小的寬高實(shí)現(xiàn)的，也可以通過設(shè)置控件的寬高一致大小來實(shí)現(xiàn)。數(shù)字3加了描邊，數(shù)字4是鏤空描邊，數(shù)字5是虛線描邊，數(shù)字6用了radial漸變。注意，使用radial漸變時(shí)，必須指定漸變的半徑，即android:gradientRadius屬性。

以下是漸變的代碼實(shí)現(xiàn)，文件為bg_oval_with_gradient.xml：

<?xml version="1.0" encoding="utf-8"?>
<!-- android:shape指定形狀類型，默認(rèn)為rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- padding設(shè)置內(nèi)間距 -->
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
    <!-- size設(shè)置形狀的大小 -->
    <size
        android:width="40dp"
        android:height="40dp" />
    <!-- gradient設(shè)置漸變 -->
    <gradient
        android:endColor="#000000"
        android:gradientRadius="40dp"
        android:startColor="#FFFFFF"
        android:type="radial" />
</shape>

引用的代碼：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_margin="8dp"
    android:text="6"
    android:textSize="20sp"
    android:textColor="@android:color/black"
    android:background="@drawable/bg_oval_with_gradient" />

line

line主要用于畫分割線，是通過stroke和size特性組合來實(shí)現(xiàn)的，先看虛線的代碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!-- 實(shí)際顯示的線 -->
    <stroke
        android:width="1dp"
        android:color="#2F90BD"
        android:dashGap="2dp"
        android:dashWidth="4dp" />
    <!-- 形狀的高度 -->
    <size android:height="4dp" />
</shape>

畫線時(shí)，有幾點(diǎn)特性必須要知道的：

• 只能畫水平線，畫不了豎線；
• 線的高度是通過stroke的android:width屬性設(shè)置的；
• size的android:height屬性定義的是整個(gè)形狀區(qū)域的高度；
• size的height必須大于stroke的width，否則，線無法顯示；
• 線在整個(gè)形狀區(qū)域中是居中顯示的；
• 線左右兩邊會(huì)留有空白間距，線越粗，空白越大；
• 引用虛線的view需要添加屬性android:layerType，值設(shè)為"software"，否則顯示不了虛線。

ring

首先，shape根元素有些屬性只適用于ring類型，先過目下這些屬性吧：

• android:innerRadius

  內(nèi)環(huán)的半徑

• android:innerRadiusRatio

  浮點(diǎn)型，以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑，默認(rèn)為3，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3，該值會(huì)被android:innerRadius覆蓋

• android:thickness

  環(huán)的厚度

• android:thicknessRatio

  浮點(diǎn)型，以環(huán)的寬度比率來表示環(huán)的厚度，默認(rèn)為9，表示環(huán)的厚度為環(huán)的寬度除以9，該值會(huì)被android:thickness覆蓋

• android:useLevel

  一般為false，否則可能環(huán)形無法顯示，只有作為LevelListDrawable使用時(shí)才設(shè)為true

第一個(gè)圖只添加了solid；第二個(gè)圖只添加了gradient，類型為sweep；第三個(gè)圖只添加了stroke；第四個(gè)圖添加了gradient和stroke兩項(xiàng)特性。

以下為第四個(gè)圖的代碼：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false">
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>

如果想讓這個(gè)環(huán)形旋轉(zhuǎn)起來，變成可用的進(jìn)度條，則只要在shape外層包多一個(gè)rotate元素就可以了。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">
        <gradient
            android:endColor="#2F90BD"
            android:startColor="#FFFFFF"
            android:type="sweep" />
    </shape>
</rotate>

selector

實(shí)際應(yīng)用中，很多地方比如按鈕、Tab、ListItem等都是不同狀態(tài)有不同的展示形狀。舉個(gè)例子，一個(gè)按鈕的背景，默認(rèn)時(shí)是一個(gè)形狀，按下時(shí)是一個(gè)形狀，不可操作時(shí)又是另一個(gè)形狀。有時(shí)候，不同狀態(tài)下改變的不只是背景、圖片等，文字顏色也會(huì)相應(yīng)改變。而要處理這些不同狀態(tài)下展示什么的問題，就要用selector來實(shí)現(xiàn)了。

selector標(biāo)簽，可以添加一個(gè)或多個(gè)item子標(biāo)簽，而相應(yīng)的狀態(tài)是在item標(biāo)簽中定義的。定義的xml文件可以作為兩種資源使用：drawable和color。作為drawable資源使用時(shí)，一般和shape一樣放于drawable目錄下，item必須指定android:drawable屬性；作為color資源使用時(shí)，則放于color目錄下，item必須指定android:color屬性。

• android:state_enabled: 設(shè)置觸摸或點(diǎn)擊事件是否可用狀態(tài)，一般只在false時(shí)設(shè)置該屬性，表示不可用狀態(tài)
• android:state_pressed: 設(shè)置是否按壓狀態(tài)，一般在true時(shí)設(shè)置該屬性，表示已按壓狀態(tài)，默認(rèn)為false
• android:state_selected: 設(shè)置是否選中狀態(tài)，true表示已選中，false表示未選中
• android:state_checked: 設(shè)置是否勾選狀態(tài)，主要用于CheckBox和RadioButton，true表示已被勾選，false表示未被勾選
• android:state_checkable: 設(shè)置勾選是否可用狀態(tài)，類似state_enabled，只是state_enabled會(huì)影響觸摸或點(diǎn)擊事件，而state_checkable影響勾選事件
• android:state_focused: 設(shè)置是否獲得焦點(diǎn)狀態(tài)，true表示獲得焦點(diǎn)，默認(rèn)為false，表示未獲得焦點(diǎn)
• android:state_window_focused: 設(shè)置當(dāng)前窗口是否獲得焦點(diǎn)狀態(tài)，true表示獲得焦點(diǎn)，false表示未獲得焦點(diǎn)，例如拉下通知欄或彈出對(duì)話框時(shí)，當(dāng)前界面就會(huì)失去焦點(diǎn)；另外，ListView的ListItem獲得焦點(diǎn)時(shí)也會(huì)觸發(fā)true狀態(tài)，可以理解為當(dāng)前窗口就是ListItem本身
• android:state_activated: 設(shè)置是否被激活狀態(tài)，true表示被激活，false表示未激活，API Level 11及以上才支持，可通過代碼調(diào)用控件的setActivated(boolean)方法設(shè)置是否激活該控件
• android:state_hovered: 設(shè)置是否鼠標(biāo)在上面滑動(dòng)的狀態(tài)，true表示鼠標(biāo)在上面滑動(dòng)，默認(rèn)為false，API Level 14及以上才支持
  接下來，看看示例代碼，以下是bg_btn_selector.xml的代碼，用于按鈕的背景：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 當(dāng)前窗口失去焦點(diǎn)時(shí) -->
    <item android:drawable="@drawable/bg_btn_lost_window_focused" android:state_window_focused="false" />
    <!-- 不可用時(shí) -->
    <item android:drawable="@drawable/bg_btn_disable" android:state_enabled="false" />
    <!-- 按壓時(shí) -->
    <item android:drawable="@drawable/bg_btn_pressed" android:state_pressed="true" />
    <!-- 被選中時(shí) -->
    <item android:drawable="@drawable/bg_btn_selected" android:state_selected="true" />
    <!-- 被激活時(shí) -->
    <item android:drawable="@drawable/bg_btn_activated" android:state_activated="true" />
    <!-- 默認(rèn)時(shí) -->
    <item android:drawable="@drawable/bg_btn_normal" />
</selector>

在控件中的引用：

<Button 
    android:id="@+id/btn_default"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="@drawable/bg_btn_selector"
    android:text="默認(rèn)按鈕"
    android:textColor="@color/text_btn_selector" />

那么，在使用過程中，有幾點(diǎn)還是需要注意和了解的：

• selector作為drawable資源時(shí)，item指定android:drawable屬性，并放于drawable目錄下；
• selector作為color資源時(shí)，item指定android:color屬性，并放于color目錄下；
• color資源也可以放于drawable目錄，引用時(shí)則用@drawable來引用，但不推薦這么做，drawable資源和color資源最好還是分開；
• android:drawable屬性除了引用@drawable資源，也可以引用@color顏色值；但android:color只能引用@color；
• item是從上往下匹配的，如果匹配到一個(gè)item那它就將采用這個(gè)item，而不是采用最佳匹配的規(guī)則；所以設(shè)置默認(rèn)的狀態(tài)，一定要寫在最后，如果寫在前面，則后面所有的item都不會(huì)起作用了。

另外，selector標(biāo)簽下有兩個(gè)比較有用的屬性要說一下，添加了下面兩個(gè)屬性之后，則會(huì)在狀態(tài)改變時(shí)出現(xiàn)淡入淡出效果，但必須在API Level 11及以上才支持：

• android:enterFadeDuration 狀態(tài)改變時(shí)，新狀態(tài)展示時(shí)的淡入時(shí)間，以毫秒為單位
• android:exitFadeDuration 狀態(tài)改變時(shí)，舊狀態(tài)消失時(shí)的淡出時(shí)間，以毫秒為單位

layer-list

使用layer-list可以將多個(gè)drawable按照順序?qū)盈B在一起顯示，像上圖中的Tab，是由一個(gè)紅色的層加一個(gè)白色的層疊在一起顯示的結(jié)果，陰影的圓角矩形則是由一個(gè)灰色的圓角矩形疊加上一個(gè)白色的圓角矩形。先看下代碼吧，以下是Tab背景的代碼：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一種加載方式 -->
    <!--<item android:drawable="@drawable/bg_tab_selected" android:state_checked="true" />-->
    <!-- 第二種加載方式 -->
    <item android:state_checked="true">
        <layer-list>
            <!-- 紅色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- 紅色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="1dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
</selector>

以下是帶陰影的圓角矩形：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 灰色陰影 -->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 白色前景 -->
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

從上面的示例代碼可以看到，layer-list可以作為根節(jié)點(diǎn)，也可以作為selector中item的子節(jié)點(diǎn)。layer-list可以添加多個(gè)item子節(jié)點(diǎn)，每個(gè)item子節(jié)點(diǎn)對(duì)應(yīng)一個(gè)drawable資源，按照item從上到下的順序疊加在一起，再通過設(shè)置每個(gè)item的偏移量就可以看到陰影等效果了。layer-list的item可以通過下面四個(gè)屬性設(shè)置偏移量：

• android:top 頂部的偏移量
• android:bottom 底部的偏移量
• android:left 左邊的偏移量
• android:right 右邊的偏移量

這四個(gè)偏移量和控件的margin設(shè)置差不多，都是外間距的效果。如何不設(shè)置偏移量，前面的圖層就完全擋住了后面的圖層，從而也看不到后面的圖層效果了。比如上面的例子，Tab背景中的白色背景設(shè)置了android:bottom之后才能看到一點(diǎn)紅色背景。那么如果偏移量設(shè)為負(fù)值會(huì)怎么樣呢？經(jīng)過驗(yàn)證，偏移超出的部分會(huì)被截掉而看不到，不信可以自己試一下。有時(shí)候這很有用，比如當(dāng)我想顯示一個(gè)半圓的時(shí)候。

另外，關(guān)于item的用法：

• 根節(jié)點(diǎn)不同時(shí)，可設(shè)置的屬性是會(huì)不同的，比如selector下，可以設(shè)置一些狀態(tài)屬性，而在layer-list下，可以設(shè)置偏移量；
• 就算父節(jié)點(diǎn)同樣是selector，放在drawable目錄和放在color目錄下可用的屬性也會(huì)不同，比如drawable目錄下可用的屬性為android:drawable，在color目錄下可用的屬性為android:color；
• item的子節(jié)點(diǎn)可以為任何類型的drawable類標(biāo)簽，可以是selector、bitmap、clip、scale、inset、transition、rotate、animated-rotate、lever-list等等。

好了,以上.