Tận dụng tối đa tính năng Xcode Preview của SwiftUI.

Thứ Ba, 09/06/2020

Tram Ho

Dựa theo yêu cầu của đa số developer mà chức năng Preview của SwiftUI đã được giới thiệu trong Xcode 11 , cung cấp một cách mới để xây dựng UI dễ sử dụng, hiệu quả hơn.
Trong bài viết này này chúng ta hãy cùng nghiên cứu một vài kỹ thuật, mô hình và cách triển khai UI dựa trên tính năng này.

1/ Screens, components, and interactivity:

Khi xây dựng một UI cụ thể để tiện lợi cho việc phân tách các chế độ view khác nhau của chúng ta có hai thành phần chính – screen và các compenent. Mỗi loại đểu có thể chứa nhiều thành phần con và có thể tái sử dụng.
Chúng ta sử dụng SwiftUI để build component có thể tái sử dụng như sau:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRow</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> title<span class="token punctuation">:</span> <span class="token builtin">String</span>
    <span class="token keyword">var</span> description<span class="token punctuation">:</span> <span class="token builtin">String</span>

    <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">VStack</span><span class="token punctuation">(</span>alignment<span class="token punctuation">:</span> <span class="token punctuation">.</span>leading<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">Text</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span>
            <span class="token function">Text</span><span class="token punctuation">(</span>description<span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token punctuation">.</span>secondary<span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">font</span><span class="token punctuation">(</span><span class="token punctuation">.</span>footnote<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

struct ReminderRow: View {

var title: String

var description: String

var body: some View {

VStack(alignment: .leading) {

Text(title)

Text(description)

.foregroundColor(.secondary)

.font(.footnote)

}

Để khởi động Preview mode chúng ta phải xác định loại thành phần phù hợp với protocol PreviewProvider:

#<span class="token keyword">if</span> <span class="token constant">DEBUG</span>
<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
#endif

#if DEBUG

struct ReminderRowPreview: PreviewProvider {

static var previews: some View {

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews"

)

}

#endif

Điều thú vị là hệ thống xem trước Xcode, sử dụng cùng một API giống như DSL mà SwiftUI sử dụng, nó mang lại cho chúng tôi rất nhiều sức mạnh và tính linh hoạt khi nói đến cách chúng tôi thiết lập các bản xem trước khác nhau trong cơ sở mã của mình.

Tuy nhiên, việc triển khai ReminderRow ở trên hiện tại khá đơn giản và chỉ dựa vào dữ liệu chỉ đọc có thể dễ dàng chuyển vào trình khởi tạo của nó – nhưng nếu nó cần tương tác nhiều hơn một chút thì sao? Ví dụ: hãy để Lừa nói rằng chúng tôi muốn thêm Chuyển đổi vào hàng của mình, để cho phép người dùng của chúng tôi dễ dàng đánh dấu một lời nhắc đã cho là đã hoàn thành:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRow</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> title<span class="token punctuation">:</span> <span class="token builtin">String</span>
    <span class="token keyword">var</span> description<span class="token punctuation">:</span> <span class="token builtin">String</span>
    @<span class="token builtin">Binding</span> <span class="token keyword">var</span> isCompleted<span class="token punctuation">:</span> <span class="token builtin">Bool</span>

    <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">Toggle</span><span class="token punctuation">(</span>isOn<span class="token punctuation">:</span> $isCompleted<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">VStack</span><span class="token punctuation">(</span>alignment<span class="token punctuation">:</span> <span class="token punctuation">.</span>leading<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">Text</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span>
                <span class="token function">Text</span><span class="token punctuation">(</span>description<span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token punctuation">.</span>secondary<span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">font</span><span class="token punctuation">(</span><span class="token punctuation">.</span>footnote<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

var title: String

var description: String

@Binding var isCompleted: Bool

var body: some View {

Toggle(isOn: $isCompleted) {

Text(title)

Text(description)

}

}.padding()

}

Chúng ta sử dụng Binding để thiết lập kết nối 2 chiều giữa ReminderRow và bất kỳ thành phần chứa nó. Sử dụng API .constant cho phép chúng ta pass qua một giá trị không đổi :

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
            isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">constant</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

isCompleted: .constant(false)

)

}

Các binding có những quy chuẩn khá nghiêm ngặt và thường ngăn chúng ta tương tác với UI người dùng khi chúng ta Preview.
Cách để khắc phục vấn đề đó là thay vào API Binding để tạo các Preview:

<span class="token keyword">extension</span> <span class="token builtin">Binding</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">func</span> <span class="token function">mock</span><span class="token punctuation">(</span><span class="token number">_</span> value<span class="token punctuation">:</span> <span class="token builtin">Value</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token keyword">Self</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> value <span class="token operator">=</span> value
        <span class="token keyword">return</span> <span class="token function">Binding</span><span class="token punctuation">(</span><span class="token keyword">get</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> value <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> value <span class="token operator">=</span> $<span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

extension Binding {

static func mock(_ value: Value) -> Self {

var value = value

return Binding(get: { value }, set: { value = $0 })

}

Với điều trên chúng ta có thể quay lại triển khai ReminderRowPreview làm cho nó tương tác hoàn toàn bằng cách thay thế .constant bằng .mock:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
            isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

isCompleted: .mock(false)

)

}

2/Specific environments:

Tiếp theo chúng ta hãy xem cách sửa đổi một component cho phép chúng ta preview cách thức hoạt động của nó trong các điều kiện mô phỏng khác nhau.
Hãy để sử dụng .colorScheme tích hợp để xem trước ReminderRow sẽ trông như thế nào khi được hiển thị trên một device mà chạy ở chế độ darkmode :

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
   <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
       <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
           title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
           description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
           isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
       <span class="token punctuation">)</span>
       <span class="token punctuation">.</span><span class="token function">colorScheme</span><span class="token punctuation">(</span><span class="token punctuation">.</span>dark<span class="token punctuation">)</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

)

.colorScheme(.dark)

}

Có hai cách chính để giải quyết vấn đề trên, một cách là nhúng component ReminderRow vào một container chẳng hạn như NavigationView trước khi preview. Đồng thời ẩn thanh điều hướng container thì component của chúng ta vẫn sẽ được hiển thị bằng cách sử dụng cùng layout như trước:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token builtin">NavigationView</span> <span class="token punctuation">{</span>
            <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
                title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
                description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
                isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
            <span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">navigationBarTitle</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">navigationBarHidden</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span><span class="token function">colorScheme</span><span class="token punctuation">(</span><span class="token punctuation">.</span>dark<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

NavigationView {

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

)

.navigationBarTitle("")

.navigationBarHidden(true)

}

Một cách khác không liên quan đến việc thêm vào navigation stack sẽ là cung cấp cho compenent của chúng ta một background color rõ ràng .Nếu chúng ta sử dụng API systemBackground trên UIColor thì chúng ta có thể mô phỏng compennet:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
            isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">background</span><span class="token punctuation">(</span><span class="token function">Color</span><span class="token punctuation">(</span><span class="token builtin">UIColor</span><span class="token punctuation">.</span>systemBackground<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">colorScheme</span><span class="token punctuation">(</span><span class="token punctuation">.</span>dark<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

)

.background(Color(UIColor.systemBackground))

}

Tuy nhiên với bảng màu mà bản preview của chúng ta được hiển thị bằng cách sử dụng một trong nhiều enviroment paramater khác nhau mà chúng ta có thể sử dụng:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
            isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">previewDevice</span><span class="token punctuation">(</span><span class="token string">"iPhone 11"</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">environment</span><span class="token punctuation">(</span><span class="token punctuation">.</span>sizeCategory<span class="token punctuation">,</span> <span class="token punctuation">.</span>accessibilityExtraExtraExtraLarge<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

)

.previewDevice("iPhone 11")

.environment(.sizeCategory, .accessibilityExtraExtraExtraLarge)

}

3/Group, iterations, and convenience APIs:

Giống như các chế độ xem SwiftUI nhiều chế độ preview có thể được nhóm vào một vùng API group. Trong tính năng preview Xcode, các group như vậy được xử lý theo cách đặc biệt vì hệ thống sẽ tạo một bản preview riêng cho từng thành phần trong group cho phép chúng ta dễ dàng preview nhiều màn hình cùng lúc.
Cách thức chúng ta có thể nhanh chóng preview ReminderRow sẽ như thế nào khi được hiển thị ở cả chế độ light và dark bằng cách sử dụng một PreviewProvider duy nhất:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> row <span class="token operator">=</span> <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
            isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">previewLayout</span><span class="token punctuation">(</span><span class="token punctuation">.</span>sizeThatFits<span class="token punctuation">)</span>

        <span class="token keyword">return</span> <span class="token builtin">Group</span> <span class="token punctuation">{</span>
            row

            row<span class="token punctuation">.</span><span class="token function">background</span><span class="token punctuation">(</span><span class="token function">Color</span><span class="token punctuation">(</span><span class="token builtin">UIColor</span><span class="token punctuation">.</span>systemBackground<span class="token punctuation">)</span><span class="token punctuation">)</span>
               <span class="token punctuation">.</span><span class="token function">colorScheme</span><span class="token punctuation">(</span><span class="token punctuation">.</span>dark<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

let row = ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

)

.previewLayout(.sizeThatFits)

return Group {

row

row.background(Color(UIColor.systemBackground))

}

Chúng ta sẽ cần một vài extension giúp chúng ta gắn nhãn cho mỗi bản preview mà chúng ta sẽ tạo ra. Trong trường hợp này, chúng ta sẽ kết hợp từng ColorScheme c với các giá trị ContentSizeC Category nhỏ nhất và lớn nhất:

<span class="token keyword">extension</span> <span class="token builtin">ColorScheme</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> previewName<span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token punctuation">{</span>
        <span class="token function">String</span><span class="token punctuation">(</span>describing<span class="token punctuation">:</span> <span class="token keyword">self</span><span class="token punctuation">)</span><span class="token punctuation">.</span>capitalized
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">extension</span> <span class="token builtin">ContentSizeCategory</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">let</span> smallestAndLargest <span class="token operator">=</span> <span class="token punctuation">[</span>allCases<span class="token punctuation">.</span><span class="token builtin">first</span><span class="token operator">!</span><span class="token punctuation">,</span> allCases<span class="token punctuation">.</span><span class="token builtin">last</span><span class="token operator">!</span><span class="token punctuation">]</span>

    <span class="token keyword">var</span> previewName<span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token punctuation">{</span>
        <span class="token keyword">self</span> <span class="token operator">==</span> <span class="token keyword">Self</span><span class="token punctuation">.</span>smallestAndLargest<span class="token punctuation">.</span><span class="token builtin">first</span> <span class="token operator">?</span> <span class="token string">"Small"</span> <span class="token punctuation">:</span> <span class="token string">"Large"</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

extension ColorScheme {

var previewName: String {

String(describing: self).capitalized

}

extension ContentSizeCategory {

static let smallestAndLargest = [allCases.first!, allCases.last!]

var previewName: String {

self == Self.smallestAndLargest.first ? "Small" : "Large"

}

Tiếp theo hãy cho extension ForEachbằng cách sử dụng SwiftUI, ForEach với các raw value.

<span class="token keyword">extension</span> <span class="token builtin">ForEach</span> <span class="token keyword">where</span> <span class="token builtin">Data</span><span class="token punctuation">.</span><span class="token builtin">Element</span><span class="token punctuation">:</span> <span class="token builtin">Hashable</span><span class="token punctuation">,</span> <span class="token constant">ID</span> <span class="token operator">==</span> <span class="token builtin">Data</span><span class="token punctuation">.</span><span class="token builtin">Element</span><span class="token punctuation">,</span> <span class="token builtin">Content</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">init</span><span class="token punctuation">(</span>values<span class="token punctuation">:</span> <span class="token builtin">Data</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> @escaping <span class="token punctuation">(</span><span class="token builtin">Data</span><span class="token punctuation">.</span><span class="token builtin">Element</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token builtin">Content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">self</span><span class="token punctuation">.</span><span class="token keyword">init</span><span class="token punctuation">(</span>values<span class="token punctuation">,</span> id<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token keyword">self</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> content<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

extension ForEach where Data.Element: Hashable, ID == Data.Element, Content: View {

init(values: Data, content: @escaping (Data.Element) -> Content) {

self.init(values, id: .self, content: content)

}

Chúng ta có thể bắt đầu xây dựng các bảncustom để tạo nhiều bản preview. Tạo một component để preivew các thành phần riêng lẻ bằng cách bật chế độ xemColorScheme ContentSizeC Category chúng ta đã xác định ở trên và thiết lập từng bảnpreview tương ứng:

<span class="token keyword">struct</span> <span class="token builtin">ComponentPreview</span><span class="token operator">&lt;</span><span class="token builtin">Component</span><span class="token punctuation">:</span> <span class="token builtin">View</span><span class="token operator">&gt;</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> component<span class="token punctuation">:</span> <span class="token builtin">Component</span>

    <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ForEach</span><span class="token punctuation">(</span>values<span class="token punctuation">:</span> <span class="token builtin">ColorScheme</span><span class="token punctuation">.</span>allCases<span class="token punctuation">)</span> <span class="token punctuation">{</span> scheme <span class="token keyword">in</span>
            <span class="token function">ForEach</span><span class="token punctuation">(</span>values<span class="token punctuation">:</span> <span class="token builtin">ContentSizeCategory</span><span class="token punctuation">.</span>smallestAndLargest<span class="token punctuation">)</span> <span class="token punctuation">{</span> category <span class="token keyword">in</span>
                <span class="token keyword">self</span><span class="token punctuation">.</span>component
                    <span class="token punctuation">.</span><span class="token function">previewLayout</span><span class="token punctuation">(</span><span class="token punctuation">.</span>sizeThatFits<span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">background</span><span class="token punctuation">(</span><span class="token function">Color</span><span class="token punctuation">(</span><span class="token builtin">UIColor</span><span class="token punctuation">.</span>systemBackground<span class="token punctuation">)</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">colorScheme</span><span class="token punctuation">(</span>scheme<span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">environment</span><span class="token punctuation">(</span><span class="token punctuation">.</span>sizeCategory<span class="token punctuation">,</span> category<span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">previewDisplayName</span><span class="token punctuation">(</span>
                        <span class="token string">"<span class="token interpolation"><span class="token delimiter variable">(</span>scheme<span class="token punctuation">.</span>previewName<span class="token delimiter variable">)</span></span> + <span class="token interpolation"><span class="token delimiter variable">(</span>category<span class="token punctuation">.</span>previewName<span class="token delimiter variable">)</span></span>"</span>
                    <span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

struct ComponentPreview<Component: View>: View {

var component: Component

var body: some View {

ForEach(values: ColorScheme.allCases) { scheme in

ForEach(values: ContentSizeCategory.smallestAndLargest) { category in

self.component

.colorScheme(scheme)

.previewDisplayName(

"(scheme.previewName) + (category.previewName)"

)

}

Hãy tạo một API extension cho phép chúng ta dễ dàng tạo bản preview component cho bất kỳ chế độ nào:

<span class="token keyword">extension</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">func</span> <span class="token function">previewAsComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ComponentPreview</span><span class="token punctuation">(</span>component<span class="token punctuation">:</span> <span class="token keyword">self</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

extension View {

func previewAsComponent() -> some View {

ComponentPreview(component: self)

}

Bây giờ chúng ta có thể quay lại ReminderRowPreview và tạo ra 4 bảnpreiview khác nhau bằng cách gọi API previewAsComponent mới:

<span class="token keyword">struct</span> <span class="token builtin">ReminderRowPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ReminderRow</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token string">"Write weekly article"</span><span class="token punctuation">,</span>
            description<span class="token punctuation">:</span> <span class="token string">"Think it'll be about Xcode Previews"</span><span class="token punctuation">,</span>
            isCompleted<span class="token punctuation">:</span> <span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">previewAsComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReminderRow(

title: "Write weekly article",

description: "Think it'll be about Xcode Previews",

)

.previewAsComponent()

}

Chúng ta có được cái nhìn toàn diện hơn về UI của mình, đặc biệt nếu chúng tacũng kết hợp danh sách các thiết bị đó với tất cả các olorScheme:

<span class="token keyword">struct</span> <span class="token builtin">ScreenPreview</span><span class="token operator">&lt;</span><span class="token builtin">Screen</span><span class="token punctuation">:</span> <span class="token builtin">View</span><span class="token operator">&gt;</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> screen<span class="token punctuation">:</span> <span class="token builtin">Screen</span>

    <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ForEach</span><span class="token punctuation">(</span>values<span class="token punctuation">:</span> deviceNames<span class="token punctuation">)</span> <span class="token punctuation">{</span> device <span class="token keyword">in</span>
            <span class="token function">ForEach</span><span class="token punctuation">(</span>values<span class="token punctuation">:</span> <span class="token builtin">ColorScheme</span><span class="token punctuation">.</span>allCases<span class="token punctuation">)</span> <span class="token punctuation">{</span> scheme <span class="token keyword">in</span>
                <span class="token builtin">NavigationView</span> <span class="token punctuation">{</span>
                    <span class="token keyword">self</span><span class="token punctuation">.</span>screen
                        <span class="token punctuation">.</span><span class="token function">navigationBarTitle</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span>
                        <span class="token punctuation">.</span><span class="token function">navigationBarHidden</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
                <span class="token punctuation">.</span><span class="token function">previewDevice</span><span class="token punctuation">(</span><span class="token function">PreviewDevice</span><span class="token punctuation">(</span>rawValue<span class="token punctuation">:</span> device<span class="token punctuation">)</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">colorScheme</span><span class="token punctuation">(</span>scheme<span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">previewDisplayName</span><span class="token punctuation">(</span><span class="token string">"<span class="token interpolation"><span class="token delimiter variable">(</span>scheme<span class="token punctuation">.</span>previewName<span class="token delimiter variable">)</span></span>: <span class="token interpolation"><span class="token delimiter variable">(</span>device<span class="token delimiter variable">)</span></span>"</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">navigationViewStyle</span><span class="token punctuation">(</span><span class="token function">StackNavigationViewStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">private</span> <span class="token keyword">var</span> deviceNames<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token builtin">String</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
        <span class="token punctuation">[</span>
            <span class="token string">"iPhone 8"</span><span class="token punctuation">,</span>
            <span class="token string">"iPhone 11"</span><span class="token punctuation">,</span>
            <span class="token string">"iPhone 11 Pro Max"</span><span class="token punctuation">,</span>
            <span class="token string">"iPad (7th generation)"</span><span class="token punctuation">,</span>
            <span class="token string">"iPad Pro (12.9-inch) (4th generation)"</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">extension</span> <span class="token builtin">View</span> <span class="token punctuation">{</span>
    <span class="token keyword">func</span> <span class="token function">previewAsScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">ScreenPreview</span><span class="token punctuation">(</span>screen<span class="token punctuation">:</span> <span class="token keyword">self</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

struct ScreenPreview<Screen: View>: View {

var screen: Screen

var body: some View {

ForEach(values: deviceNames) { device in

NavigationView {

self.screen

}

.previewDevice(PreviewDevice(rawValue: device))

.colorScheme(scheme)

.previewDisplayName("(scheme.previewName): (device)")

.navigationViewStyle(StackNavigationViewStyle())

}

private var deviceNames: [String] {

[

"iPhone 8",

"iPhone 11",

"iPhone 11 Pro Max",

"iPad (7th generation)",

"iPad Pro (12.9-inch) (4th generation)"

]

}

extension View {

func previewAsScreen() -> some View {

ScreenPreview(screen: self)

}

4/Previews are not just for SwiftUI views

Cuối cùng chúng ta hãy xem cách có thể sử dụng tính năng Xcode preview miễn phí để lặp lại các chế độ xem không được xây dựng bằng SwiftUI mà sử dụng UIKit, Core Animation hoặc AppKit.
Tạo các loại cầu nối cụ thể cho các chế độ xem riêng hoặc các controller :

@<span class="token function">available</span><span class="token punctuation">(</span>iOS <span class="token number">13</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token punctuation">)</span>
<span class="token keyword">struct</span> <span class="token builtin">SchedulingView</span><span class="token punctuation">:</span> <span class="token builtin">UIViewControllerRepresentable</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> schedule<span class="token punctuation">:</span> <span class="token builtin">Schedule</span>

    <span class="token keyword">func</span> <span class="token function">makeUIViewController</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> <span class="token builtin">Context</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token builtin">SchedulingViewController</span> <span class="token punctuation">{</span>
        <span class="token function">SchedulingViewController</span><span class="token punctuation">(</span>schedule<span class="token punctuation">:</span> schedule<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">func</span> <span class="token function">updateUIViewController</span><span class="token punctuation">(</span><span class="token number">_</span> uiViewController<span class="token punctuation">:</span> <span class="token builtin">SchedulingViewController</span><span class="token punctuation">,</span>
                                context<span class="token punctuation">:</span> <span class="token builtin">Context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// We don’t need to write any update code in this case.</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

@<span class="token function">available</span><span class="token punctuation">(</span>iOS <span class="token number">13</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token punctuation">)</span>
<span class="token keyword">struct</span> <span class="token builtin">SchedulingViewPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">SchedulingView</span><span class="token punctuation">(</span>schedule<span class="token punctuation">:</span> <span class="token function">Schedule</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

@available(iOS 13, *)

struct SchedulingView: UIViewControllerRepresentable {

var schedule: Schedule

func makeUIViewController(context: Context) -> SchedulingViewController {

SchedulingViewController(schedule: schedule)

}

func updateUIViewController(_ uiViewController: SchedulingViewController,

context: Context) {

// We don’t need to write any update code in this case.

}

struct SchedulingViewPreview: PreviewProvider {

SchedulingView(schedule: Schedule())

}

Hãy tạo ra một bản extension nữa cho phép bất kỳ UIViewController nào cũng dễ dàng được chuyển thành bản preview SwiftUI như sau:

<span class="token keyword">extension</span> <span class="token builtin">UIViewController</span> <span class="token punctuation">{</span>
    @<span class="token function">available</span><span class="token punctuation">(</span>iOS <span class="token number">13</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token punctuation">)</span>
    <span class="token keyword">private</span> <span class="token keyword">struct</span> <span class="token builtin">Preview</span><span class="token punctuation">:</span> <span class="token builtin">UIViewControllerRepresentable</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> viewController<span class="token punctuation">:</span> <span class="token builtin">UIViewController</span>

        <span class="token keyword">func</span> <span class="token function">makeUIViewController</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> <span class="token builtin">Context</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token builtin">UIViewController</span> <span class="token punctuation">{</span>
            viewController
        <span class="token punctuation">}</span>

        <span class="token keyword">func</span> <span class="token function">updateUIViewController</span><span class="token punctuation">(</span><span class="token number">_</span> uiViewController<span class="token punctuation">:</span> <span class="token builtin">UIViewController</span><span class="token punctuation">,</span>
                                    context<span class="token punctuation">:</span> <span class="token builtin">Context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// No-op</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    @<span class="token function">available</span><span class="token punctuation">(</span>iOS <span class="token number">13</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token punctuation">)</span>
    <span class="token keyword">func</span> <span class="token function">asPreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">Preview</span><span class="token punctuation">(</span>viewController<span class="token punctuation">:</span> <span class="token keyword">self</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

extension UIViewController {

private struct Preview: UIViewControllerRepresentable {

var viewController: UIViewController

func makeUIViewController(context: Context) -> UIViewController {

viewController

}

func updateUIViewController(_ uiViewController: UIViewController,

context: Context) {

// No-op

}

func asPreview() -> some View {

Preview(viewController: self)

}

Giờ đây chúng ta có thể dễ dàng làm cho bất kỳ controller xem nào tương thích với Xcode preview. Tất cả những gì chúng ta phải làm là tạo một PreviewProvider gọi phương thức asPreview mới của chúng ta trên trình điều khiển xem mà chúng ta muốn xem trước:

@<span class="token function">available</span><span class="token punctuation">(</span>iOS <span class="token number">13</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token punctuation">)</span>
<span class="token keyword">struct</span> <span class="token builtin">SchedulingViewPreview</span><span class="token punctuation">:</span> <span class="token builtin">PreviewProvider</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span>
        <span class="token function">SchedulingViewController</span><span class="token punctuation">(</span>schedule<span class="token punctuation">:</span> <span class="token function">Schedule</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">asPreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

SchedulingViewController(schedule: Schedule()).asPreview()

}

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tận dụng tối đa tính năng Xcode Preview của SwiftUI.

1/ Screens, components, and interactivity:

2/Specific environments:

3/Group, iterations, and convenience APIs:

4/Previews are not just for SwiftUI views

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript