在Android開發，除了使用現成的圖片資源，還可以透過XML直接定義簡單的圖形。不僅減少 App的體積，更能輕鬆實現圓角、漸層、邊框等客製化效果，我們今天就來簡單學習如何在Android Studio內自訂元件外觀吧( ᐛ )

如何建立Drawable Shape XML檔案？

1. 在Android Studio專案視窗中，找到res/drawable 資料夾
2. 在drawable 資料夾上按滑鼠右鍵，選擇 New > Drawable Resource File
3. 在彈出的視窗中，為你的檔案取一個名稱
4. 確認Root element 為 shape，然後點擊 OK
5. 現在你可以在這個 XML 檔案中定義你的圖形了 :))

Shape XML

shape

定義圖形，最重要的屬性是android:shape用來決定圖形的基本樣貌

• rectangle：矩形
• oval：橢圓形
• line：線條 (需要搭配 stroke 使用)
• ring：環形

solid

用來設定圖形的實心填充顏色

• android:color：設定填充的顏色碼 (例如 #FFFFFF 或 @color/…)

stroke

用來定義圖形的邊框

• android:width：邊框的寬度
• android:color：邊框的顏色
• android:dashWidth：虛線的寬度
• android:dashGap：虛線之間的間距

corners

用來為矩形設定圓角

• android:radius：為四個角設定相同的圓角半徑
• android:topLeftRadius：只設定左上角的圓角半徑
• android:topRightRadius：只設定右上角的圓角半徑
• android:bottomLeftRadius：只設定左下角的圓角半徑
• android:bottomRightRadius：只設定右下角的圓角半徑

gradient

讓你的圖形擁有豐富的漸層色彩，可以取代單調的 solid

• android:type：漸層類型(linear(預設), radial, sweep)
• android:startColor：漸層的起始顏色
• android:centerColor：漸層的中間顏色(可以不用)
• android:endColor：漸層的結束顏色
• android:angle：線性漸層的角度(必須是 45 的倍數，0、45、90……)

size

用來設定圖形的固定大小

• android:width：圖形的寬度
• android:height：圖形的高度

範例

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 定義形狀，這邊設定的是矩形
    設定圓形可以先定義橢圓大小都設定一樣就會變圓形了 :)   -->

    <size
        android:width="15dp"
        android:height="15dp" />
    <!-- 設定大小-->

    <solid android:color="#你想設定的色碼" />
    <!-- 設定填充顏色 -->

    <stroke
        android:width="邊框大小XXdp"
        android:color="#你想設定的色碼" />
    <!-- 設定邊框 -->

</shape>

關於自訂元件的部分就先介紹到這裡，明天會來介紹SeekBar，明天見(⁰▿⁰)