💈CircleText

在文字外面加一個有顏色的圓圈，圓圈會隨著文字變大而變大。

設計重點

• 在一開始佈局的時候，請 Text 回報自己的「最大邊」(定義在：🌀 GeometryProxy + 🅿️ Rectangular) 給 MaxSide (🅿️ PreferenceKey)，然後 CircleText 再透過 .onPreferenceChange()，用回報來的值更新自己的 maxSide @State 變數，進一步推動 Text 更新自己的 frame。

程式碼

💈 範例

// live view
struct ContentView: View {
    var body: some View {
        HStack {
            
            Group {
                CircleText("Hello, World")           // 🌅 CircleText
                CircleText("Hello", color: .blue)
            }// Group
                // ⭐️ 這裡可以確定 CircleText's frame 已經包含整個圓。
                .border(Color.black)
            
        }// HStack (container)
            .padding()
            .background(Color.gray)
            .shadow(radius: 8).shadow(radius: 8)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

🌅 CircleText

// 🌅 CircleText
struct CircleText: View {
    
    // ⭐️ Text 回報的最大邊長
    @State private var maxSide: CGFloat?
    
    // local variables
    let text : String         // text of Text
    let color: Color          // bg color of Text
    
    // init
    init(_ text: String, color: Color = .pink) {
        self.text  = text
        self.color = color
    }
    
    // view body
    var body: some View {
        
        Text(text).padding()
            
            // ⭐️ 1. set (optional) frame
            .frame(width: maxSide, height: maxSide)
            // ⚠️ 2. 要先設定好 frame 再加上 Circle，不然 Circle 只有
            //       Text + padding 的高度 ‼️
            .background(Circle().fill(color))
            
            // ⭐️ 3. 回報自己的「最大邊」給 📦 MaxSide
            //       - report(to:): 🌀View + pref
            //       - $0.maxSide : 🌀GeometryProxy + 🅿️Rectangular
            .report(to: MaxSide.self) { $0.maxSide }
            
            // ⭐️ 4. 母視圖根據回報的值，更新自己的 @State 變數 `maxSide`
            .onPreferenceChange(MaxSide.self) { self.maxSide = $0 }
    }
}

📦 MaxSide

// ⭐️ PreferenceKey 所取的名字最好是跟母視件的 @State 變數一致，例如：
//    此例要找的是 Text 的最大邊，所以取 CircleText 的 @State 變數
//    名為： `maxSide`，而這個 PreferenceKey 就取名為: `MaxSide`。
typealias MaxSide = FirstNonNil<CGFloat>      // 📦 FirstNonNil<T>

👥 相關

• 🅿️ PreferenceKey (FirstNonNil) ⭐️
• 🌀View + pref
• 🅿️ Rectangular
• 🌀 GeometryProxy

📘 參考

• Thinking in Swift, Ch. 5 - Custom Layout p.91, Preferences and GeometryReaders

修改記錄

✏️ 紀錄

• 初版

• 2020.10.15：

  • 將 SizePreferenceKey 改為 generic FirstNonNil<T>
  • 新增 generic view.report(to: key) {...} 統一各種 view.report 函數。

初版

/*
 * Required:
 * - 🌀CGRect + .frame
 * - 🌀GeometryProxy + 🅿️ Rectangular
 */
 
import SwiftUI
import PlaygroundSupport
 
// ⭐️ custom preference key
struct SizePreferenceKey: PreferenceKey {
    // default value
    static let defaultValue: CGSize? = nil
    // combine values from different child views
    static func reduce(value: inout CGSize?, nextValue: () -> CGSize?) {
        value = value ?? nextValue()   // nil or first non-nil value
    }
}

// 🌅 CircleText
struct CircleText: View {
    
    // ⭐️ Text's favorite size (a square)
    @State private var size: CGSize?
    
    // local variables
    let text : String         // text of Text
    var color: Color = .pink  // bg color of Text
    
    // view body
    var body: some View {
        Text(text)
            .padding()
            // ⭐️ 1. set optional frame (🌀CGRect + .frame)
            .frame(size)
            // ⭐️ 2. set bg color
            .background(GeometryReader { geo in  // ⭐️ 3. read Text's size
                self.color
                    // ⭐️ 4. set preference:
                    //       tell parent view its favorite size (a square)
                    //     - 🌀GeometryProxy + 🅿️ Rectangular
                    .preference(key: SizePreferenceKey.self, value: geo.boundingSquare.size)
            })
            .clipShape(Circle())
            // ⭐️ 5. parent view update itself in response to the preference change
            .onPreferenceChange(SizePreferenceKey.self) { self.size = $0 }
    }
}

// live view
struct ContentView: View {
    var body: some View {
        HStack {
            Group {
                // 🌅 CircleText
                CircleText(text: "Hello, World")
                CircleText(text: "Hello", color: .blue)
            }// Group
                .border(Color.black)
        }// HStack (container)
            .padding()
            .background(Color.gray)
            .shadow(radius: 8).shadow(radius: 8)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

2020.10.15

/*
 * ⭐️ Required:
 * - 🌀GeometryProxy + 🅿️Rectangular
 * - 📦FirstNonNil
 * - 🌀View + pref
 */

import SwiftUI
import PlaygroundSupport

// ⭐️ PreferenceKey 所取的名字最好是跟 parent view 內的 @State 變數一致，
//    如此語意的表現會更好，例如：
//    這個例子要取的是 child view (Text) 長寬中的最大邊，所以我們將
//    parent view (CircleText) 的 @State 變數取名為：
//    -  `maxSide`，
//    因此，我們將這個 PreferenceKey 取名為:
//    -  `MaxSide`。
typealias MaxSide = FirstNonNil<CGFloat>      // 📦 FirstNonNil

// 🌅 CircleText
struct CircleText: View {
    
    // ⭐️ Text 回報的最大邊長
    @State private var maxSide: CGFloat?
    
    // local variables
    let text : String         // text of Text
    let color: Color          // bg color of Text
    
    // init
    init(_ text: String, color: Color = .pink) {
        self.text  = text
        self.color = color
    }
    
    // view body
    var body: some View {
        
        Text(text).padding()
            
            // ⭐️ 1. set (optional) frame
            .frame(width: maxSide, height: maxSide)
            // ⚠️ 2. 要先設定好 frame 再加上 Circle，不然 Circle 只有
            //       Text + padding 的高度 ‼️
            .background(Circle().fill(color))
            
            // ⭐️ 3. 回報自己的「最大邊」給 MaxSide
            //       - report(to:): 🌀View + pref
            //       - $0.maxSide : 🌀GeometryProxy + 🅿️Rectangular
            .report(to: MaxSide.self) { $0.maxSide }
            
            // ⭐️ 4. 母視圖根據回報的值，更新自己的 @State 變數 `maxSide`
            .onPreferenceChange(MaxSide.self) { self.maxSide = $0 }
    }
}

// live view
struct ContentView: View {
    var body: some View {
        HStack {
            
            Group {
                CircleText("Hello, World")           // 🌅 CircleText
                CircleText("Hello", color: .blue)
            }// Group
                // ⭐️ 這裡可以確定 CircleText's frame 已經包含整個圓。
                .border(Color.black)
            
        }// HStack (container)
            .padding()
            .background(Color.gray)
            .shadow(radius: 8).shadow(radius: 8)
    }
}

PlaygroundPage.current.setLiveView(ContentView())