iPad开发

一.iPad开发简介

1.什么是iPad

• 一款苹果公司于2010年发布的平板电脑
• 定价介于苹果的智能手机iPhone和笔记本电脑产品之间
• 跟iPhone一样,搭载的是iOS操作系统

2.iPhone和iPad的区别

• 屏幕的chicun/分辨率
• UI元素的排布/设计
  • 由于iPad屏幕比iPhone大,可以容纳更多的UI元素,因此排列方式是不一样的
• 键盘
  • iPad的虚拟键盘多了个退出键盘的按钮
• API
  • 共有API的差异
    • 有些API在iPhone和iPad上都能使用,但是显示效果是有差异的
    • 比如,UIActionSheet
  • iPad特有的类
    • UIPopoverController
    • UISplitViewController
• 屏幕方向的支持
  • iPhone支持3个方向(除了倒置)
  • iPad支持4个方向
  • 开发说明
    • 一般情况下,iPhone应用就一种屏幕方向,要么竖屏,要么横屏(游戏)
    • 其次,苹果官方建议:iPad应用最好同时支持横屏和竖屏两种方向

3.开发细节

• 设备支持的应用程序
  • iPhone上只能运行iPhone程序
  • iPad上能够运行iPhone/iPad程序
• 开发过程
  • iPhone和iPad开发的流程是一致的
  • 在iPhone开发中学到的所有知识基本都能用在iPad上

二.QQ空间项目分析,以及适配方案制定

1.技术难点

• 横屏下的适配
  1. 尺寸大小的变化:横竖屏下尺寸大小的变化
  2. 排列结构的变化:图标从左右排列到上下排列
  3. 按钮的状态变化:横竖屏状态下的按钮显示内容状态不一样

2.屏幕适配方案(回顾)

• 方案1:手动代码判断
• 方案2:Autoresizing(iPad出现以后)
  • 局限性
    • 仅仅能解决子控件和父控件之间的相对关系
    • 仅仅能改变位置尺寸,但是横竖屏切换时,不同排列结构无法改变(比如上下排列变成左右排列),控件状态无法改变
  • 用法
    • UIView里面有一个属性autoresizingMask
      • 距离父控件左边的间距是伸缩的
        • UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
      • 距离父控件右边的间距是伸缩的
        • UIViewAutoresizingFlexibleRightMargin = 1 << 2,
      • 距离父控件上边的间距是伸缩的
        • UIViewAutoresizingFlexibleTopMargin = 1 << 3,
      • 距离父控件下边的间距是伸缩的
        • UIViewAutoresizingFlexibleBottomMargin = 1 << 5
      • 宽度跟随父控件宽度进行伸缩
        • UIViewAutoresizingFlexibleWidth = 1 << 1,
      • 高度跟随父控件高度进行伸缩
        • UIViewAutoresizingFlexibleHeight = 1 << 4,
    • 意味着,所有继承自UIView的子控件,都可以使用Autoresizing进行布局
• 方案3:Autolayout(iOS6.0开始)
  • 优势:
    • 解决任何控件之间的相对关系问题
  • 局限性:
    • 仅仅能改变位置尺寸,但是横竖屏切换时,不同排列方式无法改变
    • 比如,三个控件,控制水平排放和垂直排放
    • 控件与控件之间的耦合性非常强
• 方案4:Sizeclass(iOS8.0开始)
  • 优势:
    • 可以解决不同屏幕状态下的排列方式和控件样式问题
    • 主要是因为可以区分不同的屏幕尺寸,具体布局还要参照上面方案
  • 局限性:
    • 无法区分iPad的横竖屏
• 方案5:UIStackView(iOS9.0开始)
  • 简介:
    • 和Android开发中的LinearLayout控件非常相似
  • 学习资料:
    • http://www.cocoachina.com/ios/20150623/12233.html
  • 优势:
    • 可以非常快速的进行水平或者垂直布局,并且可以设置间距
    • 控件之间的耦合性弱
  • 局限性:
    • 只能实现一些有规律的布局(水平或者垂直)
    • 目前为止,9.0版本过高,依然需要适配低版本

三.iPad横竖屏适配综合案例(QQ空间)开发步骤

1.开发目的

• 此项目的侧重点在于如何做好iPad的横竖屏适配,不是具体业务逻辑实现

2.搭建项目结构

• 项目基本配置
  • BundleID
  • 最低部署版本
  • 支持平台,以及横竖屏支持
  • 程序图标,启动图片
• 划分项目功能模块,创建文件夹结构
  • 项目总共划分为两个大模块
    • 登录模块
      • 主要负责展示登录界面,验证用户名和密码身份,记住密码,自动登录等功能
    • 主页模块
      • 主要负责展示主页各个板块,并完成各个板块间的切换,以及横竖屏适配
  • 文件夹结构创建如下
    • 一开始搭建基本文件结构, 如果后续需要增加功能或模块, 再进行扩展即可, 没必要一次搭建所有的
• 拖入必要的资源文件和工具类,以及第三方框架
  • 启动图片,程序图标
  • 拖入界面搭建必备资源文件
  • 一些第三方框架可以等使用时再拖入

