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

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

一般我們在制定畫面時,欄位屬性 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之類社群等未更改本文章出處之分享行為不在此限,其他個人或公司未經作者同意,不得任意將本文章內容轉載至其他網站,或以任何形式重製,為以免觸犯著作權法,請尊重作者之智慧財產權。

相關文章:

發佈留言

×
×

Cart