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

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

  BTW, 想了解 MongoDB 的可以看我的这两篇文章- Part 1 , Part 2 ,我之前做了个完整的网站 demo,前后端都实现了,建于 Heroku ,感觉挺酷的。

  目录

  在这个 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。代码很简单

  let dateString = DateFormatter.localizedString(from: NSDate() as Date, dateStyle: .medium, timeStyle: .short)

  self.refreshControl.attributedTitle = NSAttributedString(string: "Last updated alt="" width="270" height="480" border="1" />

  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

  }

  }

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