IOS Open Source A simple Ordering app UI Framework _ios

Objective

We have been learning Swift for some time and have done some small demo. Always wanted to do a complete project, found that the school's takeout order has gradually become popular, unlike China has so many powerful take-away software, the United States has, but not many, at least the Chinese people are not familiar with the software is not very good. It's going to be an app for lunch, a few days, just a UI, a small looking software, and a little bit more for beginners to do. How Swift interacts with the backend and so on, and then slowly learn, there are databases and so I am quite familiar with, SQL or MongoDB.

Directory
in this app, all the UI is created in code, and you can see it in the storyboard of Swift, which I used to practice before, but at 10 pages it felt like storyboard was starting to get a little messy, especially those segue The line is all over the screen. Then I began to use Snapkit to do UI, although compared to CSS, or a little inconvenient, but it is OK to use it. Here's a list of some of the basic features of implementation:

Boot page
Lunch Menu (TableView)
Shopping Cart, animation
Drop down Refresh
Custom Personal homepage (CollectionView)
Reminder and Setting need to be backstage, using Alert to simply respond to the
Full screen right sliding exit

Specific code please see my Github, below I will mainly show the effect, a little bit about the implementation process, the code has a lot of comments.

Boot page

Boot page I did it with CollectionView, and just start by deciding whether to enter the boot page or, if the version is updated, enter. The CollectionView sliding direction is set to. Horizontal, setting any number of pages. Add a startup Startbutton, set the previous pages to be Startbutton.ishidden = True, display the last page, and add a fading display animation.

Menus and shopping Carts

ShoppingCart

Menu can be pulled down to refresh, this is intended to customize the Drop-down refresh, like the Alin project, but there seems to be a problem, I used the Uirefreshcontrol, when the Drop-down display refresh time, slightly adjusted the next time format. The code is simple.

Copy Code code as follows:

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

Then do a shopping cart animation, the picture in the menu to zoom out after the "throw in" shopping cart, in fact, a path along the Uibezierpath, after this animation, in the Animationdidstop () to do shopping cart picture jitter, and show the number of items purchased, that Countlabel is a uilabel () with a width of 15 in the upper-right corner of the shopping cart picture.

First implement a callback method, when clicked on the cell purchase button after the trigger

Func Menulistcell (_ Cell:menulistcell, Foodimageview:uiimageview)
 {
  guard let Indexpath = Tableview.indexpath (For:cell) Else {return}

  //Retrieve-food model, add it to shopping cart model let
  model = Foodarra Y[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)
 }

This is a click after the purchase of the animation implementation:

Fileprivate Func Startanimation (_ Rect:cgrect, Foodimageview:uiimageview)
 {
  If layer = nil {
   layer = Calaye R ()
   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 +)
   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 ()
 }

This is magnified, shrunk, and thrown into the shopping cart by the group animation

 Start group Animation:throw, larger, smaller image fileprivate func groupanimation () {Tableview.isuserinteracti Onenabled = 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.t Imingfunction = camediatimingfunction (Name:kcamediatimingfunctioneasein)//smaller image let Smallanimation = CABasic Animation (keypath: "Transform.scale") Smallanimation.begintime = 0.5 Smallanimation.duration = 1 Smallanimation.from Value = 2 Smallanimation.tovalue = 0.5 Smallanimation.timingfunction = camediatimingfunction (name:kcamediatimingfunct Ioneaseout)//Group animation Let groupanimation = Caanimationgroup () groupanimation.animations = [Animation, Bigani Mation, Smallanimation] grOupanimation.duration = 1.5 Groupanimation.isremovedoncompletion = False Groupanimation.fillmode = KCAFillModeForwards Groupanimation.delegate = self layer?.

 Add (groupanimation, Forkey: "Groupanimation")}

The animation effect after the group animation ends.

 End image animation, start other animations func Animationdidstop (_ anim:caanimation, finished Flag:bool) {if a Nim = = Layer? Animation (forkey: "Groupanimation") {//start user interaction tableview.isuserinteractionenabled = TRUE//hi De layer layer? Removeallanimations () layer?  Removefromsuperlayer () layer = NIL//if user buy all food, show the Count label if Self.addFoodArray.count > 0 {Addcountlabel.ishidden = false}//Show the "Count label let goodcountanimation = Catransition () goodc Ountanimation.duration = 0.25 Addcountlabel.text = "\ (self.addFoodArray.count)" AddCountLabel.layer.add (Goodcountani Mation, Forkey:nil)//Shopping cart shaking let cartanimation = Cabasicanimation (keypath: "TRANSFORM.TRANSLATION.Y" ) Cartanimation.duration = 0.25 Cartanimation.fromvalue =-5 Cartanimation.tovalue = 5 Cartanimation.autorever

 SES = True CartButton.layer.add (cartanimation, Forkey:nil)}}

The shopping cart can increase/decrease the purchase quantity, and the total price will be changed dynamically. Mainly useful to two things, one is the selected variable, one is the Recalculatecount () function. The final total price is determined according to the selected and, if there is a change, recalculated (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 ()
 }

The Pay () feature is not implemented. After the attempt to try Apple Pay, used to use Alipay, just came to the United States very uncomfortable, in fact, many places in China are already much better than the United States. Fortunately, there are Apple Pay, it is very useful.

Customizing your Personal home page

Profile

I was going to do Jianshu, but. It's still a little difficult being a beginner. It's also because I don't have to do that in this app, I don't study it very carefully.

As mentioned above, this page uses the CollectionView, two section, one is Usercollectionviewcell, the following is Historycollectionviewcell. The section below, like a table section, has a header that is automatically suspended, which uses the Alin Wheel, Levitateheaderflowlayout (), and of course the copyright of this file is With his name.

Class Collectionviewflowlayout:levitateheaderflowlayout {
 override Func prepare () {
  super.prepare ()

  CollectionView? Alwaysbouncevertical = True
  scrolldirection =. Vertical
  minimumlinespacing = 5
  minimuminteritemspacing = 0
 }
}

This project should be very small in general, if the backend is also realized, it is a pretty complete small project.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.