iPhone App Programming_2014_lecture10

Size: px

Start display at page:

Download "iPhone App Programming_2014_lecture10"

敢葱沈
5 years ago
Views:

1 ios 程序设计 (2014.9) 第十讲 : ipad 程序设计 Adaptive Layout 华南师范大学网络教育学院

2 第九章 ipad 程序设计 iphone 3GS 屏幕尺寸 :3.5 分辨率 :480X320 iphone 4/4S 屏幕尺寸 :3.5 分辨率 :960X640 (Retina) ipod Touch 4 iphone 5/5s 屏幕尺寸 :4 分辨率 :1136X640(Retina) ipad(2)/mini 屏幕尺寸 :9.7 / 7 分辨率 :1024X768 ipad Air(2) ipad mini 2/3 屏幕尺寸 :9.7 分辨率 :2048X1536 (Retina) 屏幕尺寸 :7 分辨率 :2048X1536 (Retina) 潘战生华南师范大学网络教育学院

3 第九章 ipad 程序设计 iphone 6 屏幕尺寸 :4.7 分辨率 :1334X750 iphone 6 plus 屏幕尺寸 :5.5 分辨率 :1920X1080 潘战生华南师范大学网络教育学院

4 第九章 ipad 程序设计所有的 iphone 界面的 UI 控件都可以在 ipad 界面中使用 ios 8 开始, 以下 UI 在 iphone/ipad 也可使用 : 分割 ( 屏 ) 视图 :(UISplitViewController) 弹出窗口 : (UIPopoverPresentationController) 潘战生华南师范大学网络教育学院

5 第九章 ipad 程序设计所有的 iphone 界面的 UI 控件都可以在 ipad 界面中使用 ios 8 开始, 以下 UI 在 iphone/ipad 也可使用 : 分割 ( 屏 ) 视图 :(UISplitViewController) 弹出窗口 : (UIPopoverPresentationController) 潘战生华南师范大学网络教育学院

6 第九章 ipad 程序设计所有的 iphone 界面的 UI 控件都可以在 ipad 界面中使用 ios 8 开始, 以下 UI 在 iphone/ipad 也可使用 : 分割 ( 屏 ) 视图 :(UISplitViewController) 弹出窗口 : (UIPopoverPresentationController) 潘战生华南师范大学网络教育学院

7 9.1 UISplitViewController Primary Secondary * 见后面有关 iphone 界面的描述潘战生华南师范大学网络教育学院 viewcontrollers 下标 0 viewcontrollers 下标 1

8 UISplitViewController 类属性 : viewcontrollers 类型为 [AnyObject] 9.1 UISplitViewController Primary Secondary * 见后面有关 iphone 界面的描述潘战生华南师范大学网络教育学院 viewcontrollers 下标 0 viewcontrollers 下标 1

9 UISplitViewController 类属性 : viewcontrollers 类型为 [AnyObject] 9.1 UISplitViewController 在 ipad 环境下 (horizontal size class 为 regular), 其一定是包含 2 个视图控制器 ( 或其子类 ) 对象 (Primary Secondary Controller) 在 iphone 环境下 (Compact), 默认为 1* (Primary) Primary Secondary * 见后面有关 iphone 界面的描述潘战生华南师范大学网络教育学院 viewcontrollers 下标 0 viewcontrollers 下标 1

10 9.1 UISplitViewController Primary Secondary viewcontrollers 下标 0 viewcontrollers 下标 1 潘战生华南师范大学网络教育学院

11 UISplitViewController 类属性 : viewcontrollers 类型为 [AnyObject] 9.1 UISplitViewController Primary Secondary viewcontrollers 下标 0 viewcontrollers 下标 1 潘战生华南师范大学网络教育学院

12 UISplitViewController 类属性 : viewcontrollers 类型为 [AnyObject] 9.1 UISplitViewController 其中 : 下标为 0 的控制器对应 LandScape 时的左边界面, 下标为 1 的控制器对应右边的界面在 Portrait 时左边界面隐藏, 只显示右边的界面 Primary Secondary viewcontrollers 下标 0 viewcontrollers 下标 1 潘战生华南师范大学网络教育学院

13 viewcontrollers 下标 1 向右 Swipe 手势