3.实现QQ空间登录功能

1. 搭建登录界面
   • 可以实现观察动画效果,将需要做动画的view包装到一个父控件中,方便做动画
2. 完善界面细节
   • 比如图片拉伸,尺寸大小,文本样式,return key,状态栏颜色等
3. 封装登录工具类,完成登录验证功能
   • 经验:不要直接把登录验证逻辑写到控制器,抽取出来一个工具类,既可以复用,也可以减轻控制器的负担
4. 封装提示工具类
   • 将用户名或者密码错误等提示功能抽取到一个工具类,方便复用
     • 如果对应的功能跟控制器没有关系,最好抽取出去
     • 如果当前功能再其他控制器也会用到,最好抽取出去
5. 完善记住密码,自动登录功能(封装工具类)

4.实现QQ空间主页功能

1. 搭建QQ空间主页的主结构
   • 分析界面构成(左右各一块,左边显示菜单项,右侧负责显示内容项)
   • 分别针对于左右视图进行布局,做好横竖屏的适配后,再想左右视图内部如何搭建,从大到小
   • 像一些固定的数值(比如横竖屏状态下的菜单栏高度等),放到单独的一个文件中进行管理,方便维护
2. 完善左侧菜单view(Dock)
   1. 分析界面构成,大致分成三块
      • 上方的头像
      • 中间的菜单
      • 下面的菜单
   2. 先做好三大块视图的横竖屏尺寸适配,然后在具体考虑内部搭建,从大到小
      • 通过观察视图样式, 建议从下往上进行布局
   3. 完善底部菜单的界面实现
      • 需要适配横竖屏的显示样式,可以在layoutSubviews方法中,判断横竖屏,进行布局
   4. 完善中间的菜单
      • 需要适配横竖屏的显示样式,可以在layoutSubviews方法中,判断横竖屏,进行布局
      • 观察内部按钮样式,需要自定义按钮,调整图片和文字显示位置
   5. 完善顶部的头像
      • 需要适配横竖屏的显示样式,可自定义按钮
3. 设置左侧菜单代理,通知外界内部菜单点击事件
   • 因为左侧菜单分为上中下三部分,所以可以针对每一部分设置一个代理,向外界提供一些代理方法
   • 将上中下三部分的代理,汇总到Dock中,统一提供给外界
4. 完善右侧视图
   • 当点击不同的菜单时,右侧内容视图,展示不同控制器的视图给用户

5.细节完善

• 界面细节完善,比如尺寸/颜色等
• 适当增加动画

四.UIPopoverController的使用

1.UIPopoverController简介

• 是iPad开发中常见的一种控制器
• 跟其他控制器不一样的是,它直接继承自NSObject,并非继承自UIViewController
• 它只占用部分屏幕空间来呈现信息,而且显示在屏幕的最前面

2.UIPopoverController使用步骤

• 设置内容控制器
  • 由于UIPopoverController直接继承自NSObject,不具备可视化能力
  • 因此UIPopoverController上面的内容必须由另外一个继承自UIViewController的控制器来提供,这个控制器称为"内容控制器"
• 设置内容的尺寸
  • 显示出来占据多少屏幕空间
• 设置显示的位置
  • 从哪个地方显示出来

3.UIPopoverController代码实现

1. 设置内容控制器
   • 在初始化UIPopoverController的时候传入一个内容控制器
     • (id)initWithContentViewController:(UIViewController *)viewController
   • 更改内容控制器
     • @property (nonatomic, retain) UIViewController *contentViewController;
     • • (void)setContentViewController:(UIViewController *)viewController animated:(BOOL)animated;
2. 设置内容的尺寸
   • 方案1:通过UIPopoverController对象设置
     • @property (nonatomic) CGSize popoverContentSize;
     • • (void)setPopoverContentSize:(CGSize)size animated:(BOOL)animated;
   • 方案2:通过内容控制器设置
     • 在iOS7之前
       • @property (nonatomic,readwrite) CGSize contentSizeForViewInPopover;
     • 在iOS7之后
       • @property (nonatomic) CGSize preferredContentSize;
3. 设置显示的位置

• 围绕着一个UIBarButtonItem显示(箭头指定那个UIBarButtonItem)

// 围绕着一个UIBarButtonItem显示(箭头指定那个UIBarButtonItem)// item:围绕着哪个UIBarButtonItem显示
// arrowDirections:箭头的方向
// animated:是否通过动画显示出来- (void)presentPopoverFromBarButtonItem:(UIBarButtonItem *)item
permittedArrowDirections:(UIPopoverArrowDirection)arrowDirections
animated:(BOOL)animated;

• 围绕着某一块特定区域显示(箭头指定那块特定区域)

// 围绕着某一块特定区域显示(箭头指定那块特定区域)// rect:指定箭头所指区域的矩形框范围(位置和尺寸)
// view:rect参数是以view的左上角为坐标原点(0,0)
// arrowDirection:箭头的方向
// animated:是否通过动画显示出来- (void)presentPopoverFromRect:(CGRect)rect inView:(UIView *)view
permittedArrowDirections:(UIPopoverArrowDirection)arrowDirections
animated:(BOOL)animated;

