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种方式：

1. 直接拖动stack view组件
2. 把视图中的多个组件选中后，点击 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），实现重用和数据显示绑定

1. 拖一个Table View，设置Table View的约束为上下左右0
2. 设置Table View为动态，prototype 为1
3. 设置Table View cell的 style 为 basic，identifier为 ReuseCell
4. 设置 cell 的 image
5. 增加ViewController的UITableViewDataSource，有2个方法需要实现numberOfRowsInSection、cellForRowAt indexPath
6. 设置 mock 数据，为数组
7. 关联数据和 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

---

中级篇

model重构

静态单元格

导航栏定制、动态字体

视差动画

特效、动画、手势