14 iphone 界面下 (iphone 6 Plus 除外 ),UISplitViewController 的行为就是 UINavigationController 其 viewcontrollers 数组在以下方法调用后值为 1: viewcontrollers 下标 0

15 StoryBoard 中 UISplitViewController 界面选择 Master 列表项, Detail 页面数据变化, 发生页面跳转, Segue 属性 : 潘战生华南师范大学网络教育学院

16 其中 Detail 界面一般处于导航环境中, 主要是需要通过 UINavigationController 提供 Detail 页面的导航栏, 以便在 Portrait 方向时放置 UIBarButtonItem 由于 Detail 界面在任何方向时均会显示, 故一般其对应的控制器对象还承担 UISplitViewControllerDelegate 委托的角色潘战生华南师范大学网络教育学院

17 UISplitViewController 的 delegate 属性 UISplitViewController 通过其 delegate 属性所指定的对象进行显示和隐藏有关 ( 左边 ) 视图控制器的操作该属性的定义如下 : var delegate: UISplitViewControllerDelegate! 意指 delegate 对象必须遵循 UISplitViewControllerDelegate 协议将 delegate 指定为左或右边界面的视图控制器均可, 视程序情况而定潘战生华南师范大学网络教育学院

18 UISplitViewController 的以下属性控制 Primary Controller 的宽度 : 潘战生华南师范大学网络教育学院

19 UISplitViewController 属性 preferreddisplaymode: 潘战生华南师范大学网络教育学院

20 .PrimaryOverlay 潘战生华南师范大学网络教育学院

21 .PrimaryHidden 潘战生华南师范大学网络教育学院

22 .Automatic Landscape 景观方向 Portrait 肖像方向潘战生华南师范大学网络教育学院

23 .AllVisible Landscape 景观方向 Portrait 肖像方向潘战生华南师范大学网络教育学院

24 UISplitViewController 属性 :collapsed 表示 UISplitViewController 是处于 collapsed 或 expanded 状态 UISplitViewController 处于 collapsed 状态 (true), 如果 : 其 horizontal size class 为 compact 此时 UISplitViewController 只有一个子视图控制器 (Master), 其它情况下, UISplitViewController 处于 expanded 状态 (false) 此时, 它能够同时显示其 2 个子视图控制器 ( 尽管可能没有同时显示, 这由 displaymode 属性决定 ) 潘战生华南师范大学网络教育学院

25 什么是 TraitCollection( 特性集合 )? 属性 : (UITraitCollection) (2.0 for Retina) 潘战生华南师范大学网络教育学院

26 ipad 潘战生华南师范大学网络教育学院

27 UITraitEnvironment 协议为 UIViewController 提供了 UITraitCollection 的存取 : 由于 UIViewController 遵循 UITraitEnvironment 协议, 因此 UIViewController 及其子类均可通过 traitcollection 属性存取其 Trait Collection 潘战生华南师范大学网络教育学院

28 UIViewController 在 TraitCollection 发生变化时, 调用方法 : func willtransitiontotraitcollection(_ newcollection: UITraitCollection!, withtransitioncoordinator coordinator: UIViewControllerTransitionCoordinator!) func traitcollectiondidchange(_ previoustraitcollection: UITraitCollection!) 注意, 这与设备方向变化是不同的, 例如, 在 ipad 发生方向变化时, 是不会调用以上方法, 因为此时 Trait Collection 没有变化当 View 的 size 发生变化时, 调用 : func viewwilltransitiontosize(_ size: CGSize, withtransitioncoordinator coordinator: UIViewControllerTransitionCoordinator!) 该方法可作为响应设备方向变化的处理函数 ( 函数内部由 size 再结合 Trait Collection 判断设备类型及其方向 ) 潘战生华南师范大学网络教育学院

29 UIViewController 可通过以下方法返回设备所支持的所有方向 : func supportedinterfaceorientations() -> Int 返回值为 UIInterfaceOrientationMask 结构类型, 示例 : override func supportedinterfaceorientations() -> Int { return Int(UIInterfaceOrientationMask.AllButUpsideDown.toRaw()) } 潘战生华南师范大学网络教育学院

30 9.2 Popover 窗口的使用在 ios 8 之前,Popover 窗口 (UIPopoverController) 界面只能在 ipad 上使用, 作用是显示临时内容, 特点是总显示在当前视图最前端, 不满屏, 当单击界面的其他地方时自动消失

