实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)

简介: 实战教程·元宇宙来了,准备好你的电子名片了吗?(六)

体验升级:文字说明和震动反馈

实现滑动删除动作后,总感觉好像少了点东西。操作几次后发现,当用户拖动卡片向左滑动时,确实可以通过颜色表示当前用户正在执行操作,而且确实有警告弹窗进行二次提示,但对于小白用户来说,也确实在警告弹窗出来之前是不知道正在操作删除的。

这存在学习成本,我们可以加一点点小细节,当用户向左滑动卡片时,在卡片背后出现提示文字,如下代码所示:


// 提示文字
HStack {
  Spacer()
  Text("左滑删除")
  .padding()
  .foregroundColor(Color(.systemGray))
}

image.png

上述代码中,我们在List列表中遍历数据项时,在ZStack堆栈视图包裹中的NavigationLink导航链接、CardView身份卡片中增加了一个“提示文字”视图,使用Spacer空间垫片将Text文字撑到右边。

由于ZStack堆栈视图的层级关系和代码的前后顺序有关,Text文字在CardView身份卡片前,那么常规情况下文字会被遮挡。而当CardView身份卡片向左滑动时,就出现了Text文字了。

除了文字外,我们还可以再触发删除操作的时候添加震动反馈,进一步提升用户体验。 SwiftUI提供了反馈生成器 UIFeedbackGenerator供开发者调用iOS系统的线性马达形成震动效果。我们可以创建一个新的Swift文件专门管理震动反馈内容。

创建一个新的文件夹,命名为SupportFile,并创建一个新的Swift文件,命名为Haptics,如下图所示:

image.png

然后我们引入SwiftUI,并创建一个类来管理震动反馈的内容,如下代码所示:


import Foundation
import SwiftUI
struct Haptics {
    static func hapticSuccess() {
        let generator = UINotificationFeedbackGenerator()
        generator.notificationOccurred(.success)
    }
    static func hapticWarning() {
        let generator = UINotificationFeedbackGenerator()
        generator.notificationOccurred(.warning)
    }
}

image.png

上述代码中,我们创建了一个结构体Haptics,声明了2个方法hapticSuccess成功时的震动动效、hapticWarning警告时的震动动效,并调用UINotificationFeedbackGenerator震动反馈生成器组件,赋予不同的震动反馈效果:success或者warning。

紧接着我们回到ContentView视图中,在CardView视图中拖动身份卡片操作时,我们调用Haptics中的震动反馈方法,如下代码所示:

scss

复制代码

Haptics.hapticWarning()

image.png

如此,在用户向左滑动身份卡执行删除操作时,系统就会基于用户一个震动反馈,告知用户这是一个“值得谨慎的操作”,进一步地提供用户的体验。

很多时候,加一点点小细节,整个应用会上一个台阶。

项目小结

在本章中,我们实现了自定义滑动删除的交互操作,这比起直接使用List自带的滑动删除,或者使用简单的控件实现更加“高级一些”,当然这也增加了一些学习成本。

对于很多时候SwiftUI自带控件无法满足开发需要时,我们要具备各种自定义实现控件或者操作能力,这是区分只会用框架的“搬砖员”和真正的程序员的重要特征。

另外我们还在该项目中增加了“一点点细节”,让应用的交互性和用户体验更好一些,这也是作为一个创作者的追求。其实也想表达一个观念,如果一个程序员只会使用框架而加入自己的思考和理解,那么25岁和30岁也只是打字快慢的区别罢了。

接下来的章节,我们想要做的还有很多,我也会把每一步的实现细节和操作流程都分享出来,请保持期待吧~

相关文章
|
10月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
34 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(3)
|
10月前
|
JSON API 数据格式
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
60 0
|
10月前
|
存储 XML Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
68 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
|
10月前
|
存储 前端开发 数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
52 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
|
10月前
|
存储 数据库 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
63 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(3)
|
10月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
44 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
|
10月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
53 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)
|
10月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
50 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
|
10月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(1)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
41 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(1)
|
10月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
52 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(4)