iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
Mobile Development

新手學 Swift UI 與 Android Studio 的學習路程 -- 跟著我們一起踏上 App 開發之旅吧~系列 第 12

[Day12] 別再用預設字體跟顏色了~試著調出自己的風格吧!|自訂字體與顏色

  • 分享至 

  • xImage
  •  

前言

大家基本的排版都學的差不多了,現在將基本的字體及顏色改變吧~
這篇會一步步教大家如何使用自訂顏色及字體。
*(Xcode 13 適用)

大家在閱讀這篇前,可以先上網找找自己喜歡的字體以及顏色的色號。


自訂字體

首先將字體檔(.ttf)拉到左方的欄位。

這邊要將下方的三個都勾起來!(Add to target...)


這裡是字體的預覽圖

接著到 Targets > Info > 在 key 下方新增欄位,並打上:
Fonts provided by application


然後在 Value 處打上所新增字體的名稱(我這裡是 Minecraft.ttf)
p.s.上面圖片中檔名打錯了(是.ttf)大家也注意一下檔名是否正確!

打上程式碼後~

Text("New font !!!").font(Font.custom("字體檔名",size: 大小))//大家可以直接複製改檔名跟大小

接著就可以使用新的自訂字體啦~


自訂顏色

自訂顏色的部分比較簡單。
先在 Assest 中按右鍵 > 點 New Color Set

接著點擊色塊 > 右下方可以調整顏色(色碼或是直接拉色盤都可以)

這邊要使用顏色就依據所取的名稱而定。
這邊取名叫 "MM"

打上 code :

.foregroundColor(Color("顏色名稱"))

完成美麗的字體跟顏色啦~~

p.s. 字體的部分,先前的版本可能會需要手動到 info.plist 中去修改調整...


今天的教學筆記到這邊,大家多多自己試試看~~
謝謝大家~


上一篇
[Day11] 動起來吧 SwiftUI ~|SwiftUI Animation 的使用
下一篇
[Day13] 在頁面上方的 Tool Bar~|SwiftUI Tool Bar 的簡易使用
系列文
新手學 Swift UI 與 Android Studio 的學習路程 -- 跟著我們一起踏上 App 開發之旅吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言