Android-Drawable

時間 2019-11-11

原文原文鏈接

Android-Drawable

學習自： KEEGAN小鋼原文連接：https://keeganlee.me/post/android/20150916android

官方文檔： https://developer.android.google.cn/guide/topics/resources/drawable-resource#top_of_pageide

Drawable 指的是一種可繪製圖像，但又不僅是圖片。能夠是一種顏色或者各類形狀所組成的圖形。Drawable 通常作背景顯示。通常經過XML來編寫，也能夠經過代碼來寫。post

優勢：佔用空間小，減少APK 體積，可以更好的適配各類機型顯示。學習

1.Bitmap （位圖）

經過Bitmap 能夠對圖片進行一些設置，動畫

屬性	描述
src	指定圖片資源（必須指定）
tint	給圖片着色（更換顏色）
gravity	對齊方式
antialias	是否開啓抗鋸齒
filter	當對圖片進行收縮或者延展後能夠得到更平滑的效果
tileMode	平鋪方式

android:tileMode 平鋪方式，ui

四個可選值： repeat，mirror，clamp(複製圖片邊緣顏色來填充剩餘部分)，disable（默認，沒效果）google

效果圖：3d

2.九宮格

可以對png圖片進行局部拉伸，建立方式右鍵一張png圖片，選擇 Create 9-Patch file...code

操做方式：經過拖動黑線區域來指定可拉伸區域，交叉位置即爲可拉伸區域（也是文本顯示位置）。xml

效果圖：

3.Inset （插入可繪製對象）

對Drawable 設置內邊距，也能夠對單個方向進行設置。

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

    android:drawable="@drawable/img1"
    android:inset="10dp"
    android:insetBottom="5dp"
    android:insetLeft="5dp"
    android:insetRight="5dp"
    android:insetTop="5dp" />

效果圖：

4.Clip （裁剪可繪製對象）

對Drawable 進行裁剪，經過設置level值控制裁剪多少，level 取值範圍 0~10000，默認0，也就是圖片徹底不顯示。

實用場景：進度條

android:gravity

設置裁剪的位置，可取值以下，多個取值用 | 分隔：

top 圖片放於容器頂部，不改變圖片大小。當裁剪方向爲vertical時，會裁掉圖片底部
bottom 圖片放於容器底部，不改變圖片大小。當裁剪方向爲vertical時，會裁掉圖片頂部
left 圖片放於容器左邊，不改變圖片大小，默認值。當裁剪方向爲horizontal，會裁掉圖片右邊部分
right 圖片放於容器右邊，不改變圖片大小。當裁剪方向爲horizontal，會裁掉圖片左邊部分
center 圖片放於容器中心位置，包括水平和垂直方向，不改變圖片大小。當裁剪方向爲horizontal時，會裁掉圖片左右部分；當裁剪方向爲vertical時，會裁掉圖片上下部分
fill 拉伸整張圖片以填滿容器的整個高度和寬度。這時候圖片不會被裁剪，除非level設爲了0，此時圖片不可見
center_vertical 圖片放於容器垂直方向的中心位置，不改變圖片大小。裁剪和center時同樣
center_horizontal 圖片放於容器水平方向的中心位置，不改變圖片大小。裁剪和center時同樣
fill_vertical 在垂直方向上拉伸圖片以填滿容器的整個高度。當裁剪方向爲vertical時，圖片不會被裁剪，除非level設爲了0，此時圖片不可見
fill_horizontal 在水平方向上拉伸圖片以填滿容器的整個寬度。當裁剪方向爲horizontal時，圖片不會被裁剪，除非level設爲了0，此時圖片不可見
clip_vertical 附加選項，裁剪基於垂直方向的gravity設置，設置top時會裁剪底部，設置bottom時會裁剪頂部，其餘狀況會同時裁剪頂部和底部
clip_horizontal 附加選項，裁剪基於水平方向的gravity設置，設置left時會裁剪右側，設置right時會裁剪左側，其餘狀況會同時裁剪左右兩側

Style1:

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

    android:clipOrientation="horizontal"
    android:drawable="@drawable/img1"
    android:gravity="left"/>

Style2: 也能夠在其中定義 drawable類型的子標籤

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

    android:clipOrientation="horizontal"
    android:gravity="left">
    <color android:color="@color/colorPrimary" />
