网站logo图怎么做的,中文wordpress网站模板,wordpress问卷填报主题,详情页设计思路概览
在之前 SwiftUI 5.0#xff08;iOS 17#xff09;TipKit 让用户更懂你的 App 这篇博文里#xff0c;我们已经初步介绍过了 TipKit 的基本知识。 现在#xff0c;让我们来看看如何进一步利用 SwiftUI 对 TipKit 提供的细粒度外观定制技巧#xff0c;让 Tip 更加“明眸…
概览
在之前 SwiftUI 5.0iOS 17TipKit 让用户更懂你的 App 这篇博文里我们已经初步介绍过了 TipKit 的基本知识。 现在让我们来看看如何进一步利用 SwiftUI 对 TipKit 提供的细粒度外观定制技巧让 Tip 更加“明眸皓齿”。 在本篇博文中您将学到如下内容 概览1. TipKit 温故而知新2. Tip 外观细粒度定制3. 完全自己打造 Tip 外观总结 相信学完本课后小伙伴们对 TipKit 的内功修为会更加炉火纯青、登峰造极
那还等什么呢Let’s go 本文对应的视频课在此欢迎小伙伴们恣意观赏 SwiftUI 定制 TipKit 外观进一步让撸码如虎添翼 1. TipKit 温故而知新
在前一篇关于 TipKit 的博文中我们介绍了什么是 TipKit 以及如何在 App 中支持 TipKit 的方法。
这里再回忆一下创建一个 Tip 很简单我们只需让类型遵守 Tip 协议即可。
struct FavoriteTip: Tip {var title: Text {Text(收藏最爱的图片).bold()}var message: Text? {Text(将心仪的图片保存到相册中).font(.headline).foregroundStyle(.gray.gradient)}var image: Image? {Image(systemName: heart)}
}然后我们可以通过嵌入和弹出两种不同方法来显示它
// 嵌入 Tip
struct ContentView: View {let favTip FavoriteTip()var body: some View {NavigationStack {VStack {TipView(favTip)}.padding().navigationTitle(TitKit演示)}}
}// 弹出 Tip
struct ContentView: View {let favTip FavoriteTip()var body: some View {NavigationStack {VStack {...}.padding().navigationTitle(TitKit演示).toolbar {ToolbarItem {Image(systemName: heart).font(.title.weight(.black)).foregroundStyle(.pink.gradient).popoverTip(favTip, arrowEdge: .top)}}}}
}嵌入和弹出 Tip 的效果如下图所示 如果大家对于默认 Tip 的外观不甚满意怎么办别急SwiftUI 还有“妙计”。
2. Tip 外观细粒度定制
Apple 在推出 TipKit 框架的同时也提供了若干修改器方法我们可以利用它们来进一步调整 Tip 视图的外观。
首先是 tipCornerRadius() 方法它可以用来调整 Tip 视图边角的弧度
struct ContentView: View {let favTip FavoriteTip()State var addTipRadius falsevar body: some View {NavigationStack {VStack {TipView(favTip)Toggle(isOn: $addTipRadius) {Text(增加 Tip 边角弧度).font(.title3)}}.padding().navigationTitle(TitKit演示).tipCornerRadius(addTipRadius ? 30 : 10).frame(maxHeight: .infinity).background(.gray.opacity(0.66).gradient).animation(.bouncy, value: addTipRadius)}}
}值得注意的是tipCornerRadius 修改器方法和随后介绍的所有 Tip 外观调整方法都会沿着视图继承树向下传递这意味着顶层的方法会影响内部所有的 Tip 外观。 接下来是 tipImageSize() 修改器我们可以用它来调整 Tip 内部图片的尺寸
NavigationStack {VStack {TipView(favTip)}.tipImageSize(CGSize(width: incImageSize ? 50 : 24, height: incImageSize ? 50 : 24)).frame(maxHeight: .infinity).background(.gray.opacity(0.66).gradient).animation(.bouncy, value: incImageSize)
}运行效果如下所示 最后我们可以用 tipBackground() 修改器方法来调整 Tip 视图背景的显示样式
NavigationStack {VStack {TipView(favTip)}.tipBackground(incBackgroundHue ? Material.ultraThick : .thin).frame(maxHeight: .infinity).background(.gray.opacity(0.66).gradient).animation(.bouncy, value: incImageSize)
}运行的效果不出意料 上面我们介绍了一些从宏观上调整 Tip 外观的方法如果小伙伴们还是觉得捉襟见肘、鸟入樊笼怎么办
别急我们还可以“欲穷千里目更上一层楼”自己动手“丰衣足食”来 100% “恣意”决定 Tip 该如何显示。
3. 完全自己打造 Tip 外观
为了最大程度满足秃头码农们随心所欲定制 Tip 外观的需求苹果决定将 Tip 的外观样式化Styling以便让我们可以无拘无束定制它们“主题皮肤”。
经常撸 SwiftUI 代码的小伙伴们都知道在 SwiftUI 中大部分原生视图都有对应的样式Style比如按钮、Label、Toggle 等等。视图样式为我们充分定制视图的外观带来了极大的便利。
TipKit 也不例外我们同样可以利用 tipViewStyle() 修改器来排忧解难 为了能够安闲自在的 100% 纯手工打造 Tip 的外观我们首先需要“由着性子”创建一个遵守 TipViewStyle 协议的类型
struct PureCustomTipViewStyle: TipViewStyle {func makeBody(configuration: Configuration) - some View {VStack(alignment: .leading) {HStack(alignment: .bottom) {if let image configuration.image {image.resizable().aspectRatio(contentMode: .fit).font(.title.weight(.heavy)).frame(width: 25, height: 25).foregroundStyle(.teal).padding().overlay {RoundedRectangle(cornerRadius: 15.0).stroke(.secondary, lineWidth: 3.0)}}Rectangle().frame(width: 3, height: 100).foregroundStyle(.white.gradient)VStack(alignment: .leading) {if let title configuration.title {title.font(.headline)}if let message configuration.message {Group {message.font(.subheadline).padding()}.background {RoundedRectangle(cornerRadius: 15.0).foregroundStyle(Material.thin)}}}}HStack {Spacer()ForEach(configuration.actions, id: \.id) { action inButton {action.handler()} label: {Image(systemName: volleyball.fill).foregroundStyle(.yellow.gradient)action.label()}.fontWeight(.bold).buttonStyle(.borderedProminent)}}}.padding().background {Image(bg).resizable().opacity(0.77)}}
}接着为了方便起见我们还可以将上面创建的 Tip 自定义样式融入到 TipViewStyle 自身中去
extension TipViewStyle where Self PureCustomTipViewStyle {static var pureCustom: Self {Self.init()}
}最后在 Tip 视图本身或其上层容器中我们即可悠然自得的调用 tipViewStyle() 修改器方法来施展改头换面的“黑魔法”啦
struct ContentView: View {let favTip FavoriteTip()State var addTipRadius falseState var incImageSize falseState var incBackgroundHue falsevar body: some View {NavigationStack {VStack {TipView(favTip)Toggle(isOn: $addTipRadius) {Text(增加 Tip 边角弧度).font(.title3)}Toggle(isOn: $incImageSize) {Text(增加 Tip 图片大小).font(.title3)}Toggle(isOn: $incBackgroundHue) {Text(增加 Tip 背景色度).font(.title3)}}.padding().navigationTitle(TitKit演示).tipCornerRadius(addTipRadius ? 30 : 10).tipImageSize(CGSize(width: incImageSize ? 50 : 24, height: incImageSize ? 50 : 24)).tipBackground(incBackgroundHue ? Material.ultraThick : .thin)// 应用我们的自定义 Tip 样式.tipViewStyle(.pureCustom).frame(maxHeight: .infinity).background(.gray.opacity(0.66).gradient).animation(.bouncy, value: addTipRadius).animation(.bouncy, value: incImageSize).animation(.bouncy, value: incBackgroundHue)}}
}编译运行代码现在用全身毛孔来感受一下纯手工打造 Tip 界面的愉悦之美吧 至此我们完全掌握了 TipKit 中外观调整与定制的全部技巧小伙伴们还不赶快发挥天马行空般的想象力打造自己的 Tip 视图吧棒棒哒 想要系统学习 Swift 语言的小伙伴们千万不要错过我的《Swift 语言开发精讲》专栏哦欢迎大家恣意观赏 Swift 语言开发精讲 总结
在本篇博文中我们介绍了 SwiftUI 5.0 中从宏观全局调整 Tip 视图显示的几种方式。如果小伙伴们觉得还是不能放开手脚我们还探讨了如何 100% 纯手工打造自己 Tip 内部布局的方法包您满意
感谢观赏再会
