SwiftUI 框架

透過 SwiftUI 的 ShareLink 來分享文本和圖像等資料

在 iOS 16 中,SwiftUI 帶來了一個新的視圖 ShareLink。使用者點擊 Share Link 時,視圖就會顯示一個 Share Sheet,讓使用者分享任何型別的資料到其他 App。在這篇文章中,我會帶大家使用 ShareLink,讓使用者分享文本、URL 和圖像。
透過 SwiftUI 的 ShareLink 來分享文本和圖像等資料
Photo by AltumCode on Unsplash
透過 SwiftUI 的 ShareLink 來分享文本和圖像等資料
Photo by AltumCode on Unsplash
In: SwiftUI 框架

iOS 16 中,SwiftUI 帶來了一個新的視圖 ShareLink。使用者點擊 Share Link 時,視圖就會顯示一個 Share Sheet,讓使用者可以分享內容到其他 App 或複製資料。

ShareLink 視圖可以分享任何型別的資料。在這篇教學文章中,我們會一起看看如何使用 ShareLink 讓使用者分享文本、URL 和圖像。

讓我們先看看以下例子。如果想建立一個 Share Link 來分享一個 URL,我們可以如此編寫程式碼:

struct ContentView: View {
    private let url = URL(string: "https://www.appcoda.com")!

    var body: some View {
        VStack {
            ShareLink(item: url)
        }
    }
}

SwiftUI 會自動顯示一個 Share 按鈕和小圖標。

sharelink-basic-for-swiftui

使用者點擊按鈕後,iOS 就會顯示一個 Share Sheet,讓使用者選擇下一步操作,例如複製、或是把 Link 添加到 Reminders。

swiftui-share-sheet

如果我們想分享文本,我們只需要把字串 (string) 傳遞到 item 參數 (parameter) 即可。

ShareLink(item: "Check out this new feature on iOS 16")

如果想客製化 Share Link 的外觀,我們可以在閉包 (closure) 中提供視圖內容:

ShareLink(item: url) {
    Image(systemName: "square.and.arrow.up")
}

在這個例子中,SwiftUI 就會只顯示 Share Link 的圖標。

swiftui-tap-and-share

或者,我們可以顯示一個 Label,並指定系統或客製化的圖像:

ShareLink(item: url) {
    Label("Tap me to share", systemImage:  "square.and.arrow.up")
}

在初始化 ShareLink 實例時,我們可以添加 2 個附加參數,以提供更多有關分享項目的資料:

ShareLink(item: url, subject: Text("Check out this link"), message: Text("If you want to learn Swift, take a look at this website.")) {
    Image(systemName: "square.and.arrow.up")
}

我們可以使用 subject 參數和 message 參數,分別為 URL 或想分享的項目添加 title 和描述。iOS 會根據使用者想要分享的途徑,去決定要顯示 subject、message、或是兩者都顯示。比如說,如果我們想要把 URL 添加到 Reminders,Reminders App 就會顯示預設的 message。

swiftui-sharelink-reminders

分享圖像

除了 URL 外,我們還可以利用 ShareLink 來分享圖像。讓我們看看以下的範例程式碼:

struct ContentView: View {
    private let photo = Image("bigben")

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            photo
                .resizable()
                .scaledToFit()

            ShareLink(item: photo, preview: SharePreview("Big Ben", image: photo))

        }
        .padding(.horizontal)
    }
}

item 參數中,我們指定了要分享的圖像。另外,我們也傳遞了一個 SharePreview 的實例,來提供圖像的預覽。在預覽中,我們指定了圖像的 title 和 thumbnail。使用者點擊 Share 按鈕後,iOS 就會顯示一個有圖像預覽的 Share Sheet。

swiftui-sharelink-image

Conforming to Transferable

除了 URL 外,item 參數也接受任何遵從 Transferable 協定的物件。在 iOS 中,以下都是標準的 Transferable 型別:

  • String
  • Data
  • URL
  • Attributed String
  • Image
Transferable 協定可以用來描述型別如何與 Transport API 交互,例如拖放動作 (drag and drop)、或複製和貼上 (copy and paste)。

那我們如何讓一個客製物件變成 Transferable 呢?假設,我們建立了以下的 Photo 結構:

struct Photo: Identifiable {
    var id = UUID()
    var image: Image
    var caption: String
    var description: String
}

要讓 ShareLink 可以分享這個物件,我們就要讓 Photo 遵從 Transferable 協定,並實作 transferRepresentation 屬性 (property):

extension Photo: Transferable {
    static var transferRepresentation: some TransferRepresentation {
        ProxyRepresentation(exporting: \.image)
    }
}

我們有不同的 Transfer Representation,包括:ProxyRepresentationCodableRepresentationDataRepresentation、和 FileRepresentation。在以上的程式碼中,我們使用了 ProxyRepresentation,它會使用另一種型別的 Transfer Representation 作為自己的 Representation。 在這裡,我們使用了 Image 內建的 Transferable 協定。

swiftui-image-transferable

因為 Photo 現在遵從 Transferable 協定,我們就可以把 Photo 實例傳遞給 ShareLink

ShareLink(item: photo, preview: SharePreview(photo.caption, image: photo.image))

現在,當使用者點擊 Share 按鈕,App 就會顯示分享圖片的 Share Sheet。

下一篇文章

這篇教學文章教了大家如何使用 ShareLink 分享文本、URL、和圖像。事實上,只要型別遵從 Transferable 協定,我們都可以用這個新的視圖分享任何型別的資料。

要分享客製化型別,我們可以採用協定,並使用其中一個內建的 TransferRepresentation 型別,來提供 Transfer Representation。 我們簡單討論了 ProxyRepresentation 型別。如果我們想要在 App 之間分享一個文件,就可以使用 FileRepresentation 型別。我們會在之後的教學文章中,再深入探討這個題目。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 17 App 程式設計實戰心法》、《iOS 17 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
iOS 18 新API:使用 Navigation Transition 創建 Hero 動畫式過場
SwiftUI 框架

iOS 18 新API:使用 Navigation Transition 創建 Hero 動畫式過場

Apple 的工程師可能早已認識到,許多 iOS 開發者都希望能夠重現 App Store 應用程式中的優雅 Hero 動畫。由於從頭實現這種動畫通常需要耗費大量時間與精力,Apple 在 iOS 18 SDK 中納入了這項功能。 透過這次更新,你現在只需少量的程式碼就能在自己的應用程式中實現類似的動畫過渡效果。這項重大改進讓開發者能夠創造出更具視覺吸引力且流暢的過渡效果,
如何使用 Vision APIs 從圖像中辨識文字
AI

如何使用 Vision APIs 從圖像中辨識文字

Vision 框架長期以來一直包含文字識別功能。我們已經有詳細的教程,向你展示如何使用 Vision 框架掃描圖像並執行文字識別。之前,我們使用了 VNImageRequestHandler 和 VNRecognizeTextRequest 來從圖像中提取文字。 多年來,Vision 框架已經顯著演變。在 iOS 18 中,Vision
iOS 18更新:SwiftUI 新功能介紹
SwiftUI 框架

iOS 18更新:SwiftUI 新功能介紹

SwiftUI的技術不斷演進,每次更新都讓 iOS 應用程式開發變得更加便捷。隨著 iOS 18 Beta 的推出,SwiftUI 引入了多個令人興奮的新功能,使開發者僅需幾行程式碼即可實現出色的效果。 本教學文章旨在探索這個版本中的幾項主要改進,幫助你了解如何運用這些新功能。 浮動標籤列 (Floating Tab Bar)SwiftUI中的標籤視圖(Tab
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。