Android Studio 元件樣式

本篇使用UI編寫實作登入頁範例，針對元件細節進階研究。

【圖檔】

可提供不同解析度圖片，交由裝置自行判定；Android APP 使用圖片尺寸分別為1x、1.5x、2x、3x、4x，sketch 完成製作/設定後，可快速匯出所需的圖片尺寸。

原本於 drawable 資料夾內的FB圖片 “icon_fb.png”，可刪除不使用；drawable 資料夾則可用來放置 SVG 向量圖片。
承上，外部繪製的 SVG 圖檔，必須透過“匯入”轉成 .xml 格式，才能被系統讀取，特定檔名開頭為 ic_…，之後將 activity_main.xml 內圖檔名稱修改即可。

於drawable資料夾右鍵/New/Vector Asset/選擇檔案路徑並匯入

Android Studio 須另外新增資料夾，放置各種解析度圖片，與drawable 資料夾路徑相同，把 sketch 匯出的圖片各別移入對應的資料夾內，命名統一為 “icon_fb.png”，系統就可自動判定解析度選用圖片。
activity_main.xml 內的編寫方式不需做任何調整。

【樣式】

底線、框線樣式需另行編寫一份 .xml 文件進行套用，不同的樣式則需重新編寫，一個 APP 內若有許多不同樣式的按鈕，則 .xml 文件數量也會增加。

簡易按鈕樣式，單一層級情況下可直接使用 <shape> 來完成，包覆 <stroke>外框、<corners>圓角、<solid>填充等樣式元件即可。
底線、陰影為特殊樣式，使用 <layer-list> 包覆 <item>，類似層級堆疊的概念，可包覆數個 <item>，<item>可視為一個圖層，內容同樣會包覆單一層級使用的元件。
會員條款底線樣式，<item> 於背景偏移的方式編寫，由 android:background 背景屬性讀取，畫面所顯示的文字，可想像已預設好與四邊間距，在背景中設定的 <item> 樣式，只會將此範圍內容顯示於 APP 畫面，若超過此範圍邊界以外的樣式，APP 畫面則會隱藏。

<layer-list>
    <item
        android:top="-2dp"
        android:left="-2dp"
        android:right="-2dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
            <stroke
                android:width="1dp"
                android:color="#bdbdbd"/>
        </shape>
    </item>
</layer-list>

承上，設定 top、left、right 為 -2dp，意指此 <item> 向外推出邊界，欲隱藏三邊的框線，編寫出”底線”樣式；使用 -2dp 才可完全推至 <TextView> 預設邊界外。

底線也有其他編寫方法，如上述所提到的層級堆疊，使用兩個 <item> 編寫，後段 <item> 可覆蓋前段 <item>，如下範例所示，以上兩種做法皆可呈現相同效果。

<layer-list>
    <!-- 底層 -->
    <item>
        <shape>
            <solid android:color="#bdbdbd"/>
        </shape>
    </item>

    <!-- 上層距離底層 1dp -->
    <item android:bottom="1dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item>
</layer-list>

【按鈕狀態】

按鈕點擊效果，需使用圖片、或語法編寫每個狀態樣式，皆用 <selector> 包覆狀態樣式來完成，以下為使用圖片與編寫實作範例。

註冊按鈕為例，簡易使用背景圖片兩張，作為按鈕原始、按壓狀態樣式。
背景、文字的狀態改變需各別建立 .xml來完成，範例檔案為 registered_icon_png.xml (背景狀態)、text_blue.xml (文字顏色)。
最後由樣式屬性引用即可。
需注意圖檔禁止使用相同檔名(包含不同類型)，也無法使用屬性樣式來覆蓋。

屬性樣式引用registered_icon_png.xml (背景狀態)、text_blue.xml (文字顏色)

承上，為讓按鈕自適應裝置大小，使用第三方工具將圖檔直接匯出 nine patch 可用檔案。
接著把圖檔各別移入對應的解析度資料夾內，系統自動會完成讀取。

登入按鈕為例，編寫樣式同樣需新建 .xml，範例檔案為 radius_signin.xml (背景狀態)。
最外層 <item> 作為一種狀態使用，內 <layer-list> 再包覆 <item> 層級堆疊編寫樣式，層級關係與範例如下，最後由樣式屬性引用即可。

【官方套件】

以 <EditText> 效果為例，使用 Google 官方套件所使用的元件 <TextInputLayout>，可直接包覆於 <EditText> 外層，帶入更佳操作體驗效果，也提供一些基本屬性可運用，以下說明使用方式。

在 build.gradle 文件，dependencies 編碼內添加 implementation ‘com.google.android.material:material:1.0.0’；需要知道遠端的套件與版本，使用其他套件同樣須在此處添加。
然後就能在 activity_main.xml 內使用了，範例中 <EditText> 外層添加 <com.google.android.material.textfield.TextInputLayout> 即可套用效果。
需注意原本 <EditText> 的寬度、高度等相關屬性，需變更至套件 <TextInputLayout> 上，而 <EditText> 則為 “match_parent”。
套件已編寫部分程式功能，只需透過 .xml 屬性引用效果。

<!--暱稱-->
<LinearLayout
    style="@style/layout_enter">

    <!--<EditText>外層添加<TextInputLayout>-->
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="48dp">

    <EditText
        style="@style/layout_enter_text"
        android:hint="@string/en_prompt_name"/>
                    
    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        style="@style/layout_enter_prompt"
        android:text="@string/up_prompt_name"/>
</LinearLayout>