2017-08-20 22:37:55 chenhy8208 阅读数 6865

IOS开发怎么样适配12.9英寸的Pad Pro

12.9英寸的iPad pro,宽高是(1366*1024),Pad其他版本都是(1024*768),按普通尺寸开发的pad应用,最后需要兼容一下pro。为此我自己写了三个宏。

应该写在公共文件中

#define FULL_SCREEN_RECT CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)

#define DEVICES_IS_PRO_12_9 ([UIScreen mainScreen].bounds.size.width == 1366)

#define SCALE_TO_PRO (DEVICES_IS_PRO_12_9? (1366.0/1024.0): 1)

用法举例

CGRectMake(0, 0, 1024 * SCALE_TO_PRO, 768 * SCALE_TO_PRO)

只要把CGRect或者CGPoint乘以SCALE_TO_PRO,就兼容iPad pro 12.9了。

2015-07-18 23:28:20 MrRightZJ 阅读数 348

1.适配的基本概念

  • 目前iPhone的尺寸一共有3.5(iPhone 4S以前)、4.0(iPhone 5/5S)、4.7(iPhone 6)、5.5(iPhone 6plus)
  • iPad目前主要是7.9和9.7两种,加上传闻苹果将发布12.9的iPad pro,以及iPad的横竖屏的适配
  • 我们针对不同的屏幕尺寸,调整界面布局称之为屏幕匹配

2.点和像素的概念

  • 在用户眼中,屏幕是由无数个像素组成的,像素越多,屏幕越清晰
  • 在开发者眼中,屏幕是由无数个点组成,点又是由像素组成
  • 在早期,iPhone分为非Retina屏和Retina屏 这里写图片描述

  • 各设备分辨率,我们开发人员只需关注各个尺寸的点即可 这里写图片描述


3.Autolayout概述

  • 此前说过Autolayout相当于autoresizing的加强版,自IOS 6开始引入,由于Xcode 4对Autolayout的支持不是很好,所以刚推出时并没有得到很大的推广
  • 自IOS 7(即Xcode 5 )开始,Autolayout的开发效率得到了很大的提升,而且苹果官方也推荐开发者尽量使用Autolayout来布局界面
  • Autolayout能够很轻松的解决屏幕适配问题,也解决了autoresizing中兄弟控件不能添加约束的问题

4.基本属性界面介绍

  • 此前提过xcode 6之后创建新的项目都是默认设置为autolayout布局的,我们先勾选掉sizeclasses,以便说明autolayout的强大之处
    这里写图片描述
  • 设置对齐方式(最后两项对齐设置只需一个控件) -
  • 设置约束条件 这里写图片描述
  • 设置约束刷新和约束移除 这里写图片描述

5.添加约束说明

  • 在storyboard添加一个设置,就代表添加一个约束
  • 若是在storyboard中看到一个红色的箭头如下图,代表约束有错误,不代表运行会报错,约束有错误同样可以运行 这里写图片描述
  • 约束错误的产生:
    • autolayout的本质和frame差不多 + 就行设置frame一样,autolayout也必须同时设置x/y/w/hx/y/w/h,控件才能按照我们的需求显示
    • 约束冲突,由于约束可以重复添加,那么添加同样位置的不同约束条件就会报错
  • 若是在storyboard中看到一个黄色的箭头如下图,代表当前控件预览的位置和尺寸和我们约束的不太一样,这个并不影响我们运行
    这里写图片描述

  • 约束计算说明
    这里写图片描述


6.添加约束的规则

  • 规则1:
    这里写图片描述
    这里写图片描述
  • 规则2:
    这里写图片描述
    这里写图片描述

  • 规则3:
    这里写图片描述
    这里写图片描述


2017-10-27 17:39:04 TIANBING878 阅读数 1452
官方文档:https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/
Device Portrait size Landscape size
12.9" iPad Pro 2048px × 2732px 2732px × 2048px
10.5" iPad Pro 1668px × 2224px 2224px × 1668px
9.7" iPad 1536px × 2048px 2048px × 1536px
7.9" iPad mini 4 1536px × 2048px 2048px × 1536px
iPhone X 1125px × 2436px 2436px × 1125px
iPhone 8 Plus 1242px × 2208px 2208px × 1242px
iPhone 8 750px × 1334px 1334px × 750px
iPhone 7 Plus 1242px × 2208px 2208px × 1242px
iPhone 7 750px × 1334px 1334px × 750px
iPhone 6s Plus 1242px × 2208px 2208px × 1242px
iPhone 6s 750px × 1334px 1334px × 750px
iPhone SE 640px × 1136px 1136px × 640px
2016-09-05 15:24:00 weixin_43172830 阅读数 27

