ios官方菜單項目重點剖析附項目源碼

時間 2019-11-20

標籤 ios 官方菜單項目重點剖析源碼欄目 iOS 简体版

原文原文鏈接

原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.htmlhtml

項目知識重點：swift

1，使用堆棧視圖實現自動佈局。數組

2，自定義控件的建立與使用。app

3，調用手機系統圖片庫。ide

開發環境：工具：Xcode8.2測試版，語言：swift3.0.1(因爲環境緣由，流程略微不一樣)工具

一，項目功能介紹及預覽佈局

主體功能：對一個菜單列表進行展現，刪除，修改，添加操做測試

界面預覽：ui

二，自定義控件spa

咱們建立工程後先將咱們的新增頁面構建好，從預覽圖中能夠看出是由一個導航條，文本框，和一個圖片視圖，還有五顆星構成。相信前幾個控件都沒什麼問題，關鍵在於這個自定義控件。

咱們都知道每個控件都是會默認關聯一個類的，因此：咱們這個五角星評價控件(下文稱rating)一模一樣的須要關聯一個自定義的類。

 1 //
 2 //  RatingControl.swift
 3 //  Food
 4 //
 5 //  Created by C02 on 2016/12/14.
 6 //  Copyright © 2016年 Aida. All rights reserved.
 7 //
 8 
 9 import UIKit
10 
11 /*
12  自定義星級評價控件
13  */
14 class RatingControl: UIView {
15     
16     let spacing = 5//星星間距
17     let ratingCount = 5//星星個數
18     var filledArr = [UIButton]()//filled星星數組
19     var rating = 0 {
20         didSet{
21             setNeedsLayout()
22         }
23     }
24     
25     required init?(coder aDecoder: NSCoder) {
26         super.init(coder: aDecoder)
27         
28         for _ in 0..<ratingCount{
29             let btn = UIButton()
30             btn.setImage(UIImage(named:"empty"), for: .normal)
31             btn.setImage(UIImage(named: "filled"), for: .selected)
32             btn.setImage(UIImage(named: "filled"), for: [.highlighted,.selected])
33             btn.adjustsImageWhenHighlighted = false
34             //控件單擊事件
35             btn.addTarget(self, action: #selector(RatingControl.ratingClicked(sender:)), for:.touchDown)
36             filledArr += [btn]
37             self.addSubview(btn)
38         }
39     }
40     
41     func ratingClicked(sender:UIButton){
42         rating = filledArr.index(of: sender)! + 1
43         updateBtnStar()
44     }
45     
46     func updateBtnStar(){
47         for(index,btn) in filledArr.enumerated(){
48             btn.isSelected = index < rating
49         }
50     }
51     
52     override func layoutSubviews() {
53         let size = Int(self.frame.height)
54         for (index,btn) in filledArr.enumerated() {
55             btn.frame = CGRect(x: index * (size + spacing), y: 0, width: size, height: size)
56         }
57         updateBtnStar()
58     }
59     
60     //返回此控件大小
61     override var intrinsicContentSize: CGSize {
62         //控件默認高度44
63         let ratingHeight = Int(self.frame.height)
64         //控件寬度=星星數*(控件高度+間距)
65         let ratingWidth = ratingCount*(ratingHeight+spacing)
66         return CGSize(width: ratingWidth, height: ratingHeight)
67     }
68     
69 }

View Code

三，使用自定義控件

解析：在咱們的視圖控制器中加入文本框和圖片後，再添加一個view視圖，而後將這個view關聯咱們上一步定義的RatingControl類。

此時運行模擬器，即可以看到咱們的rating控件，大小與位置咱們稍後再作調整。

四，使用堆棧視圖實現自動佈局。

咱們都知道咱們的應用可能會運行在不一樣分辨率，不一樣尺寸，橫屏，豎屏等狀態下，因此佈局天然不能一成不變。

1，選中三個控件->Xcode工具欄Editor->Embed In->StakeView將其嵌入到堆棧視圖中，或者使用視圖下方的快捷工具。

2，添加合適的約束

咱們要將咱們的控件在各類狀況下均可以獲得正常的顯示，能夠將整個視圖分割成若干個子視圖，把子視圖位置調整好。同理，一種層層處理方式再繼續調整每個控件。

顯而易見，本例中咱們先須要將棧調整。

選中StackView首先對上左右三個方向進行約束，可是此時並不能肯定StackView的高度，在肯定StackView中每個控件的高度後，天然這個棧的全部約束也就完成了。

注意：在咱們的ImageView和Rating控件須要固定大小須要如此設置

爲了有良好的交互性，所以咱們這裏設置了一個默認的圖片，以及控件之間的間距。

五，調用手機系統圖庫及配置手勢操做

在新增項的時候咱們須要經過點擊視圖中的默認圖片添加一個手機圖庫中的圖片。

注意：此時咱們須要拖入一個UITapGestureRecognizer控件在ImageView上，要讓點擊有效此時必須啓用用戶交互，如圖所示。

接下來就是將這個控件關聯到咱們的代碼中

 1 //
 2 //  ViewController.swift
 3 //  Food
 4 //
 5 //  Created by Aida on 2016/12/14.
 6 //  Copyright © 2016年 Aida. All rights reserved.
 7 //
 8 
 9 import UIKit
10 
11 class ViewController: UIViewController ,UITextFieldDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate{
12 
13     @IBOutlet weak var nameText: UITextField!
14     
15     @IBOutlet weak var photoImg: UIImageView!
16     
17     @IBOutlet weak var ratingControl: RatingControl!
18     @IBOutlet weak var saveOutlet: UIBarButtonItem!
19     
20     var meal:Meal?
21     override func viewDidLoad() {
22         super.viewDidLoad()
23         self.nameText.delegate = self
24         
25         
26     }
27     
28     override func didReceiveMemoryWarning() {
29         super.didReceiveMemoryWarning()
30         // Dispose of any resources that can be recreated.
31     }
32 
33     //MARK: 手勢識別方法
34     @IBAction func selectPhoto(_ sender: UITapGestureRecognizer) {
35         let imagePickerController = UIImagePickerController()
36         
37         imagePickerController.sourceType = .photoLibrary
38         
39         imagePickerController.delegate = self
40         
41         present(imagePickerController, animated: true, completion: nil)
42     }
43     
44     //圖片選擇以前取消事件
45     func imagePickerControllerDidCancel(_ picker: UIImagePickerController){
46         
47         dismiss(animated: true, completion: nil)
48     }
49     
50     //選中圖片事件
51     func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]){
52         
53         let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
54         
55         // Set photoImageView to display the selected image.
56         photoImg.image = selectedImage
57         
58         // Dismiss the picker.
59         dismiss(animated: true, completion: nil)
60     }