欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iOS開源一個(gè)簡(jiǎn)單的訂餐app UI框架

 更新時(shí)間:2016年10月17日 10:26:27   作者:諸葛俊偉  
這篇文章主要介紹了iOS開源一個(gè)簡(jiǎn)單的訂餐app UI框架,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

前言

學(xué) Swift 也有一段時(shí)間了,做了一些小的 demo。一直想做個(gè)完整的項(xiàng)目,發(fā)現(xiàn)這邊學(xué)校的外賣訂餐也逐漸流行起來(lái),不像中國(guó)有那么多強(qiáng)大的外賣軟件,美國(guó)也有,但不多,起碼中國(guó)人對(duì)那些軟件都不太熟知也不怎么用。打算專門針對(duì)午餐的外賣做個(gè)app,做了幾天,只做出個(gè) UI,看上去很小的軟件,新手做起來(lái)感覺東西還是有點(diǎn)多。 Swift 如何與后端交互 之類的之后再慢慢學(xué)吧,有數(shù)據(jù)庫(kù)之類的我都挺熟悉,SQL 或者 MongoDB。

目錄
在這個(gè) app 中,所有 UI 都是用代碼創(chuàng)建的,你可以在 100 Days of Swift 看到,我之前練習(xí)的時(shí)候都是用的 storyboard,但是到了10頁(yè)以上感覺 storyboard 就開始有點(diǎn)亂了,特別是那些 segue 的線牽得滿屏幕都是的時(shí)候。之后我就開始用 SnapKit 做 UI 了,雖然比起 CSS 來(lái),還是有點(diǎn)不方便,但用起來(lái)感覺還行。下面我大概羅列了一些實(shí)現(xiàn)的基本功能:

引導(dǎo)頁(yè)
午餐菜單(tableView)
購(gòu)物車,動(dòng)畫
下拉刷新
自定義個(gè)人主頁(yè) (collectionView)
Reminder 和 Setting 需要后臺(tái),就用了 Alert 來(lái)簡(jiǎn)單響應(yīng)了
全屏右滑退出

具體代碼請(qǐng)看我的 Github, 下面我就主要展示一下效果,稍微講一下實(shí)現(xiàn)過程,代碼中已有很多注釋。

引導(dǎo)頁(yè)

引導(dǎo)頁(yè)我是用 collectionView 做的,剛開始先判斷要不要進(jìn)入引導(dǎo)頁(yè),如果版本更新,則進(jìn)入。collectionView 滑動(dòng)方向設(shè)置為 .horizontal ,設(shè)置任意數(shù)量的頁(yè)數(shù)。添加一個(gè)啟動(dòng)的 startButton ,設(shè)置前幾頁(yè)都為 startButton.isHidden = true ,最后一頁(yè)的時(shí)候顯示出來(lái),再添加一個(gè)漸出的顯示動(dòng)畫。

菜單和購(gòu)物車


shoppingCart

菜單可以下拉刷新,本打算自定義下拉刷新,就像 ALin 的項(xiàng)目中那樣,但是好像有點(diǎn)問題,我就用了自帶的UIRefreshControl ,下拉的時(shí)候顯示刷新的時(shí)間,稍微調(diào)整了下時(shí)間的 format。代碼很簡(jiǎn)單

復(fù)制代碼 代碼如下:
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

然后做了個(gè)購(gòu)物車的動(dòng)畫,將菜單里的圖片先放大后縮小“拋入”購(gòu)物車,其實(shí)是沿著 UIBezierPath 走的一個(gè)路徑,這段動(dòng)畫完了之后,在 animationDidStop() 里做購(gòu)物車圖片的抖動(dòng),和顯示購(gòu)買的物品數(shù)量,那個(gè) countLabel 是個(gè)長(zhǎng)寬都為 15 的在購(gòu)物車圖片右上角的 UILabel() 。

先實(shí)現(xiàn)一個(gè)回調(diào)方法,當(dāng)點(diǎn)擊了cell上的購(gòu)買按鈕后觸發(fā)

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

這是點(diǎn)擊購(gòu)買之后的動(dòng)畫實(shí)現(xiàn):

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

這是放大,縮小,拋入購(gòu)物車的組動(dòng)畫

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

組動(dòng)畫結(jié)束后的一些動(dòng)畫效果。

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

購(gòu)物車?yán)锩婵梢栽黾樱瘻p少購(gòu)買數(shù)量,總價(jià)跟著會(huì)動(dòng)態(tài)變動(dòng)。主要是有用到了兩個(gè)東西,一個(gè)是 selected 變量,一個(gè)是 reCalculateCount() 函數(shù)。根據(jù) selected 來(lái)決定最后的總價(jià),如果有變動(dòng),則重新計(jì)算 (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()
 }

沒有實(shí)現(xiàn) Pay() 功能。打算之后嘗試 Apple Pay ,之前用慣了支付寶,剛來(lái)美國(guó)的時(shí)候很難受,其實(shí)很多地方中國(guó)都已經(jīng)比美國(guó)好很多了。還好現(xiàn)在有了 Apple Pay ,還挺好用的。

自定義個(gè)人主頁(yè)


profile