31 9.2 Popover 窗口的使用在 ios 8 之前,Popover 窗口 (UIPopoverController) 界面只能在 ipad 上使用, 作用是显示临时内容, 特点是总显示在当前视图最前端, 不满屏, 当单击界面的其他地方时自动消失

32 9.2 Popover 窗口的使用在 ios 8 之前,Popover 窗口 (UIPopoverController) 界面只能在 ipad 上使用, 作用是显示临时内容, 特点是总显示在当前视图最前端, 不满屏, 当单击界面的其他地方时自动消失

33 UIPopoverController 界面的内容必须由另外一个控制器提供, 设置方法 : 创建 UIPopoverController 对象时使用 initwithcontentviewcontroller 方法设置其 contentviewcontroller 属性通过其 setcontentviewcontroller 方法内容区域大小可以通过设置属性 var popovercontentsize: CGSize pop.popovercontentsize = CGSize(width:320, height:480) 设置箭头方向 var popoverarrowdirection: UIPopoverArrowDirection { get } 潘战生华南师范大学网络教育学院

34 UIPopoverController 呈现方式 ( 实例方法 ): func presentpopoverfromrect(_ rect: CGRect, inview view: UIView!, permittedarrowdirections arrowdirections: UIPopoverArrowDirection, animated animated: Bool) 呈现弹出窗口, 窗口靠在指定视图的指定矩形区域上 func presentpopoverfrombarbuttonitem(_ item: UIBarButtonItem!, permittedarrowdirections arrowdirections: UIPopoverArrowDirection, animated animated: Bool) 从导航栏或工具栏上的按钮处呈现弹出窗口 ( 方向一般指定 UIPopoverArrowDirectionAny, 让 popover 自行决定适当的方向 ) UIPopoverController 窗口的消除 (Dismiss): func dismisspopoveranimated(_ animated: Bool) 潘战生华南师范大学网络教育学院

35 如果需要控制 Popover 窗口消失时的行为, 可设置其 delegate 属性, 并实现以下 UIPopoverControllerDelegate 协议方法 : func popovercontrollershoulddismisspopover(_ popovercontroller: UIPopoverController!) -> Bool Popover 窗口是否可以被消除 func popovercontrollerdiddismisspopover(_ popovercontroller: UIPopoverController!) Popover 窗口已经消失潘战生华南师范大学网络教育学院

36 其它属性 : var passthroughviews: [AnyObject]! 一般情况下,Popover 在显示时, 用户不能与其它视图界面交互, 除非 Popover 消失将多个视图对象赋予本属性数组可使用户在 Popover 区域之外的点击事件能由这些视图处理 var popovervisible: Bool { get } Popover 窗口是否可见潘战生华南师范大学网络教育学院

9.2 Popover 窗口的使用从 ios 8 开始,Popover 窗口界面在 ipad iphone 上均可使用 ios 8 引入了新的 Popover 窗口控制器 UIPopoverPresentationController: 任何一个 UIViewController 只要设置其 modalpresentationstyle 属性为.

37 9.2 Popover 窗口的使用从 ios 8 开始,Popover 窗口界面在 ipad iphone 上均可使用 ios 8 引入了新的 Popover 窗口控制器 UIPopoverPresentationController: 任何一个 UIViewController 只要设置其 modalpresentationstyle 属性为.Modal 后, 均可作为 Popover 窗口弹出显示, 通过 popoverpresentationcontroller 属性获取对应的 UIPopoverPresentationController 对象, 并设置其弹出窗口显示属性 : popovercontroller.sourceview = sender popovercontroller.sourcerect = sender.bounds popovercontroller.permittedarrowdirections =.Any 最后通过 UIViewController 的 presentviewcontroller 显示 Popover 窗口

38 还可以通过 UIPopoverPresentationControllerDelegate 协议方法精确配置视图控制器的显示外观 :

39 ios 8 还引入了 UIAlertController(UIViewController 的子类 ) 处理 Alerts 及 ActionSheets: let alert = UIAlertController(title: "Alert", message: "Using the alert controller", preferredstyle:.alert) preferredstyle 可为.Alert 或.ActionSheet, 通过 UIAlertController 的 popoverpresentationcontroller 属性获取 popover 控制器, 并设置其显示属性, 最后通过 presentviewcontroller 显示 Alert 或 ActionSheet 弹出窗口 ( 与 Popover 的情形一致 ) 示例 :alert-and-popovers