1. 关闭UIPopoverController
   • (void)dismissPopoverAnimated:(BOOL)animated;
2. 额外设置
   • 防止点击UIPopoverController区域外消失
     • 问题描述
       • 只要UIPopoverController显示在屏幕上,UIPopoverController背后的所有控件默认是不能跟用户进行正常交互的
       • 点击UIPopoverController区域外的控件,UIPopoverController默认会消失
     • 解决方案
       • 解决办法是设置passthroughViews属性
       • @property (nonatomic, copy) NSArray *passthroughViews;
       • 这个属性是设置当UIPopoverController显示出来时,哪些控件可以继续跟用户进行正常交互
       • 这样的话,点击区域外的控件就不会让UIPopoverController消失了

4.iOS8.0之后的popover

• 自定义控制器TestViewController为内容控制器
• 懒加载内容控制器,并设置ios8popover
  1. 初始化控制器
     • _ios8VC = [[Ios8ViewController alloc] init];
  2. 设置控制器的弹出样式为popover
     • _ios8VC.modalPresentationStyle = UIModalPresentationPopover;
  3. 设置弹出位置
     • self.ios8VC.popoverPresentationController.sourceView = self.view;

     • self.ios8VC.popoverPresentationController.sourceRect = sender.frame;

  4. 以modal的形式弹出
     • [self presentViewController:self.ios8VC animated:YES completion:nil];

5.常见错误

• popover还没消失就被销毁
  • [UIPopoverController dealloc] reached while popover is still visible.
  • 翻译:popover在仍旧可见的时候被销毁了(调用了dealloc)
  • 从错误可以得出结论
    • 当popover仍旧可见的时候,不准销毁popover对象
    • 在销毁popover对象之前,一定要让popover消失(不可见)

6.开发经验

• UIPopoverController这个类是只能用在iPad中
• 要想在iPhone中实现popover效果,必须要自定义view,可以参考
  • http://code4app.com/ios/Popover-View-in-iPhone/4fa931bd06f6e78d0f000000
  • http://code4app.com/ios/Popup-Menu/512231ac6803fa9e08000000

五.iPad(UIPopoverController使用)案例(美团网)开发步骤

1.搭建项目结构

1. 划分项目功能模块,创建文件夹结构
   • 项目只有一个功能模块
     • 首页
     • 设置导航栏菜单展示,当点击某个菜单时,展示对应的数据
   • 文件夹结构创建
2. 拖入必要的资源文件和工具类,以及第三方框架(可以使用时再拖入)
   • 启动图片,程序图标
   • 拖入界面搭建必备资源文件
   • 一些第三方框架可以等使用时再拖入
3. 搭建Storyboard,跳转结构
   • 入口控制器为导航控制器,其根控制器是一个简单的视图控制器

2.首页功能实现

• 实现导航栏菜单展示
  1. 自定义菜单视图
     • 通过xib文件描述视图界面
     • 提供菜单数据模型,供外界赋值
  2. 创建导航栏上3个菜单视图,以及logo图标
  3. 做好横竖屏适配
  4. 实现菜单点击事件的监听
• 封装两级菜单控制器
  • 使用xib描述两级菜单
  • 提供两级菜单数据模型,供外界赋值
• 实现点击菜单时的业务逻辑
  • 在对应的菜单下面,弹出UIPopoverController
    • 设置popoverController的内容控制器
    • 封装数据获取工具类
    • 赋值展示

六.UISplitViewController简介

1.概念

• 分割视图控制器

2.功能作用

• 可以实现iPad屏幕下的分屏(左右)
  • 左边:masterViewController
  • 右边:detailViewController
• 会自适应iPad横竖屏下的布局
  • 可以设置当竖屏状态下,隐藏masterViewController

3.使用方法

• 创建分割控制器
• 设置分割控制器viewControllers属性
  • 此属性是一个数组,里面存放两个子控制器
  • 第0个子控制器代表masterViewController
  • 第1个子控制器代表detailViewController
• 额外设置
  • 设置弹出"轻扫手势"
    • presentsWithGesture
    • 设置是否可以通过"轻扫手势"弹出master控制器
  • 显示模式
    • preferredDisplayMode
      • UISplitViewControllerDisplayModeAutomatic
        • 自动显示
        • 横屏状态下,两个都显示
        • 竖屏状态下,可以通过轻扫手势控制master控制器
      • UISplitViewControllerDisplayModePrimaryHidden
        • 默认master控制器隐藏,但可以通过轻扫手势控制
      • UISplitViewControllerDisplayModeAllVisible
        • 横竖屏下,两个控制器都显示(轻扫手势也无效)
      • UISplitViewControllerDisplayModePrimaryOverlay
        • 默认两个都显示,但可以通过轻扫手势控制

4.开发经验

• 一般master控制器和detail控制器之间的通讯可以使用通知

七.问题总结

1.iPad开发和iPhone开发的主要区别

1. 方向支持(iPad支持4个方向,iPhone支持3个方向)
2. 屏幕尺寸
3. 启动图片(共同点)
4. 布局
5. API(iPad特有API)
6. 键盘布局