vlambda博客
学习文章列表

自己瞎琢磨之 Swift Log #1

昨天说到哪了,忘了都。

TravelGo App 其实逻辑很简单,也不知道是因为用户需求过于小还是这种需求本身就傻逼,目前还没有类似的软件。

App 从用户购买完成行程的票时,App 就应该规划整个行程中的各种事情。(有点类似航旅纵横吧)包括几时出发,当地的气温湿度,预约好车和酒店。用户在其中不用切换到其他软件,即便遇到了主观或是客观的因素,App 也有各种应急预案,全方位的保护那种没一点丁点时间规划的用户,再也不用在行程中充满焦虑。

App 的界面类似一个任务list,App自动生成在行程中的各类事件,如该出发的时间、去往机场的事件、乘坐飞机的事件等等,将每个事件具体化,并自动生成每每个事件的子事件。

这种带有预测的视图较为直观地展现了未来会发生的事件,并且可以将从心理角度将用户的焦虑感降低。

不过这是一个要将众多已经打包好的数据 API 集合到一起的 App,以我半脚猫的功夫,想也是搞不定。于是我先从 UI 界面入手,当然这个 App 我引以为傲的也正是这种展示视图。

在我玩弄了无数次 playground 里各种算术题和 print("Fuck me!") 后,我决定从 SwiftUI 入手。SwiftUI 是 2019 年 WWDC 发布的,用于编写 iOS、iPadOS、macOS、tvOS 的界面,如果我没记错的话。

SwiftUI 对于我这种刚入门的想急于先做好 UI 的人来说,简直是天赐良物。具体的代码类型的优劣势我不敢造次,只能说这种代码对于我来说很直观,像是在 Sketch 里打代码一样。

我在界面设计上借鉴了很多 Apple 自家 App 风格,希望使用 Xcode 自带的的组件来完成我这个小 App,当然这是异常艰难的。

侧边条

在 TravelGo 画面中,左侧有一个始终存在的侧边条,连接所有 App 中生成的事件,在视觉上营造一种「时间线」的感觉。这个侧边条连接第一个事件模块到最后一个固定的提示模块,普通的 offset 无法满足这个效果,于是我让侧边条与事件模块的 view 构造成 ZStack,让这个 Rectangle 自适应整个事件模块的 view,当时事件模块的 view 因为其中事件模块的高度改变而改变时,侧边条也会同时改变。同时设置 Rectangle 的 offset 到线条与第一个事件模块对其,并且 padding 到侧边条末端与最后一个提示模块对其。这样,当事件模块的 view 改变时,侧边条就可以完美同步长度了。

struct NowView: View { var body: some View { ScrollView(showsIndicators: false) { ZStack { Rectangle() .padding(.bottom, 110) .frame(width: 6) .offset(x: -174.5, y: 80) .foregroundColor(Color("line")) VStack(spacing: 0) { ForEach(Datas) { Data in TheCardView(Data: Data) } BottomView() } } .frame(maxWidth: UIScreen.main.bounds.width) .padding(.top, 90) } }}