Android Studio 元件樣式

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

【圖檔】

放大畫面來看,圖右FB按鈕較清晰,系統可依解析度自動選用對應圖檔

可提供不同解析度圖片,交由裝置自行判定;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 內的編寫方式不需做任何調整。
圖左:本機資料夾新增;圖右:Android Studio自動判定。

【樣式】

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

圖左紅框內為<TextView>預設顯示範圍,圖右為框線偏移後結果
  • 簡易按鈕樣式,單一層級情況下可直接使用 <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各解析度
  • 承上,為讓按鈕自適應裝置大小,使用第三方工具將圖檔直接匯出 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>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *