在上一篇文章中, 我和大家介紹了 iOS 14 Widget 的基本內容, 了解了組成 Widget 的主要幾個組件. 這篇文章開始, 我會和大家一起對 Xcode 自帶的默認項目做一些優化, 讓大家更加深入的學習桌面 Widget.

如果需要了解上一篇內容, 可以查看?iOS 14 Widget 上手體驗.

為了提起大家的興趣, 我先展示一下完成這篇教程后, Widget 的效果圖:

問題分析

正如我們上篇文章介紹的, iOS 自帶的時鐘 Widget 示例項目, 有很多可以完善的地方. 比如: 時鐘 Widget 1個小時才刷新一次, 明顯不符合實用場景. 示例程序的界面也非常簡陋, 有很多優化空間.

優化改動

首先我們先來優化一下時鐘的顯示, Xcode 默認項目的時鐘只顯示了時和分, 并且1小時刷新1次, 我們先讓它能顯示到秒:

原代碼:

struct widgetEntryView : View {var entry: Provider.Entryvar body: some View {
? ? ? ?Text(entry.date, style: .time)
? ?}
}

改為:

struct widgetEntryView : View {var entry: Provider.Entry
? ?static let taskDateFormat: DateFormatter = {
? ? ? ? ? ?let formatter = DateFormatter()
? ? ? ? ? ?formatter.dateFormat = "HH:mm:ss"
? ? ? ? ? ?return formatter
? ?}()var body: some View {
? ? ? ?Text("\(entry.date, formatter: Self.taskDateFormat)")
? ?} ? ?
}

改動很簡單, 原項目中, 使用 SwiftUI 中 Text 組件的 .time 參數設置顯示風格, 我們改動后, 自定義了?DateFormatter?讓最終的顯示內容, 顯示到秒, 運行一下項目, 可以看到 Widget 的顯示內容改變了:

接下來我們再修改一下刷新時間, 這里我們只需要改兩處地方:

for hourOffset in 0 ..< 5 {
? ? ? ?let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!

改為:

for hourOffset in 0 ..< 60 {
? ? ? ? ? ?let entryDate = Calendar.current.date(byAdding: .second, value: hourOffset, to: currentDate)!

我們這里將 0 ..< 5 改為 0 ..< 60 , 表示一次填充 60個 Timeline 實例, 并且每個實例中把 .hour 改為 .second. 代表從每小時刷新一次變為每秒刷新.

再次運行項目, 你就會看的 Wdiget 上面的時鐘每秒都會更新了.

時鐘外觀

我們繼續對外觀做一些優化. 你還記得 Widget 添加界面中上面的標題嗎:

這里的標題寫的很隨意, 我們之前也提提到過, 可以很容易的修改它們:

StaticConfiguration(kind: kind, provider: Provider(), placeholder: PlaceholderView()) { entry inwidgetEntryView(entry: entry)
? ? ? ?}.configurationDisplayName("My Widget").description("This is an example widget.")

把 Widget 入口代碼最后兩行修改一下:

.configurationDisplayName("桌面時鐘").description("可以在桌面顯示的實時時鐘.")

再次運行項目:

嗯, 看起來好多了. 不過這個界面還是顯得有些簡陋. 我們繼續優化一下:

將?widgetEntryView?的 body 繼續修改:

var body: some View {
? ? ? ?Text("\(entry.date, formatter: Self.taskDateFormat)")
}

修改為:

var body: some View {ZStack {Image("bg").resizable().scaledToFill().edgesIgnoringSafeArea(.all)Text("\(entry.date, formatter: Self.taskDateFormat)").font(.system(size: 25)).foregroundColor(.white).padding(.top, 90)
? ? ? ?}
}

ZStack 是 SwiftUI 中的一種布局, 里面包含了兩個組件 Image 和 Text, 你可以理解為 ZStack 中的組件從下到上堆疊起來.

Image 在最下面, 給它設置了一個背景圖片.

Text 組件, 這次做了一些修改, 把它的字體, 文字顏色, 和位置重新設置了一下.

另外, Widget 下面會顯示 app 的名稱, 我們需要把主 app 的名稱重新設置一下:

Display Name?這里, 我們設置為"桌面時鐘". 重新運行項目, 你會看到下圖:

修改默認尺寸

桌面 Widget 默認支持3種尺寸, 我們在上篇文章中也展示過. 但作為時鐘應用, 我們只需要 1 種尺寸就夠了. 你可以這樣設置:

在我們之前的入口配置代碼最下面, 再加上一行

.configurationDisplayName("桌面時鐘").description("可以在桌面顯示的實時時鐘.").supportedFamilies([.systemSmall])

這樣, 我們再添加 Widget 的時候, 就只有 1種尺寸可供選擇:

這樣的選擇界面感覺完整多了吧.

完善 Placeholder 界面

最后還有一個事情, 還記得我們前面提到?placeholder?嗎, 現在如果你重新運行項目, 桌面上的 Widget 會在開始的幾秒內顯示這樣:

這是因為?placeholder?視圖, 我們還是用的初始項目提供的. 所以這個地方也需要修改:

struct PlaceholderView : View {
? ?var body: some View {Text("Placeholder View")
? ?}
}

修改為:

struct PlaceholderView : View {
? ?var body: some View {
? ? ? ?ZStack {
? ? ? ? ? ?Image("bg")
? ? ? ? ? ? ? ?.resizable()
? ? ? ? ? ? ? ?.scaledToFill()
? ? ? ? ? ? ? ?.edgesIgnoringSafeArea(.all)
? ? ? ?}
? ?}
}

我們把背景圖放到了?PlaceholderView?里面, 這樣在 Widget 初始加載的時候你看到的就是這樣的界面了:

總結

經過上面幾步修改后, 我們也做出了有點樣子的 Wdiget 了. 當然, 這依然是比較基礎的內容. 想用好 Widget, 你還要對 SwiftUI 有一定的了解. 如果大家感興趣, 我還會繼續為大家整理相關的內容. 也歡迎各位讀者提出寶貴意見.

這個示例項目的代碼已經上傳到 Github, 需要的朋友可以自取:

https://github.com/swiftcafex/widgetSample/tree/master

原創不易, 如果這篇文章你覺得對你有用, 可以分享,留言,或者提出寶貴建議, 都是作者很大的激勵.?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的桌面时钟代码_iOS 14 制作自己的桌面 Widget的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。