自訂元件樣式 style 及Downloadable Fonts 輕鬆更換 APP 樣式

By | 2018-01-10

一般我們在制定畫面時,欄位屬性 font size、color、padding…. 大部份直接設定在 layout (.xml)上,隨著 APP 愈來愈複雜、畫面愈來愈多,整支APP要保持相同的風格 (style)是愈來愈難,畫到第 20個 layout 時,你還記得前面的字體、間距、大小、顏色嗎?萬一整支 APP 都完成了,客戶要求更改字體大小、字型、背景顏色、字體顏色、按鍵大小、按鍵顏色、輸入框樣式…….. OMG!光想到那一堆 layout、一堆 component 根本不想面對。

如果可以像Web Site CSS 一樣,在 APP 開發初期,即規劃各個元件顯示樣式該有多好?

這一篇文章,將介紹 :

  1. 如何使用 style 簡化元件樣式,讓整支 APP 風格統一,增加 component style 可維護性及可擴充性。
  2. 還有 Android Support Library v26 特有的 Downloadable Fonts 功能,日後將不受限於Android 內建字體,也可以讓 APP 字體顯示多樣化了。

新增字體

本例使用TextView。選取FontFamily -> More Fonts…

預設 Source 為 Google Fonts,左側選單選取字體,右方字體下載方式,選取Create downloadables font即可。

按下確定後,會多出三個檔案如下圖:

AndroidManifest.xml 則會多出一段meta-data

上述步驟採用 Android Studio tool 完成 Google Fonts 設定,故新增的三個檔案,可先暫時不須管它加了哪些內容,有興趣了解如何手動設定的朋友,請參考官網。

現在已經完成字體設定了,是不是很簡單呢?接下來要開始設定元件屬性。

自訂元件屬性

此例在TextView裡設定寬、高、字體大小、顏色等屬性,設定屬性如下圖:

新增為 Style

元件樣式調整好後,在元件上按滑鼠右鍵,選取Refactor -> Extract Style…

輸入 Style name: 並且勾選 Launch ‘Use Style Where Possible’ refactoring after the style is extracted。

該 TextView 即會在完成 refactor 後套用 style

並且在 res/values/styles.xml 內會多出一段 style設定,如下圖:

元件套用 Style

在畫面新增一TextView,只要設定 style 屬性,選取或輸入style name,即可輕鬆套用已經設定的style。

擴充 Style

倘若欲為新TextView更改大小、加上底色,和既有的style很像,但又不想影響原有的TextView?

很簡單,只要新增一個新的 style name = text_title2,設 parent=text_title,即可繼承 text_title 原有屬性,接著,只要加入新的屬性,和欲覆蓋的屬性,這樣就完成一個新的 style : text_title2了。

在這裡,我們多了一些額外參數,這些值可供其他 style 重複使用。

輕鬆客製化元件

接著只要套用 style 為 text_title2,就輕鬆完成客製化元件了。

日後,倘若客戶要求更換元件樣式,只要設定style,就可將相同性質元件一次換膚囉~

版權聲明

本文章版權為郭香宜所有,授權範圍僅限綠豆湯網站使用,除Facebook之類社群等未更改本文章出處之分享行為不在此限,其他個人或公司未經作者同意,不得任意將本文章內容轉載至其他網站,或以任何形式重製,為以免觸犯著作權法,請尊重作者之智慧財產權。

相關文章:

發表迴響

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