今天來介紹一下 drawable裡面會用到的東西

tags: 鐵人賽

常見drawable內屬性

Drawable是可以被繪製到屏幕上，可以用getDrawable(int) 拿取屬性。
官方文檔

1. layer-list

官方文檔

(1) 介紹

作用 : 用來創建具有圖層概念的drawable
原理 : 可以想成像FrameLayout一樣是一層層疊上去的
為何要用? : 最常用是來做陰影 or 給框框單一邊線
#預設情況layer-list中的所有Drawable都會被縮放至View的大小
注: 如果要做單一線其實也可以用
如果要畫一圈的線 drawable內的stroke

**默認情況下，所有東西都會自動縮放以適應父視圖(View)大小，如果你不想讓他縮放，要記得加 android:gravity="center" **

View Example :

<View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@color/black" />

drawable - stroke 畫個正方形button

<?xml version="1.0" encoding="utf-8"?>
<!-- shape不宣告就是正方形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#CCCCCC" />
  
</shape>

Q:那要怎麼樣才能做出來陰影呢?

總共有兩層，第一層是底層，第二層是上面那層，第一層因為要做出陰影所以要靠右下，第二層要靠左上。

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

    <item android:left="3dp"
        android:top="3dp">
        <shape>
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>

    <item android:bottom="3dp"
        android:right="3dp">
        <shape>
            <solid android:color="#9C27B0"/>
        </shape>
    </item>
</layer-list>

Q:要怎麼做出線的感覺?

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

    <item>
        <shape>
            <solid android:color="#E784E7"/>
        </shape>
    </item>

    <item
        android:bottom="5dp" android:left="2dp" android:right="2dp">
        <shape>
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>
</layer-list>

Q:旋轉?

可以用rotate屬性讓他轉 fromDegrees是從幾度開始
正的是x軸下方 負的是x軸上方
pivotX pivotY是縮放/旋轉起點座標

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

    <item android:left="3dp"
        android:top="3dp">
        <rotate android:fromDegrees="-30" android:pivotX="0"
            android:pivotY="0">
            <shape>
                <solid android:color="#b4b5b6"/>
            </shape>
        </rotate>

    </item>

    <item android:bottom="3dp"
        android:right="3dp">
        <rotate android:fromDegrees="30" android:pivotX="0"
            android:pivotY="0">
            <shape>
                <solid android:color="#9C27B0"/>
            </shape>
        </rotate>
    </item>
</layer-list>

2. shape

1. shape 表示形狀 rectangle矩形 oval橢圓 line 線 ring 環狀
2. corner radius表示圓滑的程度 數值越大越圓
   3.gradient 漸層色 angle表示漸層的角度
   type表示漸層類型 ["linear" 線性 | "radial" 環狀 | "sweep" 掃描]
   4.solid 是純色的
   5.stroke代表邊框 dash是虛線相關的 Width 是大小 Gap 是隔開的距離

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

題外話:

getIntrinsicWidth getIntrinsicHeight 可以拿到drawable的真實寬跟高

舉個例子，要是你drawable bitmap其實是100*100 getIntrinsicWidth拿到的就是 100
但是在imageView你設置的寬高是200 * 200 getWidth拿到的就是200

參考stackoverflow

3. Bitmap

png (preferred), .jpg (acceptable), .gif (discouraged).
用途 : 放圖片，做圖片處理

1. android:antialias 圖片變平滑一點
2. android:dither 保持圖片不過於失真，有些使用在不同設備圖片會拉伸，有可能就會失真，在某些情況下，設備的像素深度很低，可能會導致視覺條紋和抖動問題。
   3.android:filter 濾波也是平滑用的
   4.android:tileMode 這個屬性有點有趣
   有 mirror，repeat,clamp,disabled
   mirror : 會像照鏡子那樣
   repeat : 瘋狂重複
   clamp:這種情況下將一個View的background 設置成該bitmap， 最終也只會顯示bitmap自身的大小 （其實這個View的尺寸是佔滿了的 ）；
   disabled:禁用，跟不設置是一樣的

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
     android:src="@drawable/ic_launcher_foreground"
    android:antialias="true"
    android:tileMode="clamp"
      android:dither="true"
    android:filter="true"
    android:gravity="center">

</bitmap>

4. StateList

用途:透過selector可以定義不同狀態下的跟UI相關的改變
常用在: RadioGroup selector or Button
他搜尋的順序是一個一個往下找，所以要考慮情況做順序上的調整
定義?
android:state_pressed 物件被按下時
android:state_focused 物件由軌跡球選取時
android:state_hovered 物件由指標覆蓋時
android:state_selected 物件被選取時
android:state_checkable 物件是checkable時
android:state_checked 物件被點選時
android:state_enabled 物件能夠接收touch/click event時
android:state_activated 物件被持續選擇時
android:state_window_focused 當物件所屬的application在前景時

參考情境

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <color android:color="#673AB7"/></item>
    <item android:state_pressed="true"
        >
    <color android:color="@color/colorAccent"/>
    </item>
    <item android:state_focused="true"
        >
        <color android:color="@color/colorPrimaryDark"/>
    </item> <!-- focused -->
    <item android:state_hovered="true"
        >
        <color android:color="@color/colorPrimary"/></item>
    <item >
        <color android:color="#FFEB3B"/></item>
</selector>

5.Nine-Patch

用途: 一個可以自適應的的格式
官方文檔案解釋 :
A NinePatch是一種PNG圖片，您可以在其中定義當View中的內容超出正常圖片範圍時Android縮放的可拉伸區域。通常，您將這種類型的圖像分配為View的背景，該View的至少一個維度設置為"wrap_content"，並且當View增長以容納內容時，也會縮放Nine-Patch圖像以匹配View的大小。九補丁圖像的一個示例用法是Android標準Button小部件使用的背景，該背景必須伸展以容納按鈕內的文本（或圖像）。