美文网首页
小波说 Swift iOS11-图文速记

小波说 Swift iOS11-图文速记

作者: pypypy | 来源:发表于2018-02-06 16:35 被阅读0次
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重构

静态单元格

导航栏定制、动态字体

视差动画

特效、动画、手势

相关文章

  • 小波说 Swift iOS11-图文速记

    入门篇 开发环境配置 第一个 APP Swift 和 playground 创建用户交互 前2章节主要是聊聊天。说...

  • 学Swift速记

    Property(属性) 属性将值与特定的类、结构体或枚举联系起来。Stored属性将常量或变量存储作为实例的一部...

  • 小波,你说

    凌晨1点,思绪乱飞,这是我这个暑假第33天熬夜晚睡。看完了王小波的《一只特立独行的猪》,那就说说吧。 小波,你说:...

  • 学习--3天学会Swift 3.0

    看的他的视频:小波说雨燕 SwiftV课堂 虽说我是不相信3天学会Swift的,但是学习基本的知识还是可以的。 只...

  • swift 快速记忆

    (一)类型 常见类型 Array dictionary 枚举enum 结构struct 协议 对象 (二)语法 流...

  • 图文翻译|波译汉:哪里有好人就是天堂……

    图文翻译 波译汉 می گویند آدمهای خوب به بهشت میروند ... اما من می...

  • 17.5.9 刀哥Swift + 小波

    用通知实现视图随着键盘的弹出而上移(UIkeyboardFrameEndUserInfoKey. UIKeyboa...

  • Swift2.3适配Swift3.0时出现的各种问题

    Swift2.3适配Swift3.0时出现的各种问题 昨晚上一波手贱把我的小5s升到iOS10。如此配套的话,Xc...

  • Swift - UIButton图文位置

    在开发中我们常遇到要修改按钮图文位置,那么在swift中我们应该怎么做比较好呢?对按钮做些扩展,初始化完后调用方法...

  • 岁月匆匆不待人

    (图文:枯叶萧瑟) 秋风凉,秋意爽 秋色连波,波上洒墨香 枫红荒草...

网友评论

      本文标题:小波说 Swift iOS11-图文速记

      本文链接:https://www.haomeiwen.com/subject/vewgzxtx.html