小波说 Swift iOS11-图文速记
iOS 11 开发第一季 入门篇
视频教程地址：http://www.xiaoboswift.com/course/89
入门篇
- 开发环境配置
- 第一个 APP
- Swift 和 playground
- 创建用户交互
前2章节主要是聊聊天。说明下学习 iOS 开发需要买 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
Screen Shot 2018-02-06 at 18.58.26.png
第4章
通过创建第一个 Hello world 项目：
熟悉 Xcode 创建新项目
了解 Xcode 软件界面
在界面中新增一个 button 按钮
了解基本的元素在界面中的约束，通过可视化的方式来设定和更改
通过 control+拖动的方式，把 interface builder 中的元素和 View Controller代码进行绑定。从而可以实现 对应 的Action
Screen Shot 2018-02-07 at 17.46.49.png
初级篇
第1章: Auto Layout
约束方式：对齐约束和距离约束
safe area
第2章: Stack View
以T恤货架展示，利用 stack view 组织元素，减少设置约束。
Stack View可以水平、垂直显示
简单的来说，就是类似于 sketch 或者 keynote 中的 group，把零散的元素组合成一个 group，对 group 进行整体设置约束方式。
stack view 本身也提供了对齐、组内元素分布方式、间距等简单的属性调节
想使用stack view，有2种方式：
- 直接拖动stack view组件
- 把视图中的多个组件选中后，点击 emable stack view图标（interface building 右下角，设置约束的 icon 处）
最后介绍了下，相对约束。Stack View 和父视图的 safe area 等宽。
Screen Shot 2018-02-09 at 16.33.47.png
第3章: Size Class
对Size Class的 whRC(宽、高、标准、紧凑)进行了介绍。
主要是针对 iPad 和 iPhone ；以及横竖屏的适配。
增加的变体来进行设置不同的属性值。
第4章: Table View
通过利用Table View自带的 style（basic），实现重用和数据显示绑定
- 拖一个Table View，设置Table View的约束为上下左右0
- 设置Table View为动态，prototype 为1
- 设置Table View cell的 style 为 basic，identifier为 ReuseCell
- 设置 cell 的 image
- 增加ViewController的UITableViewDataSource，有2个方法需要实现numberOfRowsInSection、cellForRowAt indexPath
- 设置 mock 数据，为数组
- 关联数据和 cell 的关系。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 = ["手枪:手枪是一种单手握持瞄准射击或本能射击的短枪管武器，通常为指挥员和特种兵随身携带，用在50米近程内自卫和突然袭击敌人。现代手枪的基本特点是：变换保险、枪弹上膛、更换弹匣...","气枪","机枪","冲锋枪","榴弹枪","狙击枪","平底锅","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.
}
}
Simulator Screen Shot - iPhone X - 2018-02-11 at 13.02.40.png
第5章: 自定义单元格
UITableViewController
准备工作
- 创建新工程
- 拖动TableViewController
- 创建新的 weaponsController class，继承于TableViewController
- 绑定TableViewController和新的 weaponsController class
- 拖动程序起点到新拖动的 TableViewController 上
- 删除默认的ViewController视图和 class
- 准备数据和图片
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 样式
- 设置TableView 和 Cell 的高度为500
- 拖动空的 view 到 cell，设置约束上下左右20
- 拖动 image view，约束充满整个屏幕。填充模式 aspect fill
- 拖动 Visual effect view，模糊背景标题栏。设置约束 0 0 0，高度80
- 拖动label名称和类型。组成 stack view。设置约束垂直居中，左边距20
- 拖动 imageview 收藏。设置约束垂直居中，右边距20。大小50
- 拖动 label 产地。设置约束20
- 设置Cell 的 identifier为 CardCell
- 创建 CaredCell 的控制器继承UITableViewCell
- 连接视图和控制器
- 把视图中的 UI 组件和CaredCell控制器 outlet 连接起来（5个组件元素）
TableView数据填充
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
}
圆角和阴影效果实现
通过extension 、@IBInspectable 来实现扩展。还是蛮有意思的。自定义代码可以改版 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
}
}
}
Simulator Screen Shot - iPhone 8 - 2018-02-12 at 11.54.13.png
第6章: 单元格交互
第7章: 单元格滑动菜单
第8章:导航和转场
导航和转场介绍
增加导航。通过 edit——embed in——NavigationController
修改标题名称。Navigation item——title
使用 large Title。NavigationController——prefers Large title
新场景
新增视图ViewController
新增 weaponDetailViewController
在视图中增加绑定关系
control+拖动。把 CarCell 拖动到weaponDetailViewController。选择 push。
增加 image 组件。创建 outlet，headerimageview
传值
增加 image 组件。创建 outlet，headerimageview
