在以往项目中,我们想实现调用系统级别的“分享”功能时,常常需要借助UIKit框架的能力,这往往需要我们在学习SwiftUI框架的同时,还需要掌握前一种框架的特性,这可能也是影响SwiftUI在国内普及的重要原因。

而在iOS16版本中,SwiftUI框架中新增了一个新的视图— —ShareLink分享链接视图,通过该视图,我们可以很简单地使用SwiftUI实现文本、图片的分享。

那么现在,我们就来学习和尝试使用ShareLink分享链接视图,来实现一些简单的小案例。

1、分享文本

首先是分享的文本内容,我们声明文本内容,并且构建一个简单的显示文本的界面,如下图所示:

import SwiftUI
struct ContentView: View {
    private var content: String = "若逢新雪初霁,满月当空,下面平铺着皓影,上面流转着亮银,而你带笑的向我走来,月色与雪色之间,你是第三种绝色。"
    var body: some View {
        NavigationView {
            VStack {
                Text(content)
                	.padding()
            }
            .navigationBarTitle("首页", displayMode: .inline)
            .navigationBarItems(trailing: shareBtn())
        }
    }
    // 分享按钮
    private func shareBtn() -> some View {
        Image(systemName: "square.and.arrow.up")
    }
}

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们声明了一个String类型的文本参数content,并在主视图中显示出来。我们还为视图添加了顶部导航栏视图,并完善了标题和导航栏按钮的内容,其中,导航栏按钮为单独创建的视图shareBtn。

下一步,我们来实现分享文本文字的功能,需要使用到iOS16版本新增的ShareLink视图,使用方法和Button按钮视图类似,如下图所示:

// 传入参数值
shareBtn(content)
// 分享按钮
private func shareBtn(_ text:String) -> some View {
    ShareLink(item: text) {
        Image(systemName: "square.and.arrow.up")
    }
}

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们在shareBtn分享按钮视图的参数中创建了一个String类型的参数text,当传入text参数值后,调用ShareLink分享按钮视图的方法,将text的内容调用系统级操作进行分享。

是不是很简单?

2、分享图片

由于ShareLink支持多种类型,因此分享图片的方式也类似。我们在Assets资源库导入一张图片,如下图所示:

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

回到ContentView文件中,创建一个Image视图来显示图片内容,如下图所示:

// 声明图片参数
private var image: Image = Image("cartoon_love")
// 显示图片
image
    .resizable()
    .scaledToFit()

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们首先声明了图片参数image,用于获得本地的cartoon_love图片素材,随机在VStack垂直布局视图中添加image参数作为视图内容显示,并使用resizable修饰符和scaledToFit修饰符,使得图片素材自适应设备显示。

下一步,我们来实现分享图片的功能,使用方法和文本分享类似,如下图所示:

// 传入参数值
shareBtn(content,image)
// 分享按钮
private func shareBtn(_ text: String,_ image:Image) -> some View {
    ShareLink(
        item: image,
        preview: SharePreview("图片分享", image: image)
    ) {
        Image(systemName: "square.and.arrow.up")
    }
}

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们在shareBtn分享按钮视图的参数中创建了一个Image类型的参数image,用于传入图片内容。然后在ShareLink视图的参数中传入image参数值,除此之外,还需要设置SharePreview实例,用于预览图片分享效果。

分享图片也很简单,接下来我们增加点难度,我们需要将视图中的图片+文本作为一整个视图进行分享,那该如何实现?

3、分享视图

在iOS16版本中,除了新增ShareLink视图外,还新增了一个API— —ImageRenderer图片转换器,可以直接实现将视图转换为图片。

使用方式也比较简单,但首先,我们需要将需要分享的视图单独定义出来。如下图所示:

// 显示分享视图
shareView()
// 创建分享视图
private func shareView() -> some View {
    VStack(spacing: 48) {
        image
            .resizable()
            .scaledToFit()
        Text(content)
    }
    .padding()
}

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们单独创建了分享的组合视图shareView,并将原本主视图中的图片+文本的组合视图代码迁移到shareView视图中。完成后,我们就可以直接在其他地方调用shareView视图来显示shareView视图中的内容。

下面,我们就可以调用ImageRenderer图片转换器的API,将View视图转换为UIImage图片视图,如下所示:

// View->UIImage
@MainActor
private func generateSnapshot() -> UIImage {
    let renderer = ImageRenderer(content: shareView())
    return renderer.uiImage ?? UIImage()
}

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们创建了一个独立的方法generateSnapshot,并让其返回一个UIImage图片数据。在generateSnapshot方法中,我们调用ImageRenderer将shareView作为转换的对象,转换完成后以UIImage图片进行返回。

下面,我们来使用ShareLink视图实现视图的分享功能。如下代码所示:

ShareLink(
    item: Image(uiImage: generateSnapshot()),
    preview: SharePreview("视图分享", 
                          image: Image(uiImage: generateSnapshot()
                                      )
                         )
)

SwiftUI极简教程43:ShareLink新视图,让你轻松实现文本和图片的分享

上述代码中,我们可以使用Image视图的uiImage参数解析generateSnapshot图片数据,就可以实现分享视图的功能啦~

当然你也可以更加精细化一点,比如指定视图尺寸大小,以达到最佳的展示效果。

如有其他问题,欢迎大家评论区一起交流~

由于近期工作和自己的事情太忙了,都没怎么写文章,深表抱歉~

最近有幸应邀写了本关于SwiftUI开发的书籍,趁着双11,给一直关注着我的亲们送下福利吧~

欢迎关注「文如秋雨」公众号,将随机抽取5本免费送~