</clip>

從0~10000效果圖：

代碼設置 level:

Scaleiv.drawable.level = progress

5.Scale （縮放可繪製對象）

對Drawable 進行縮放操做，經過設置 level 來控制縮放比例，level 越高越接近原圖。範圍0~10000

屬性	描述
drawable	指定drawable 資源
scaleHeight	設置可縮放高度的最大百分比，也就是說最小可以縮小到原圖的百分之多少
scaleWidth	設置可縮放寬度的最大百分比，也就是說最小可以縮小到原圖的百分之多少
scaleGravity	縮放後圖片位置

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

    android:drawable="@drawable/img2"
    android:scaleGravity="center"
    android:scaleHeight="50%"
    android:scaleWidth="50%" />

須要經過代碼設置level

從0到10000的變化，最小圖是原圖的50%

6.level-list （級別列表）

將多個drawable 放到一個集合中，更具設置level 來顯示不一樣drawable

item 匹配規則是從上到下，只要匹配就會返回，不會繼續往下走。

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/img1"
        android:maxLevel="50"
        android:minLevel="0" />
    <item
        android:drawable="@drawable/img2"
        android:maxLevel="100"
        android:minLevel="51" />
</level-list>

通常狀況下，每一個item按照maxLevel從小到大添加，以下：

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/battery_low"
        android:maxLevel="10" />
    <item
        android:drawable="@drawable/battery_below_half"
        android:maxLevel="50" />
    <item
        android:drawable="@drawable/battery_over_half"
        android:maxLevel="99" />
    <item
        android:drawable="@drawable/battery_full"
        android:maxLevel="100" />
</level-list>

7.Transition （轉換可繪製對象）

Transition 繼承自 layer-list, 可是transition 只能添加兩個drawable，提供了兩個drawable切換的方法，切換時會有淡入淡出效果。

應用場景：開關背景圖

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img1" />
    <item android:drawable="@drawable/img2" />
</transition>

切換代碼：

var td = iv_temp.drawable as TransitionDrawable
                 //動畫時長
td.startTransition(1000) //正向切換，第一張到第二張 （只能實現第一張到第二張）
td.reverseTransition(1000) //逆向切換，第二張到第一張 （能夠實現兩張來回切換）

8.Rotate

對drawable 進行旋轉

應用場景：上箭頭圖片顯示爲下箭頭圖片

屬性	描述
fromDegrees	起始角度度數
toDegrees	結束角度度數(正數表示順時針，負數表示逆時針)
pivoX	旋轉中心X座標，百分比表示，相對於左邊緣距離
pivoY	旋轉中心X座標，百分比表示，相對於上邊緣距離

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

效果圖：

9.Animation-list

建立幀動畫，將多張drawable按照必定的播放順序和必定的播放時間間隔來播放。

oneshot: 是不是播放一次 duration：播放時間間隔

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

    <item
        android:drawable="@drawable/img_miao1"
        android:duration="80" />
    <item
        android:drawable="@drawable/img_miao2"
        android:duration="80" />
    <item
        android:drawable="@drawable/img_miao3"
        android:duration="80" />
</animation-list>

開始及中止動畫：

var animDrawable = activity_frame_animation_iv.drawable as AnimationDrawable
animDrawable.start()  //播放動畫
animDrawable.stop() //中止播放

10. Animated-rotate

配合着Rotate使用，達到自動播放效果

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

</animated-rotate>

11. Layer List （圖層列表）

使用layer-list 能夠將多個 drawable 按照順序層疊在一塊兒顯示。列表最後一個drawable 繪於頂部。

11.1 咱們能夠經過 layer-list 和 selector 來實現下圖效果

該圖經過使用一個紅色背景層和一個白色背景層實現，白色背景層在經過設置 android:bottom 向上偏移，顯示圖底部紅色背景層。偏移屬性其實和 Margin 一個做用。

代碼：

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

    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@android:color/holo_red_dark" />
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>


    <item android:state_checked="false">
        <layer-list>
            <item android:drawable="@android:color/holo_red_dark" />
            <item android:bottom="2dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>

</selector>

11.2 實現陰影效果

偏移指的是移動整個圖層

<?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>

相關標籤/搜索

Android

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。