在以往项目中,我们想实现调用系统级别的“分享”功能时,常常需要借助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")
}
}
上述代码中,我们声明了一个String类型的文本参数content,并在主视图中显示出来。我们还为视图添加了顶部导航栏视图,并完善了标题和导航栏按钮的内容,其中,导航栏按钮为单独创建的视图shareBtn。
下一步,我们来实现分享文本文字的功能,需要使用到iOS16版本新增的ShareLink视图,使用方法和Button按钮视图类似,如下图所示:
// 传入参数值
shareBtn(content)
// 分享按钮
private func shareBtn(_ text:String) -> some View {
ShareLink(item: text) {
Image(systemName: "square.and.arrow.up")
}
}
上述代码中,我们在shareBtn分享按钮视图的参数中创建了一个String类型的参数text,当传入text参数值后,调用ShareLink分享按钮视图的方法,将text的内容调用系统级操作进行分享。
是不是很简单?
2、分享图片
由于ShareLink支持多种类型,因此分享图片的方式也类似。我们在Assets资源库导入一张图片,如下图所示:
回到ContentView文件中,创建一个Image视图来显示图片内容,如下图所示:
// 声明图片参数
private var image: Image = Image("cartoon_love")
// 显示图片
image
.resizable()
.scaledToFit()
上述代码中,我们首先声明了图片参数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")
}
}
上述代码中,我们在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()
}
上述代码中,我们单独创建了分享的组合视图shareView,并将原本主视图中的图片+文本的组合视图代码迁移到shareView视图中。完成后,我们就可以直接在其他地方调用shareView视图来显示shareView视图中的内容。
下面,我们就可以调用ImageRenderer图片转换器的API,将View视图转换为UIImage图片视图,如下所示:
// View->UIImage
@MainActor
private func generateSnapshot() -> UIImage {
let renderer = ImageRenderer(content: shareView())
return renderer.uiImage ?? UIImage()
}
上述代码中,我们创建了一个独立的方法generateSnapshot,并让其返回一个UIImage图片数据。在generateSnapshot方法中,我们调用ImageRenderer将shareView作为转换的对象,转换完成后以UIImage图片进行返回。
下面,我们来使用ShareLink视图实现视图的分享功能。如下代码所示:
ShareLink(
item: Image(uiImage: generateSnapshot()),
preview: SharePreview("视图分享",
image: Image(uiImage: generateSnapshot()
)
)
)
上述代码中,我们可以使用Image视图的uiImage参数解析generateSnapshot图片数据,就可以实现分享视图的功能啦~
当然你也可以更加精细化一点,比如指定视图尺寸大小,以达到最佳的展示效果。
如有其他问题,欢迎大家评论区一起交流~
由于近期工作和自己的事情太忙了,都没怎么写文章,深表抱歉~
最近有幸应邀写了本关于SwiftUI开发的书籍,趁着双11,给一直关注着我的亲们送下福利吧~
欢迎关注「文如秋雨」公众号,将随机抽取5本免费送~