前言

  • 什么是适配:
    • 适应、兼容各种不同的情况。
  • iOS 开发中,适配的常见种类:
    • 1)系统适配, 针对不同版本的操作系统进行适配。

    • 2)屏幕适配,针对不同大小的屏幕尺寸进行适配。
      • iPhone 的尺寸:3.5 inch、4.0 inch、4.7 inch、5.5 inch 。
      • iPad 的尺寸:7.9 inch、9.7 inch、12.9 inch 。
      • 屏幕方向:竖屏、横屏。

1、系统适配

  • Objective-C

        // 获取系统版本
        float systemVersion = [UIDevice currentDevice].systemVersion.floatValue;
    
        // 判断系统版本
        if ([UIDevice currentDevice].systemVersion.floatValue > 9.0) {
    
            // iOS 9 及其以上系统运行
    
        } else {
    
            // iOS 9 以下系统系统运行
        }
  • Swift

        // 获取系统版本
        let systemVersion:Float = NSString(string: UIDevice.current.systemVersion).floatValue
    
        // 判断系统版本
        if NSString(string: UIDevice.current.systemVersion).floatValue > 9.0 {
    
            // iOS 9 及其以上系统运行
    
        } else {
    
            // iOS 9 以下系统系统运行
        }
    
        // 判断系统版本
        if #available(iOS 9.0, *) {
    
            // iOS 9 及其以上系统运行
    
        } else {
    
            // iOS 9 以下系统系统运行
        }

2、屏幕适配

2.1 屏幕适配的发展历史

  • iPhone3GS  iPhone4
    • 没有屏幕适配可言,全部用 frame、bounds、center 进行布局。
    • 很多这样的现象:坐标值、宽度高度值全部写死。

          UIButton *btn1 = [[UIButton alloc] init];
          btn1.frame = CGRectMake(0, iPhone3GS0, 320 - b, 480 - c);
  • iPad 出现、iPhone 横屏
    • 出现 Autoresizing 技术,让横竖屏适配相对简单,让子控件可以跟随父控件的行为自动发生相应的变化。
      • 前提:关闭 Autolayout 功能。
      • 局限性:只能解决子控件跟父控件的相对关系问题,不能解决兄弟控件的相对关系问题。
  • iOS 6.0(Xcode 4)开始
    • 出现了 Autolayout 技术。
    • 从 iOS 7.0 (Xcode 5) 开始,开始流行 Autolayout。

2.2 Autoresizing

2.2.1 Storyboard/Xib 中使用

  • 关闭 Autolayout 功能

    • 在 SB 的 Show the File Inspector 选项卡中取消对 Use Auto Layout 和 UseSize Classes 的勾选。

      Fitter10

    • 关闭 Autolayout 后,SB 的 Show the Size Inspector 选项卡中将出现 Autoresizing 设置模块,如下图。

      Fitter11

      • 此设置模块左侧方框内为设置选项,右侧矩形为设置效果预览。
      • 需要在子视图上设置。

      • 小方框四周的四个设置线,选中时,子视图与父视图的边距将保持不变。
        • 左和右、上和下,只能二选一,若同时选中,只有左和上起作用。
      • 小方框内部的两个线,选中时,子视图的宽或高将随父视图的变化而变化。

  • 设置示例:

    • 示例 1:

      • 设置子视图在父视图的右下角。
        • 将子视图放在父视图的右下角。
        • 设置子视图的 Autoresizing 右和下选项线。

          Fitter12Fitter13

      • 设置效果。
        • 子视图与父视图的右和下边距保持不变。
        • 子视图的宽和高保持不变。

          Fitter14

    • 示例 2:

      • 设置子视图在父视图的下边,且宽度与父视图的宽度相等。
        • 将子视图放在父视图的下边。
        • 设置子视图的 Autoresizing 下和内部小方框的宽度选项线。

          Fitter15Fitter16

      • 设置效果。
        • 子视图与父视图的下和左右边距保持不变。
        • 子视图的高保持不变。
        • 子视图的宽随父视图的变化而变化。

          Fitter17