本來(lái)打算做成簡(jiǎn)書那樣,但是。。作為新手感覺還是有點(diǎn)難度。也是因?yàn)槲疫@ app 里沒有必要實(shí)現(xiàn)那些,就沒仔細(xì)研究。

如前面提到的這頁(yè)用的 collectionView,兩個(gè) section,一個(gè)是 UserCollectionViewCell , 下面是 HistoryCollectionViewCell 。 下面這個(gè) section 像一個(gè) table 的 section,有一個(gè)會(huì)自動(dòng)懸浮的 header,這 header 用的是 ALin 大神的輪子, LevitateHeaderFlowLayout() ,當(dāng)然這個(gè)文件的 copyright 是用他的名字的。

class CollectionViewFlowLayout: LevitateHeaderFlowLayout {
 override func prepare() {
  super.prepare()

  collectionView?.alwaysBounceVertical = true
  scrollDirection = .vertical
  minimumLineSpacing = 5
  minimumInteritemSpacing = 0
 }
}


這項(xiàng)目總體來(lái)說應(yīng)該算很小的,如果后端也實(shí)現(xiàn)了,也算一個(gè)蠻完整的小項(xiàng)目了吧。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 關(guān)于iOS導(dǎo)航欄返回按鈕問題的解決方法

    關(guān)于iOS導(dǎo)航欄返回按鈕問題的解決方法

    這篇文章主要為大家詳細(xì)介紹了關(guān)于iOS導(dǎo)航欄返回按鈕問題的解決方法,對(duì)iOS自定義backBarButtonItem的點(diǎn)擊事件進(jìn)行介紹,感興趣的小伙伴們可以參考一下
    2016-05-05
  • 詳解IOS中文件路徑判斷是文件還是文件夾

    詳解IOS中文件路徑判斷是文件還是文件夾

    這篇文章主要介紹了詳解IOS中文件路徑判斷是文件還是文件夾的相關(guān)資料,這里提供兩種實(shí)現(xiàn)方法,需要的朋友可以參考下
    2017-09-09
  • 如何在IOS中使用IBeacon

    如何在IOS中使用IBeacon

    這篇文章主要介紹了如何在IOS中使用IBeacon,想了解IBeacon的同學(xué),一定要看一下
    2021-04-04
  • iOS開發(fā)輸入自動(dòng)填充UITextField背景色

    iOS開發(fā)輸入自動(dòng)填充UITextField背景色

    如何在iOS中實(shí)現(xiàn)輸入時(shí)自動(dòng)填充背景色的效果,首先,我們?cè)O(shè)置UITextField的背景色為初始顏色,然后,通過設(shè)置UITextField的代理,并監(jiān)聽UITextField的輸入事件,我們?cè)谟脩糸_始輸入時(shí)將其背景色改變?yōu)楦吡令伾?在用戶結(jié)束輸入時(shí)恢復(fù)為初始顏色
    2023-10-10
  • iOS中3DTouch預(yù)覽導(dǎo)致TableView滑動(dòng)卡頓問題解決的方法

    iOS中3DTouch預(yù)覽導(dǎo)致TableView滑動(dòng)卡頓問題解決的方法

    這篇文章主要給大家介紹了關(guān)于iOS中3DTouch預(yù)覽導(dǎo)致TableView滑動(dòng)卡頓問題解決的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)同樣遇到的朋友們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起看看吧。
    2018-03-03
  • 關(guān)于iOS自適應(yīng)cell行高的那些事兒

    關(guān)于iOS自適應(yīng)cell行高的那些事兒

    這篇文章主要給大家介紹了關(guān)于iOS自適應(yīng)cell行高的那些事兒,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一看看吧
    2018-11-11
  • IOS 開發(fā)之swift中手勢(shì)的實(shí)例詳解

    IOS 開發(fā)之swift中手勢(shì)的實(shí)例詳解

    這篇文章主要介紹了IOS 開發(fā)之swift中手勢(shì)的實(shí)例詳解的相關(guān)資料,希望通過本文大家能掌握IOS手勢(shì)的使用方法,需要的朋友可以參考下
    2017-09-09
  • iOS開發(fā)實(shí)現(xiàn)圖片瀏覽功能

    iOS開發(fā)實(shí)現(xiàn)圖片瀏覽功能

    這篇文章主要為大家詳細(xì)介紹了iOS開發(fā)實(shí)現(xiàn)圖片瀏覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • IOS實(shí)現(xiàn)選擇城市后跳轉(zhuǎn)Tabbar效果

    IOS實(shí)現(xiàn)選擇城市后跳轉(zhuǎn)Tabbar效果

    這篇文章主要為大家詳細(xì)介紹了IOS實(shí)現(xiàn)選擇城市后跳轉(zhuǎn)Tabbar效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • iOS 10 和Xcode8 一起 創(chuàng)建 Siri 功能步驟詳解(OC寫的 )

    iOS 10 和Xcode8 一起 創(chuàng)建 Siri 功能步驟詳解(OC寫的 )

    這篇文章主要介紹了iOS 10 和Xcode8 一起 創(chuàng)建 Siri 功能(OC寫的 ),本文分步驟給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2017-12-12

最新評(píng)論