SwftUI - ShareLink 공유 기능 사용하기, 공유 인터페이스

iOS 16.0 부터는 ShareLink 를 제공하여 SwiftUI 자체적으로 공유 Sheet 를 사용할 수 있게 되었습니다

 

iOS 16 이전에는 UIViewControllerRepresentable 이 존재하여 UIViewControllerRepresentable 로 대체 구현이 가능했습니다.

 

 

ShareLink 간단한 사용법

var body: some View {

    ShareLink(item: URL(string: "https://developer.apple.com/xcode/swiftui/")!)

    ShareLink(item: URL(string: "https://developer.apple.com/xcode/swiftui/")!) {
        Label("Share", image: "MyCustomShareIcon")
    }
}

• ShareLink 의 간단한 사용법으로는 위처럼 공유할 데이터를 item 파라미터에 넣어줍니다.
  • 추가로 클로저 내부에 원하는 UI 를 따로 제공할 수도 있습니다.

ShareLink 더 알아보기

ShareLink 를 사용하여 커스텀 데이터 또한 내보낼 수 있습니다.

대신 해당 데이터가 Transferable 프로토콜을 준수해야 합니다.

Transferable 이란?
Transferable 프로토콜은 데이터를 앱 내에서 공유하거나 다른 앱으로 전송할 때 사용되는 프로토콜입니다. 여러 프레임워크 타입이 이미 이 프로토콜을 따르고 있으며, 예를 들어 URL 같은 타입은 기본적으로 Transferable을 따릅니다. 뿐만 아니라, 개발자는 자신의 커스텀 타입을 만들 때도 이 프로토콜을 채택하여 데이터를 공유할 수 있습니다.

 

공유 가능한 데이터 만들기

🟢 기존적으로 Transferable 데이터는 바로 사용 가능하지만 특정 데이터는 직접 공유 가능한 데이터로 만들어야 할 수 있습니다

 

🍎 애플은 공식 문서에서 사진을 공유할 수 있는 구조체 코드를 구현해 제공하고 있습니다.

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


    public var image: Image
    public var caption: String
}

• 커스텀 Photo 구조체를 만들어 Transferable 프로토콜을 준수하도록 만들었습니다.
• transferRepresentation 이란 이 속성은 어떤 형태로 데이터를 전송할지 정의하는 역할을 합니다.
  • ProxyRepresentation 이란 Transferable 타입을 프레임워크 타입으로 변환하는 데 사용됩니다.
    위의 코드에서는 Photo 타입에서 정의한 image 속성을 사용해 Transferable을 구현하고 있습니다.

ShareLink 로 데이터 공유하기

🔵 ShareLink 를 사용하면 원하는 데이터를 공유할 수 있습니다.

 

🍎 애플은 공식 문서에서 사진을 공유할 수 있는 기본적인 예시 ShareLink 코드를 구현해 제공하고 있습니다.

struct PhotoView: View {
    let photo: Photo


    var body: View {
        photo.image
            .toolbar {
                ShareLink(
                    item: photo,
                    preview: SharePreview(
                        photo.caption,
                        image: photo.image))
            }
    }
}

 

위 코드에서 ShareLink 에는 2가지 파라미터값이 들어가게 됩니다.

• item: 공유할 데이터를 넣습니다. (Transferable 프로토콜을 준수해야 합니다)
• preview: SharePreview 를 사용하여 데이터를 공유하기 전에 공유할 데이터를 미리 사용자한테 보여줍니다.

ShareLink 종류 파악하기

이 외에도 매우 많은 ShareLink 사용 방법들이 많습니다.

 

단일 데이터 공유하기

init(item:subject:message:)

• 데이터를 공유하기 위한 공유 인터페이스를 제공하는 인스턴스를 만들어냅니다.
• item: Transferable 를 준수하는 데이터입니다.
• subject: 제목으로 공유 대상이 이메일, 메시지 앱 등일 때 이 필드들이 미리 채워집니다.
• message: 메시지로 공유 대상이 이메일, 메시지 앱 등일 때 이 필드들이 미리 채워집니다. 

preview 로 데이터 공유하기 전에 확인하기

init(_:item:subject:message:preview:)

• 데이터를 공유하기 전에 공유 인터페이스에서 데이터를 미리 확인할 수 있습니다.
• preview: 사용자한테 제공할 데이터 미리보기 SharePreview 가 들어갑니다.

ShareLink(item: photo, subject: Text("Title"), message: Text("Check this out!"), preview: SharePreview("이미지를 제공합니다"))

ShareLink(item: photo,
          subject: Text("Title"),
          message: Text("Check this out!"),
          preview: SharePreview(
                photo.caption,
                image: photo.image))

 

 

 

 

 

여러 데이터 공유하기

init(items:subject:message:)

• 여러 데이터를 공유하기 위한 공유 인터페이스를 제공하는 인터페이스를 만들어냅니다.

preview 로 여러 데이터 공유하기 전에 확인하기

init(_:items:subject:message:preview:)

• 여러 데이터를 공유하기 전에 공유 인터페이스에서 데이터를 미리 확인할 수 있습니다.

ShareLink("Share Photos", items: [photo, photo], subject: Text("Title"), message: Text("Check these out!"), preview: { item in
    SharePreview(item.caption, image: item.image)
})

 

 

SharePreview 로 공유 인터페이스 미리보기 만들기

SharePreview 를 활용하면 공유 인터페이스에서 사용자한테 미리 데이터에 대한 설명 등을 제공할 수 있습니다.

SharePreview(titieKey: LocalizedStringKey, image: Transferable, icon: Transferable))

titleKey: 사용자한테 보여줄 Text 를 의미합니다.

image: 사용자한테 보여줄 image 를 의미합니다. Transferable 프로토콜을 준수해야 합니다.

icon: 사용자한테 보여줄 icon 을 의미합니다. Transferable 프로토콜을 준수해야 합니다. (아직 어떻게 사용되는지 파악안됐습니다..)