領略千變萬化的Android Drawable （一）

Android Drawable 相信大家都不陌生，本篇我們就來全面深入瞭解它，Drawable是一種可以在Canvas上進行繪製的抽象的影象，它的子類也相當多，所以在開發中很容易導致我們對不同Drawable的理解產生混亂，因此我們很有必要來全面瞭解一下Drawable的子類及其使用方式滴，哈~。

一、Drawable的簡述

Drawable在我們開發中常被用來作為View的背景影象，一般情況下我們都是通過XML來定義Drawable的，當然我們也可以通過程式碼建立Drawable，只不過會比較複雜而已。Drawable最大的好處就是可以方便我們做出一些特殊的UI效果，這點比我們自定義View實現的效果來得更容易些。因此深入理解Drawable的用法還是很有必要的，接下來我們來看看Drawable的一些特性：

1、Drawable本身表示的只是一種影象的概念，因此Drawable不僅僅是圖片，也可以是顏色構造出來的影象效果（後面會說明）。
2、Drawable本身是一個抽象類，因此具體的實現都是由子類完成的，比如ShapeDrawable，BitmapDrawable等。
3、Drawable的內部寬高可以分別通過getIntrinsicWidth()和getIntrinsicHeight()獲取，但並不是所有的Drawable都有內部寬高的屬性，比如一個顏色形成的Drawable並沒有寬高的概念。在大多數情況下，Drawable並沒有大小的概念，因為當Drawable作為View的背景圖時，Drawable會被拉伸至View的同等大小。

二、千變萬化的Drawable

1、BitmapDrawable

BitmapDrawable 是對bitmap的一種包裝，可以設定它包裝的bitmap在BitmapDrawable區域內的繪製方式，如平鋪填充、拉伸填充或者保持圖片原始大小，也可以在BitmapDrawable區域內部使用gravity指定的對齊方式。其語法如下：

Java

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:antialias=["true" | "false"]
    android:dither=["true" | "false"]
    android:filter=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] 
     />

123456789101112

我們分析一下這些屬性的含義：

android:src

型別：Drawable resource。必需。引用一個drawable resource.

android:antialias

型別：Boolean。是否開啟抗鋸齒。開啟後圖片會變得更平滑些，因此一般建議開啟，設定為true即可。

android:dither

型別：Boolean。是否允許抖動，如果點陣圖與螢幕的畫素配置不同時，開啟這個選項可以讓高質量的圖片在低質量的螢幕上保持較好的顯示效果（例如：一個位圖的畫素設定是 ARGB 8888，但螢幕的設定是RGB 565，開啟這個選項可以是圖片不過於失真）一般建議開啟，為true即可。

android:filter

型別：Boolean。是否允許對點陣圖進行濾波。當圖片被壓縮或者拉伸時，使用濾波可以獲得平滑的外觀效果。一般建議開啟，為true即可

android:gravity

當圖片小於容器尺寸時，設定此選項可以對圖片經典定位，這個屬性比較多，不同選項可以使用‘|’來組合使用。

可選項	含義
top	將圖片放在容器頂部，不改變圖片大小
bottom	將圖片放在容器底部，不改變圖片大小
left	將圖片放在容器左側，不改變圖片大小
right	將圖片放在容器右側，不改變圖片大小
center_vertical	圖片豎直居中，不改變圖片大小
fill_vertical	圖片豎直方向填充容器
center_horizontal	圖片水平居中，不改變圖片大小
fill_horizontal	圖片水平方向填充容器
center	使圖片在水平方向和豎直方向同時居中，不改變圖片大小
fill	圖片填充容器，預設值
clip_vertical	豎直方向剪下，很少使用
clip_horizontal	水平方向剪下，很少使用

android:mipMap

紋理對映處理技術，不太懂，不過一般也不用，預設為false

android:tileMode

平鋪模式。共有以下幾個值
disabled ：預設值，表示不使用平鋪
clamp ：複製邊緣色彩
repeat ：X、Y 軸進行重複圖片顯示，也就是我們說要說的平鋪
mirror ：在水平和垂直方向上使用交替映象的方式重複圖片的繪製

三者區別如下圖：

BitmapDrawable的xml使用方式比較簡單，我們這裡就不貼案例了哈。接下來我們來看看在程式碼中如何使用BitmapDrawable。

實際上我們從BitmapDrawable的原始碼可以看出，目前Google建議我們建立BitmapDrawable的構造方法有3種

public BitmapDrawable(Resources res, Bitmap bitmap) 

public BitmapDrawable(Resources res, String filepath)

public BitmapDrawable(Resources res, java.io.InputStream is)

12345

publicBitmapDrawable(Resources res,Bitmap bitmap)publicBitmapDrawable(Resources res,Stringfilepath)publicBitmapDrawable(Resources res,java.io.InputStream is)

引數比較簡單，res就是我們通過getResource()獲取到的資源管理物件，bitmap就是我們需要用BitmapDrawable包裝的圖片物件，filepath，需要包裝的圖片所在路徑，is則是一個影象流，需要轉換成 BitmapDrawable。但是在大多數情況下我們還是建議使用xml實現比較好，程式碼實現我們不打算深究，我們這裡直接給出一個程式碼應用案例：

Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image1);
BitmapDrawable mBitmapDrawable = new BitmapDrawable(getResources()，mBitmap);
mBitmapDrawable.setTileModeXY(TileMode.MIRROR, TileMode.MIRROR);//平鋪方式
mBitmapDrawable.setAntiAlias(true);//抗鋸齒
mBitmapDrawable.setDither(true);//防抖動
//設定到imageView上即可
imageView.setImageDrawable(mBitmapDrawable);

1234567

Bitmap mBitmap=BitmapFactory.decodeResource(getResources(),R.drawable.image1);BitmapDrawable mBitmapDrawable=newBitmapDrawable(getResources()，mBitmap);mBitmapDrawable.setTileModeXY(TileMode.MIRROR,TileMode.MIRROR);//平鋪方式mBitmapDrawable.setAntiAlias(true);//抗鋸齒mBitmapDrawable.setDither(true);//防抖動//設定到imageView上即可imageView.setImageDrawable(mBitmapDrawable);

2、NinePatchDrawable

NinePatchDrawable表示的是我們熟悉的.9格式的圖片，.9圖片可以在保證圖片不失真的情況下任意進行縮放，在實際的使用中我們也是通過Xml來實現即可：

Java

<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"   
    android:src="drawable/resource"  
    android:dither="[true|false]"/>

123	<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"android:src="drawable/resource"android:dither="[true\|false]"/>

屬性和BitmapDrawable中屬性的含義相同，這裡不過多描述。一般情況下不建議程式碼建立.9圖，因為Android雖然可以使用Java程式碼建立NinePatchDrawable，但是極少情況會那麼做，這是因為由於Android SDK會在編譯工程時對點九圖片進行編譯，形成特殊格式的圖片。使用程式碼建立NinePatchDrawable時只能針對編譯過的點九圖片資源，對於沒有編譯過的點九圖片資源都當做BitmapDrawable對待。還有點需要特別注意的是，點九圖只能適用於拉伸的情況，對於壓縮的情況並不適用，如果需要適配很多解析度的螢幕時需要把點九圖做的小一點。

3、ShapeDrawable

ShapeDrawable對於Xml的shape標籤，在實際開發中我們經常將其作為背景圖片使用，因為ShapeDrawable可以幫助我們通過顏色來構造圖片，也可以構造漸變效果的圖片，總之，ShapeDrawable足矣滿足我們大部分特殊需求下面我們說說其使用方法：

Java

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:usesLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

123456789101112131415161718192021222324252627282930313233343536

<?xml version="1.0"encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape=["rectangle"|"oval"|"line"|"ring"]><cornersandroid:radius="integer"android:topLeftRadius="integer"android:topRightRadius="integer"android:bottomLeftRadius="integer"android:bottomRightRadius="integer"/><gradientandroid:angle="integer"android:centerX="integer"android:centerY="integer"android:centerColor="integer"android:endColor="color"android:gradientRadius="integer"android:startColor="color"android:type=["linear"|"radial"|"sweep"]android:usesLevel=["true"|"false"]/><paddingandroid:left="integer"android:top="integer"android:right="integer"android:bottom="integer"/><sizeandroid:width="integer"android:height="integer"/><solidandroid:color="color"/><strokeandroid:width="integer"android:color="color"android:dashWidth="integer"android:dashGap="integer"/></shape>

從程式碼中我們可以看出Shape的子元素包括、<gradient>、<padding>、<size>、<solid>、<stroke>，我們一個個分析。
android:shape
這個屬性表示影象的形狀，可以是rectangle（矩形）、oval（橢圓）、line（橫線）、ring（圓環）。預設為rectangle。
這裡對於ring值還有幾個相關的屬性：

屬性	含義
android:innerRadius	圓環的半徑與android:innerRadiusRatio同時存在時，以android:innerRadius 為準
android:innerRadiusRatio	內半徑佔整個Drawable寬度的比例，預設值為9.如果為n，那麼半徑=寬度/n
android:thickness	圓環的厚度，即外半徑減去內半徑的大小與android：thicknessRatio同時存在時以android:thickness為準
android：thicknessRatio	厚度佔整個Drawable寬度比例，預設值為3，如果為n，那麼厚度=寬度/n
android:useLevel	一般都應該使用false，否則可能無法達到預期顯示效果，除非它被當做LevelListDrawable來使用。

