字学镜像计划-UI编程（大纲）

easycodesniper
245 阅读5分钟

Application和UIViewController

吐槽在前面：为什么字节不把字学镜像计划的PPT放出来呢...

Application

  • 应用程序入口
  • UIApplication是应用的象征
  • 是一个单例
  • 可以通过UIApplication做一些应用级别的操作

应用程序生命周期

  • Active-激活
  • Inactive-非激活
  • Background-后台
  • Suspended-挂起
  • Not Running-未运行

UI配置

- (Bool)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)LaunchOptions{
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:UIScreen.mainScreen.bounds];
self.window.rootViewController = [[ViewController alloc] init];
[self.window makeKeyAndVisible];
return YES;

windows存在一个level的概念，高level的window会在上层。
[makeKeyAndVisible]使window成为key window（主窗口）并可视化，挡遭遇一些点击事件就会传给这个窗口。

ViewController

  • 管理视图层级
    • 一般来说，每个ViewController管理1个页面
      • window是展示洁面， VC是用来组织界面的，其最重要的属性是view
    • 每个ViewController有个view属性作为其管理的视图的根视图
      • view是树状结构，view上可以有子view，子view添加到视图层级时会有生命周期的回调
  • 处理视图相关事件
    • viewAppear（页面展现）
    • viewAppear（页面销毁）
  • 常见的ViewController：
    • UIViewController
    • UINavigationController(container viewcontroller)
    • UITabBarController(container viewcontroller)

坐标系和视图层级

  • UIWindow
    • 用户界面的画布，App上可能有1个以上的window
    • 一般情况下是视图层级中的根视图，UIWindow继承于UIView
    • 负责分发事件给子视图

view的生命周期

frame、bounds和center

UIView有三个重要的布局属性：frame、bounds、center

  • frame的坐标系相对于superview， 通常起点是左上角
  • bounds的坐标系是相对于自身，通常起点是（0，0）
  • center是其anchorPoint相对于superview的位置
  • anchorPoint一般是视图的中心

手动布局（Frame-Based Layout）

通常frame描述了view在其superview中的位置（origin）和大小（size）
因此我们说布局，往往是在给view的frame设置何时的位置（origin）和大小（size）

优点

  • 简单
  • 高性能 缺点
  • 可维护性差

自动布局（AutoLayout）

  • iOS设备碎片化， iOS6引入autolayout
  • 类似Android的RelativeLayout AutoLayout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints pplaced on those views
RedView.Leading = 1.0 * BlueView.trailing + 8.0

（我想这里有图片会更好，但很抱歉目前我还未熟练使用图床）
（此处在字学镜像第二课中有图片描述）

业界提供但api比较冗长，业界探索简练但语法DSL

  • Masonry/SnapKit（其实一样，只不过分别属于oc和swift） Github地址

响应链与手势

响应链——UIEvent

  • 把屏幕监测到的点击事件用UITouch对象来表示，最终被封装成UIEvent作为事件的消息载体在响应链上传递
  • 发生触摸事件后，系统会将改时间加入到一个由UIApplication管理的事件队列中
  • UIApplication会从事件队列中取出最前面的事件，并将事件发下去以便处理，通常先发送事件给应用程序的主窗口
  • 主窗口（keyWindow）会在视图层次结构中找到一个最适合的视图来处理触摸事件

响应链——UIResponder Chain

  • UIResponder
    • -void)touchesBegan:(NSSet* )touches withEvent:(UIEvent* )event;
    • -(void)tourchesMoved:(NSSet* )touches withEvent:(UIEvent* )event;
    • -(void)tourchesEnded:(NSSet* )touches withEvent:(UIEvent* )event;
    • -(void)tourchesCancelled:(NSSet* )touches withEvent:(UIEvent* )event;
  • 参考链接简书

寻找发生Event的View：Hit-testing

 Hit-testing应用：扩大按钮点击范围

手势

[此处有很重要的各种UIXxxRecognizer类的关系图]

  • UIApplicationHandleEventQueue()
    • UIEvent
      • 手势识别
      • 处理屏幕旋转
      • 发送给UIIWindow
  • 添加手势
  • UIGestureRecognizerDelegate
  • UIControl/UIButton 继承于UIView， 封装了事件处理逻辑， 提供便捷的API， 供用户响应事件

控件的一些通用特性

  • UIView
    • frame
    • layer
    • transform
    • superview
    • subviews
  • UIControl
    • enable
    • selected
    • highlighted
    • target/action/enevt
  • Others
    • backgroundColor
    • text
    • backgroundimage
    • font

页面的组成

页面上的UI元素

  • 背景 - UIView
  • 文本 - UILabel 标签经常用于显示固定的文本，其外观是可配置的，它们可以显示普通字符串， 或者属性字符串，允许您自定义标签中子字符串的外观。
  • 图片 - UIImageView
    • 可以用于显示PNG或者JPEG的多种格式图片，也可以显示图片序列的动图
    • 不支持Gif的动图
    • 图片有3种不同的缩放策略
  • 按钮 - UIButton UIButton继承于UIControl
    • 内置组合了lable和imageview
    • 不同state下的，title/icon配置
    • 封装了便捷的API接口，处理用户交互事件

页面上的复杂元素

  • 滚动视图 - UIScrollView

    UIScrollView是一个显示内容大小超过屏幕界面的控件， 可以垂直或者水平滚动，也支持手势的缩放操作。 它是很多可滚动控件的父类，包括 UITableView和UITextView

  • 滑动列表 - UITableView

    UITableView是基于UIScrollView实现的，通过行和组的划分来组织页面

    • 使用UITableViewCell用于表示列表中的1行
    • 基于UITableViewCekk实现了行级别的视图复用（reuse） 优点
    • 高性能， cell复用回收，CPU/内存友好
    • 符合大多数App的结构化数据表达

利用这些基本组件，我们就可以构建出复杂的页面，来满足业务需要

UITableView:DataSource & Delegate

  1. 创建TableView
  2. 指定DataSource和Delegate
  3. 实现DataSource和Delegate协议：
    • 指定组（secetion）的数量和各个组分别有多少行（rows）
    • 指定第N组中第M行的cell高度
    • 指定第N组中第M行第cell类型
avatar
文章
阅读
粉丝