欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-20 17:33:10
前言 学 swift 也有一段时间了,做了一些小的 demo。一直想做个完整的项目,发现这边学校的外卖订餐也逐渐流行起来,不像中国有那么多强大的外卖软件,美国也有,但...

前言

学 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() 。

先实现一个回调方法,当点击了cell上的购买按钮后触发

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)
 }

这是点击购买之后的动画实现:

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()
 }

这是放大,缩小,抛入购物车的组动画

 // start group animation: throw, larger, smaller image
 fileprivate 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")
 }

组动画结束后的一些动画效果。

 // end image animation, start other animations
 func 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)。

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 ,还挺好用的。

自定义个人主页

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

profile

本来打算做成简书那样,但是。。作为新手感觉还是有点难度。也是因为我这 app 里没有必要实现那些,就没仔细研究。

如前面提到的这页用的 collectionview,两个 section,一个是 usercollectionviewcell , 下面是 historycollectionviewcell 。 下面这个 section 像一个 table 的 section,有一个会自动悬浮的 header,这 header 用的是 alin 大神的*, levitateheaderflowlayout() ,当然这个文件的 copyright 是用他的名字的。

class collectionviewflowlayout: levitateheaderflowlayout {
 override func prepare() {
  super.prepare()

  collectionview?.alwaysbouncevertical = true
  scrolldirection = .vertical
  minimumlinespacing = 5
  minimuminteritemspacing = 0
 }
}


这项目总体来说应该算很小的,如果后端也实现了,也算一个蛮完整的小项目了吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: