iOS开源一个简单的订餐app UI框架

2020-01-18 16:46:44于丽

前言

学 Swift 也有一段时间了,做了一些小的 demo。一直想做个完整的项目,发现这边学校的外卖订餐也逐渐流行起来,不像中国有那么多强大的外卖软件,美国也有,但不多,起码中国人对那些软件都不太熟知也不怎么用。打算专门针对午餐的外卖做个app,做了几天,只做出个 UI,看上去很小的软件,新手做起来感觉东西还是有点多。 Swift 如何与后端交互 之类的之后再慢慢学吧,有数据库之类的我都挺熟悉,SQL 或者 MongoDB。

目录
在这个 app 中,所有 UI 都是用代码创建的,你可以在 100 Days of Swift 看到,我之前练习的时候都是用的 storyboard,但是到了10页以上感觉 storyboard 就开始有点乱了,特别是那些 segue 的线牵得满屏幕都是的时候。之后我就开始用 SnapKit 做 UI 了,虽然比起 CSS 来,还是有点不方便,但用起来感觉还行。下面我大概罗列了一些实现的基本功能:

引导页
午餐菜单(tableView)
购物车,动画
下拉刷新
自定义个人主页 (collectionView)
Reminder 和 Setting 需要后台,就用了 Alert 来简单响应了
全屏右滑退出

具体代码请看我的 Github, 下面我就主要展示一下效果,稍微讲一下实现过程,代码中已有很多注释。

引导页

iOS,订餐,app,UI

引导页我是用 collectionView 做的,刚开始先判断要不要进入引导页,如果版本更新,则进入。collectionView 滑动方向设置为 .horizontal ,设置任意数量的页数。添加一个启动的 startButton ,设置前几页都为 startButton.isHidden = true ,最后一页的时候显示出来,再添加一个渐出的显示动画。

菜单和购物车

iOS,订餐,app,UI

shoppingCart

菜单可以下拉刷新,本打算自定义下拉刷新,就像 ALin 的项目中那样,但是好像有点问题,我就用了自带的UIRefreshControl ,下拉的时候显示刷新的时间,稍微调整了下时间的 format。代码很简单

 

复制代码 let dateString = DateFormatter.localizedString(from: NSDate() as Date, dateStyle: .medium, timeStyle: .short)
self.refreshControl.attributedTitle = NSAttributedString(string: "Last updated on (dateString)", attributes: attributes)
self.refreshControl.tintColor = UIColor.white

 

然后做了个购物车的动画,将菜单里的图片先放大后缩小“抛入”购物车,其实是沿着 UIBezierPath 走的一个路径,这段动画完了之后,在 animationDidStop() 里做购物车图片的抖动,和显示购买的物品数量,那个 countLabel 是个长宽都为 15 的在购物车图片右上角的 UILabel() 。