40 9.2 UIPopoverController 的使用

9.3 UICollectionView UICollectionView 是 ios 6 引入的新界面, 相当于一个多列的 UITableView, 主要用于展示图形的应用中该界面的几个主要的元素见右图 : Supplementary View( 节视图 ) UICollectionViewCell(

41 9.3 UICollectionView UICollectionView 是 ios 6 引入的新界面, 相当于一个多列的 UITableView, 主要用于展示图形的应用中该界面的几个主要的元素见右图 : Supplementary View( 节视图 ) UICollectionViewCell( 单元视图 ) UICollectionViewFlowLayout( 单元布局 ) Decoration View( 如用于背景 ) 有关的协议 : UICollectionViewDataSource UICollectionViewDelegate UICollectionViewDelegateFlowLayout

42 UICollectionView 的使用方法与 UITableView 有很多相似之处不过, 由于 UICollectionView 主要用于展示图形, 因此, 没有为它预定义固定样式因此, 一般需要定制 UICollectionViewCell UICollectionReusableView 用于单元及 Section Header Section Footer 的显示

43 UICollectionReusableView 类定义了 Collection View 所使用的单元及 Header Footer 类对象的行为当它们不可见时, 被置于一个可重用 (resuse) 队列中, 以便重复使用这个类是一个抽象类

45 UICollectionViewDataSource

46 UICollectionViewDataSource - (NSInteger)collectionView: numberofitemsinsection: - (NSInteger)numberOfSectionsInCollectionView: (UICollectionViewCell *)collectionview:cellforitematindexpath: - (UICollectionReusableView *)collectionview: viewforsupplementaryelementofkind: atindexpath:

47 UICollectionViewDataSource

48 UICollectionViewDataSource UICollectionViewDelegate

49 UICollectionViewDataSource UICollectionViewDelegate - (void)collectionview: didselectitematindexpath: - (void)collectionview: diddeselectitematindexpath:

50 UICollectionViewDataSource UICollectionViewDelegate

51 UICollectionViewDataSource UICollectionViewDelegate UICollectionViewDelegateFlowLayout

52 UICollectionViewDataSource UICollectionViewDelegate UICollectionViewDelegateFlowLayout // 指定位置处指定布局内的单元项大小 - (CGSize)collectionView: layout: sizeforitematindexpath: // - (UIEdgeInsets)collectionView: layout: insetforsectionatindex: - (CGSize)collectionView: layout: referencesizeforheaderinsection:

53 UICollectionViewDataSource UICollectionViewDelegate UICollectionViewDelegateFlowLayout

54 UICollectionViewDataSource UICollectionViewDelegate UICollectionViewDelegateFlowLayout 示例 :collectionview

56 UICollectionView 单元之间如何排列由布局 (UICollectionViewLayout) 决定 ios 6 内置了一个最简单的布局 :UICollectionViewFlowLayout:

57 UICollectionView 单元之间如何排列由布局 (UICollectionViewLayout) 决定 ios 6 内置了一个最简单的布局 :UICollectionViewFlowLayout: 以网格 (Grid) 形式排列单元, 单元是按行或列排列由滚动方向决定一行尽可能多列, 每个单元尺寸可不相同每节可有 Header 或 Footer

58 UICollectionView 单元之间如何排列由布局 (UICollectionViewLayout) 决定 ios 6 内置了一个最简单的布局 :UICollectionViewFlowLayout:

59 UICollectionView 单元之间如何排列由布局 (UICollectionViewLayout) 决定 ios 6 内置了一个最简单的布局 :UICollectionViewFlowLayout:

61 通过继承 UICollectionViewFlowLayout, 派生出定制的布局类, 可以实现诸如 Cover Flow 堆叠网格 (Stacked GridView) 等复杂布局以下方法必须覆盖 :

62 通过继承 UICollectionViewFlowLayout, 派生出定制的布局类, 可以实现诸如 Cover Flow 堆叠网格 (Stacked GridView) 等复杂布局以下方法必须覆盖 : collectionviewcontentsize 返回 collection view 内容的尺寸大小, 该尺寸指 collection view 的全部内容, 并非只是可见的部分例如一个简单的表会返回一个大小尺寸, 其宽度为其视图的宽度, 高度为所有单元高度的和 layoutattributesforitematindexpath:(nsindexpath*) 带 index path 参数并返回制定单元的布局属性 layoutattributesforelementsinrect:(cgrect) 返回对应于参数所指定矩形内所有可见元素 ( 如 cells supplementatry views 及 decoration views) 的布局属性数组

63 可定制实现的布局示例 :cover flow 及 stack grid view

64 insetforsectionatindex 的不同返回值效果 :(top,left,bottom,right) UIEdgeInsetsMake(50, 0, 0, 0); UIEdgeInsetsMake(0, 50, 0, 0); UIEdgeInsetsMake(0, 0, 50, 0); UIEdgeInsetsMake(0, 0, 0, 50); 潘战生华南师范大学网络教育学院

65 9.4 Universal 程序设计及 Adaptive layout Universal: 能分别以原生界面 (native interface) 运行于 iphone ipad 设备上的 ios 应用程序 ios 8 之前, 需要分别设计 iphone ipad 界面 ( 至少 2 个 Storyboard 文件 ) iphone:navigation+tableview ipad:splitview/popover 控制器类可以共用 ( 判断设备类型分情况处理 ) ios 8 之后,iPad 及 iphone 界面共用一个 Storyboard 文件程序中判断设备类型 : if UIDevice.currentDevice().userInterfaceIdiom ==.Phone { } 潘战生华南师范大学网络教育学院

66 Size Class Size Class 表示视图或视图控制器在水平或垂直方向上显示区域的相对大小有 2 种取值 :regular 及 compact 前者用于表示大的屏幕空间, 例如 ipad, 或者通常被认为是大屏幕的虚幻场景, 例如在 iphone 上的滚动任何一个设备都在水平垂直 2 个方向被 size class 所定义,iPad 在这 2 个方向的 size class 均为 regular, 而 iphone 在 portrait landscape 方向则有不同的 size class:

69 Demo Constraints Size Class Dependent Font Size Size Class Dependent Views Size Class Dependent Images 潘战生华南师范大学网络教育学院

70 SplitView controller 当其 size class 在 horizontally regular 和 horizontally compact 之间切换时, 进行 collapse 和 expand 变换在此过程中,SplitView controller 更改其子视图的显示与否当转换为 collapse 界面时, 只显示 primary controller 的内容, 可以响应 UISplitViewControllerDelegate 的方法 : primaryviewcontrollerforcollapsingsplitviewcontroller: splitviewcontroller:collapsesecondaryviewcontroller:ontoprimaryviewcontroller: 更改该行为

71 expansion 过程是 collapse 的反转,SplitView controller 请求其委托对象指派哪个控制器作为 primary controller 可以实现以下方法: primaryviewcontrollerforexpandingsplitviewcontroller: splitviewcontroller:separatesecondaryviewcontrollerfromprimaryviewcontroller: 否则 SplitView controller 提供默认行为

72 Application Icon Size

73 设备类型的判断 : DeviceInfo.h 本示例演示如何在 Swift 项目中混用 Objective-C 语言模块创建一个 Swift 项目, 在该项目中生成 Objective- C 类 DeviceInfo 的代码, 如右图所示 DeviceInfo.m

74 创建 Objective-C 类时 Xcode 提示生成 Swift 及 Objective-C 语言的桥接文件 (<projectname> 为 Swift 项目名称 ): <projectname>-bridge-header.h 在以上桥接文件中填写内容如下 : #import "DeviceInfo.h" 此后, 在 Swift 中即可使用 Objective-C 语言定义的 DeviceInfo 类 : let modelname = DeviceInfo.model()

iPhone App Programming_2016_lecture8.key

iPhone App Programming_2016_lecture8.key ios 程序设计 (2016.3@UniTown) 第八讲 : 可视化控件的使用 (UIControls) 华南师范大学网络教育学院 2016-04-19 截到 2016.2 ios 版本的占有率 Feb 2016 潘战生华南师范大学网络教育学院 http://www.gdou.com 潘战生华南师范大学网络教育学院 http://www.gdou.com 潘战生华南师范大学网络教育学院 http://www.gdou.com