前言
学 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, 下面我就主要展示一下效果，稍微讲一下实现过程，代码中已有很多注释。
引导页
引导页我是用 collectionview 做的，刚开始先判断要不要进入引导页，如果版本更新，则进入。collectionview 滑动方向设置为 .horizontal ，设置任意数量的页数。添加一个启动的 startbutton ，设置前几页都为 startbutton.ishidden = true ，最后一页的时候显示出来，再添加一个渐出的显示动画。
菜单和购物车
shoppingcart
菜单可以下拉刷新，本打算自定义下拉刷新，就像 alin 的项目中那样，但是好像有点问题，我就用了自带的uirefreshcontrol ，下拉的时候显示刷新的时间，稍微调整了下时间的 format。代码很简单
self.refreshcontrol.attributedtitle = nsattributedstring(string: "last updated on \(datestring)", attributes: attributes)
self.refreshcontrol.tintcolor = uicolor.white
然后做了个购物车的动画，将菜单里的图片先放大后缩小“抛入”购物车，其实是沿着 uibezierpath 走的一个路径，这段动画完了之后，在 animationdidstop() 里做购物车图片的抖动，和显示购买的物品数量，那个 countlabel 是个长宽都为 15 的在购物车图片右上角的 uilabel() 。
先实现一个回调方法，当点击了cell上的购买按钮后触发
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
func menulistcell(_ cell: menulistcell, foodimageview: uiimageview) { guard let indexpath = tableview.indexpath(for: cell) else { return } // retrieve the current food model, add it to shopping cart model let model = foodarray[indexpath.section][indexpath.row] addfoodarray.append(model) // recalculate the frame of imageview, start animation var rect = tableview.rectforrow(at: indexpath) rect.origin.y -= tableview.contentoffset.y var headrect = foodimageview.frame headrect.origin.y = rect.origin.y + headrect.origin.y - 64 startanimation(headrect, foodimageview: foodimageview) } |
这是点击购买之后的动画实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
fileprivate func startanimation(_ rect: cgrect, foodimageview: uiimageview) { if layer == nil { layer = calayer() layer?.contents = foodimageview.layer.contents layer?.contentsgravity = kcagravityresizeaspectfill layer?.bounds = rect layer?.cornerradius = layer!.bounds.height * 0.5 layer?.maskstobounds = true layer?.position = cgpoint(x: foodimageview.center.x, y: rect.miny + 96) keywindow.layer.addsublayer(layer!) // animation path path = uibezierpath() path!.move(to: layer!.position) path!.addquadcurve(to: cgpoint(x:screen_width - 25, y: 35), controlpoint: cgpoint(x: screen_width * 0.5, y: rect.origin.y - 80)) } groupanimation() } |
这是放大，缩小，抛入购物车的组动画
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// start group animation: throw, larger, smaller imagefileprivate func groupanimation(){ tableview.isuserinteractionenabled = false // move path let animation = cakeyframeanimation(keypath: "position") animation.path = path!.cgpath animation.rotationmode = kcaanimationrotateauto // larger image let biganimation = cabasicanimation(keypath: "transform.scale") biganimation.duration = 0.5 biganimation.fromvalue = 1 biganimation.tovalue = 2 biganimation.timingfunction = camediatimingfunction(name: kcamediatimingfunctioneasein) // smaller image let smallanimation = cabasicanimation(keypath: "transform.scale") smallanimation.begintime = 0.5 smallanimation.duration = 1 smallanimation.fromvalue = 2 smallanimation.tovalue = 0.5 smallanimation.timingfunction = camediatimingfunction(name: kcamediatimingfunctioneaseout) // group animation let groupanimation = caanimationgroup() groupanimation.animations = [animation, biganimation, smallanimation] groupanimation.duration = 1.5 groupanimation.isremovedoncompletion = false groupanimation.fillmode = kcafillmodeforwards groupanimation.delegate = self layer?.add(groupanimation, forkey: "groupanimation")} |
组动画结束后的一些动画效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// end image animation, start other animationsfunc animationdidstop(_ anim: caanimation, finished flag: bool){ if anim == layer?.animation(forkey: "groupanimation") { // start user interaction tableview.isuserinteractionenabled = true // hide layer layer?.removeallanimations() layer?.removefromsuperlayer() layer = nil // if user buy any food, show the count label if self.addfoodarray.count > 0 { addcountlabel.ishidden = false } // show the count label let goodcountanimation = catransition() goodcountanimation.duration = 0.25 addcountlabel.text = "\(self.addfoodarray.count)" addcountlabel.layer.add(goodcountanimation, forkey: nil) // shopping cart shaking let cartanimation = cabasicanimation(keypath: "transform.translation.y") cartanimation.duration = 0.25 cartanimation.fromvalue = -5 cartanimation.tovalue = 5 cartanimation.autoreverses = true cartbutton.layer.add(cartanimation, forkey: nil) }} |
购物车里面可以增加／减少购买数量，总价跟着会动态变动。主要是有用到了两个东西，一个是 selected 变量，一个是 recalculatecount() 函数。根据 selected 来决定最后的总价，如果有变动，则重新计算 (recalculatecount)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
fileprivate func recalculatecount() { for model in addfoodarray! { if model.selected == true { price += float(model.count) * (model.vipprice! as nsstring).floatvalue } } // assign price let attributetext = nsmutableattributedstring(string: "subtotal: \(self.price)") attributetext.setattributes([nsforegroundcolorattributename: uicolor.red], range: nsmakerange(5, attributetext.length - 5)) totalpricelabel.attributedtext = attributetext price = 0 tableview.reloaddata() } |
没有实现 pay() 功能。打算之后尝试 apple pay ，之前用惯了支付宝，刚来美国的时候很难受，其实很多地方中国都已经比美国好很多了。还好现在有了 apple pay ，还挺好用的。
自定义个人主页
profile
本来打算做成简书那样，但是。。作为新手感觉还是有点难度。也是因为我这 app 里没有必要实现那些，就没仔细研究。
如前面提到的这页用的 collectionview，两个 section，一个是 usercollectionviewcell ， 下面是 historycollectionviewcell 。 下面这个 section 像一个 table 的 section，有一个会自动悬浮的 header，这 header 用的是 alin 大神的轮子， levitateheaderflowlayout() ，当然这个文件的 copyright 是用他的名字的。
|
1
2
3
4
5
6
7
8
9
10
|
class collectionviewflowlayout: levitateheaderflowlayout { override func prepare() { super.prepare() collectionview?.alwaysbouncevertical = true scrolldirection = .vertical minimumlinespacing = 5 minimuminteritemspacing = 0 }} |
这项目总体来说应该算很小的，如果后端也实现了，也算一个蛮完整的小项目了吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/e74381751b51