2.2.2 纯代码中使用

  • Objective-C

    • 子视图设置选项:

          UIViewAutoresizingNone                 = 0,         // 不跟随
          UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,    // 左边距 随父视图变化,右边距不变
          UIViewAutoresizingFlexibleRightMargin  = 1 << 2,    // 右边距 随父视图变化,左边距不变
          UIViewAutoresizingFlexibleTopMargin    = 1 << 3,    // 上边距 随父视图变化,下边距不变
          UIViewAutoresizingFlexibleBottomMargin = 1 << 5     // 下边距 随父视图变化,上边距不变
      
          UIViewAutoresizingFlexibleWidth        = 1 << 1,    // 宽度 随父视图变化,左右边距不变
          UIViewAutoresizingFlexibleHeight       = 1 << 4,    // 高度 随父视图变化,上下边距不变
    • 设置示例:

      • 示例 1:

        • 设置子视图在父视图的右下角。

              UIView *blueView = [[UIView alloc] init];
              blueView.backgroundColor = [UIColor blueColor];
              CGFloat x = self.view.bounds.size.width - 100;
              CGFloat y = self.view.bounds.size.height - 100;
              blueView.frame = CGRectMake(x, y, 100, 100);
          
              // 设置父视图是否允许子视图跟随变化
              /*
                  default is YES
              */
              self.view.autoresizesSubviews = YES;
          
              // 设置子视图的跟随效果
              /* 
                  子视图的左边距和上边距随父视图的变化而变化,即右边距和下边距保持不变
              */
              blueView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin 
                                        | UIViewAutoresizingFlexibleTopMargin;
          
              [self.view addSubview:blueView];
        • 设置效果。
          • 子视图与父视图的右和下边距保持不变。
          • 子视图的宽和高保持不变。

            Fitter14

      • 示例 2:

        • 设置子视图在父视图的下边,且宽度与父视图的宽度相等。

              UIView *blueView = [[UIView alloc] init];
              blueView.backgroundColor = [UIColor blueColor];
              CGFloat w = self.view.bounds.size.width;
              CGFloat y = self.view.bounds.size.height - 100;
              blueView.frame = CGRectMake(0, y, w, 100);
          
              // 设置父视图是否允许子视图跟随变化
              /*
                  default is YES
              */
              self.view.autoresizesSubviews = YES;
          
              // 设置子视图的跟随效果
              /* 
                  子视图的宽度和上边距随父视图的变化而变化,即左右边距和下边距保持不变
              */
              blueView.autoresizingMask = UIViewAutoresizingFlexibleWidth 
                                        | UIViewAutoresizingFlexibleTopMargin;
          
              [self.view addSubview:blueView];
        • 设置效果。
          • 子视图与父视图的下和左右边距保持不变。
          • 子视图的高保持不变。
          • 子视图的宽随父视图的变化而变化。

            Fitter17

2.3 Autolayout

3、App 图标和启动图片

3.1 App 图标设置

  • App 图标尺寸

    Fitter4

  • App 图标设置

    Fitter18

    Fitter19

    • 默认从 AppIcon 中加载 App 图标。

    Fitter20

    Fitter21

    Fitter22

    • 20pt 表示 20 个点,即 2x 图片的像素为 (20 * 2) * (20 * 2) 像素,3x 图片的像素为 (20 * 3) * (20 * 3) 像素。

3.2 启动图片设置

  • 启动图片尺寸

    Fitter1

  • 启动图片设置

    Fitter18

    Fitter23

    • Launch Images Sources :从指定的位置加载启动图片。
    • Launch Screen Files :默认,从指定的文件(xib 或 sb 文件)加载启动屏幕(启动图片)。

    Fitter24

    • 修改为从指定的位置加载启动图片,清除 Launch Screen Files 项内容,点击 Use Asset Catalog... ,按照默认设置,点击 Migrate 。

    Fitter25

    Fitter26

    • 在 Assets.xcassets 中将自动添加 LaunchImage(或者 Brand Assets)。

    Fitter27

    Fitter28

    • Retina HD 5.5 为 5.5 寸屏的设备,Retina HD 4.7 为 4.7 寸屏的设备,Retina HD 4 为 4.0 寸屏的设备;Portrait 为竖屏,Landscape 为横屏。

4、iOS 设备各种尺寸

4.1 iOS 设备尺寸

Fitter1

4.2 Resolutions 分辨率

Fitter2

4.3 Displays 显示

Fitter3

4.4 Dimensions App 图标尺寸

Fitter4

4.5 Common Design Elements 常见控件尺寸

Fitter5

4.6 Icons 控件图标尺寸

Fitter6

4.7 Default Font Sizes iPhone 5/5C/5S/6 控件字体大小

Fitter7

4.8 Default Font Sizes iPhone 6 Plus 控件字体大小

Fitter8

4.9 Size Classes For Adaptive Layout

Fitter9

没有更多推荐了,返回首页