指定邊角的半徑，數值越大角越圓，數值越小越趨近於直角，引數為：

corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />

123456

cornersandroid:radius="integer"android:topLeftRadius="integer"android:topRightRadius="integer"android:bottomLeftRadius="integer"android:bottomRightRadius="integer"/>

Android:radius直接指定4個角的半徑，另外4個屬性可以單獨設定4個角的角度.

設定顏色漸變與為互斥標籤，因為solid表示純色填充，而gradient表示漸變填充。

屬性	含義
android:angle	漸變的角度，預設為0，其值務必為45°的倍數，0表示從左到右，90表示從下到上。
android:centerX	漸變中心點的橫座標
android:centerY	漸變的中心點的縱座標，漸變中心點會影響漸變的具體效果。
android:startColor	漸變的開始顏色
android:centerColor	漸變的中間顏色
android:endColor	漸變的結束顏色
android:gradientRadius	漸變的半徑，當android:type=”radial”有效
android:useLevel	一般為false
android:type	漸變類別，linear(線性)為預設值，radial（徑內漸變），sweep（掃描漸變）

angle=0和angle=90的區別(都為線性漸變)：

linear(線性)為預設值，radial（徑內漸變），sweep（掃描漸變）區別如下：

到這裡我們利用前面的介紹的知識點來實現一個環形進度圈的案例，我們將shape屬性設定為ring（圓環），然後再設定其內半徑以及環的厚度，並設定漸變色調，shape_drawable.xml程式碼如下：

Java

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="8dp"
    android:useLevel="false" >

    <gradient android:angle="0"
        android:startColor="@color/normal"
        android:centerColor="#5027844F"
        android:endColor="#fff"
        android:useLevel="false"
        android:type="sweep"
        />
</shape>

123456789101112131415

<?xml version="1.0"encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadius="20dp"android:shape="ring"android:thickness="8dp"android:useLevel="false"><gradient android:angle="0"android:startColor="@color/normal"android:centerColor="#5027844F"android:endColor="#fff"android:useLevel="false"android:type="sweep"/></shape>

效果如下：

接著，我們將該自定義環形圈設定給一個旋轉動畫，並利用該旋轉動畫自定義成一個環形進度圈的style，最後將該自定義的style賦值給Progress元件。程式碼如下：
自定義旋轉動畫progress_rotate.xml：

Java

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/shape_drawable"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360"
    >
</rotate>

123456789

<?xml version="1.0"encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android"android:drawable="@drawable/shape_drawable"android:pivotX="50%"android:pivotY="50%"android:fromDegrees="0"android:toDegrees="360"></rotate>

自定義Progress的style：

Java

<style name="CustomProgressStyle" >
    <item name="android:indeterminateDrawable">@drawable/progress_rotate</item>
    <item name="android:minWidth">72dp</item>
    <item name="android:maxWidth">72dp</item>
    <item name="android:minHeight">72dp</item>
    <item name="android:maxHeight">72dp</item>
</style>

1234567

應用到Progress元件

ProgressBar
     android:layout_width="100dp"
     android:layout_height="100dp"
     android:layout_centerInParent="true"
     style="@style/CustomProgressStyle"
     android:indeterminateDuration="700"
     />

1234567

ProgressBarandroid:

領略千變萬化的Android Drawable （一）

一、Drawable的簡述

二、千變萬化的Drawable

1、BitmapDrawable

2、NinePatchDrawable

3、ShapeDrawable

領略千變萬化的Android Drawable （一）

領略千變萬化的Android Drawable （二）

Android MVC（一） MVC簡介

Android學習（一）--安卓四大元件

Android學習（一）—— Android studio的安裝與配置

Android動畫（一）-檢視動畫

Android學習（一）

android開發（一）

Android GreenDAO（一）

android-hybird（一）

Android備忘錄（一）

react-native-android-unity（一）react-native加入android原生

ReactNative 呼叫Android 原生（一）——原生模組(一)

ReactNative 呼叫Android 原生（一）——原生模組(二)

Android例項（一）—— 3D畫廊

Android開發（一）——Android-Studio 開發環境配置

Android 面試題總結之Android 基礎（一）

《Android 安全（一）》AndroidManifest.xml之allowBackup屬性

Android tips（一）-->Android統一顯示￥符號

Android 動畫（一）幀動畫、補間動畫

領略千變萬化的Android Drawable （一）

一、Drawable的簡述

二、千變萬化的Drawable

1、BitmapDrawable

2、NinePatchDrawable

3、ShapeDrawable

相關推薦