iOS 11 開發(fā)第一季 入門篇
視頻教程地址：http://www.xiaoboswift.com/course/89
入門篇
- 開發(fā)環(huán)境配置
- 第一個 APP
- Swift 和 playground
- 創(chuàng)建用戶交互
前2章節(jié)主要是聊聊天。說明下學(xué)習(xí) iOS 開發(fā)需要買 Mac 電腦最省心。
Xcode 在 APP store上免費下載。
最終上架 Appstore 需要購買 Apple Developer 帳號：688/年。
第3章通過實例演示 playground
//: Playground - noun: a place where people can play
import UIKit
let 矩形 = CGRect(x: 10, y: 10, width: 375, height: 44)
let 訂購按鈕 = UILabel(frame: 矩形)
訂購按鈕.text = "立即訂購"
訂購按鈕.textColor = UIColor.white
訂購按鈕.backgroundColor = UIColor.orange
訂購按鈕.textAlignment = .center
訂購按鈕.layer.cornerRadius = 4
訂購按鈕.clipsToBounds = true
第4章
通過創(chuàng)建第一個 Hello world 項目：
熟悉 Xcode 創(chuàng)建新項目
了解 Xcode 軟件界面
在界面中新增一個 button 按鈕
了解基本的元素在界面中的約束，通過可視化的方式來設(shè)定和更改
通過 control+拖動的方式，把 interface builder 中的元素和 View Controller代碼進(jìn)行綁定。從而可以實現(xiàn) 對應(yīng) 的Action
初級篇
第1章: Auto Layout
約束方式：對齊約束和距離約束
safe area
第2章: Stack View
以T恤貨架展示，利用 stack view 組織元素，減少設(shè)置約束。
Stack View可以水平、垂直顯示
簡單的來說，就是類似于 sketch 或者 keynote 中的 group，把零散的元素組合成一個 group，對 group 進(jìn)行整體設(shè)置約束方式。
stack view 本身也提供了對齊、組內(nèi)元素分布方式、間距等簡單的屬性調(diào)節(jié)
想使用stack view，有2種方式：
- 直接拖動stack view組件
- 把視圖中的多個組件選中后，點擊 emable stack view圖標(biāo)（interface building 右下角，設(shè)置約束的 icon 處）
最后介紹了下，相對約束。Stack View 和父視圖的 safe area 等寬。
第3章: Size Class
對Size Class的 whRC(寬、高、標(biāo)準(zhǔn)、緊湊)進(jìn)行了介紹。
主要是針對 iPad 和 iPhone ；以及橫豎屏的適配。
增加的變體來進(jìn)行設(shè)置不同的屬性值。
第4章: Table View
通過利用Table View自帶的 style（basic），實現(xiàn)重用和數(shù)據(jù)顯示綁定
- 拖一個Table View，設(shè)置Table View的約束為上下左右0
- 設(shè)置Table View為動態(tài)，prototype 為1
- 設(shè)置Table View cell的 style 為 basic，identifier為 ReuseCell
- 設(shè)置 cell 的 image
- 增加ViewController的UITableViewDataSource，有2個方法需要實現(xiàn)numberOfRowsInSection、cellForRowAt indexPath
- 設(shè)置 mock 數(shù)據(jù)，為數(shù)組
- 關(guān)聯(lián)數(shù)據(jù)和 cell 的關(guān)系。Control 拖動 Tableview 到view Controller。為datasource。
//
// ViewController.swift
// TableView
//
// Created by Yang Peiyuan on 11/02/2018.
// Copyright ? 2018 Yang Peiyuan. All rights reserved.
//
import UIKit
class ViewController: UIViewController, UITableViewDataSource{
var weapons = ["手槍:手槍是一種單手握持瞄準(zhǔn)射擊或本能射擊的短槍管武器，通常為指揮員和特種兵隨身攜帶，用在50米近程內(nèi)自衛(wèi)和突然襲擊敵人?，F(xiàn)代手槍的基本特點是：變換保險、槍彈上膛、更換彈匣...","氣槍","機槍","沖鋒槍","榴彈槍","狙擊槍","平底鍋","qqqq","手槍","氣槍","機槍","沖鋒槍","榴彈槍","狙擊槍","平底鍋","qqqq"]
var images = ["手槍","氣槍","機槍","沖鋒槍","榴彈槍","狙擊槍","平底鍋","qqqq","手槍","氣槍","機槍","沖鋒槍","榴彈槍","狙擊槍","平底鍋","qqqq"]
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return weapons.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier:"ReuseCell", for: indexPath)
cell.textLabel?.text = weapons[indexPath.row]
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
第5章: 自定義單元格
UITableViewController
準(zhǔn)備工作
- 創(chuàng)建新工程
- 拖動TableViewController
- 創(chuàng)建新的 weaponsController class，繼承于TableViewController
- 綁定TableViewController和新的 weaponsController class
- 拖動程序起點到新拖動的 TableViewController 上
- 刪除默認(rèn)的ViewController視圖和 class
- 準(zhǔn)備數(shù)據(jù)和圖片
var weapons = ["手槍","機槍","沖鋒槍","來福槍","榴彈槍","平底鍋","gogogo","手槍","機槍","沖鋒槍","來福槍","榴彈槍","平底鍋","gogogo"]
var weaponTypes = ["A","B","C","D","E","F","G","A","B","C","D","E","F","G"]
var origins = ["中國","美國","英國","法國","俄羅斯","意大利","以色列","中國","美國","英國","法國","俄羅斯","意大利","以色列"]
var weaponImages = ["1","2","3","4","1","2","3","1","2","3","4","1","2","3"]
自定義Cell 樣式
- 設(shè)置TableView 和 Cell 的高度為500
- 拖動空的 view 到 cell，設(shè)置約束上下左右20
- 拖動 image view，約束充滿整個屏幕。填充模式 aspect fill
- 拖動 Visual effect view，模糊背景標(biāo)題欄。設(shè)置約束 0 0 0，高度80
- 拖動label名稱和類型。組成 stack view。設(shè)置約束垂直居中，左邊距20
- 拖動 imageview 收藏。設(shè)置約束垂直居中，右邊距20。大小50
- 拖動 label 產(chǎn)地。設(shè)置約束20
- 設(shè)置Cell 的 identifier為 CardCell
- 創(chuàng)建 CaredCell 的控制器繼承UITableViewCell
- 連接視圖和控制器
- 把視圖中的 UI 組件和CaredCell控制器 outlet 連接起來（5個組件元素）
TableView數(shù)據(jù)填充
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return weapons.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let id = String(describing:CardCell.self)
let cell = tableView.dequeueReusableCell(withIdentifier: id, for: indexPath) as! CardCell
//Configure the cell...
cell.weapon.text = weapons[indexPath.row]
cell.weaponType.text = weaponTypes[indexPath.row]
cell.origin.text = origins[indexPath.row]
cell.weapImage.image = UIImage(named: weaponImages[indexPath.row])
return cell
}
圓角和陰影效果實現(xiàn)
通過extension 、@IBInspectable 來實現(xiàn)擴展。還是蠻有意思的。自定義代碼可以改版 xcode 的屬性面板。。。
//
// UIViewHelper.swift
// TableViewController
//
// Created by Yang Peiyuan on 12/02/2018.
// Copyright ? 2018 Yang Peiyuan. All rights reserved.
//
import UIKit
extension UIView{
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
第6章: 單元格交互
第7章: 單元格滑動菜單
第8章:導(dǎo)航和轉(zhuǎn)場
導(dǎo)航和轉(zhuǎn)場介紹
增加導(dǎo)航。通過 edit——embed in——NavigationController
修改標(biāo)題名稱。Navigation item——title
使用 large Title。NavigationController——prefers Large title
新場景
新增視圖ViewController
新增 weaponDetailViewController
在視圖中增加綁定關(guān)系
control+拖動。把 CarCell 拖動到weaponDetailViewController。選擇 push。
增加 image 組件。創(chuàng)建 outlet，headerimageview
傳值
增加 image 組件。創(chuàng)建 outlet，headerimageview
