iOS 适配 梳理

iPhone 3GS 一个点 1 个像素
iPhone 4 中 一个点 2 个像素

使用 AutoLayout 不用绝对布局
使用设计网页的方式来设计页面

非矢量素材,先做出最大尺寸的如 3x 图,再缩小,减少失真
矢量图,可以单独做不同尺寸的,因为不会失真
按钮点击区域不应该少于 44 个点

苹果机型 屏幕 相关
http://upload-images.jianshu.io/upload_images/4010039-d048a445592d53d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600

<1>+imageNamed:该方法使用系统缓存,适合表视图重复加载图像的情形。同时该API根据UIScreen的scale,自动查找包含对应高倍图后缀名(@2x)的文件,如果找到二倍图,则image.scale=2.0,对应逻辑size大小以point度量(pixel度量的一半);如果没找到设置默认image.scale=1.0,对应逻辑size大小同像素尺寸。因此,使用该方法,无需特意指定高倍图后缀。在实际运行时,系统如果发现当前设备是Retina屏(scale=2),会自动寻找"@2x.png"命名格式的图片,加载针对Retina屏的图片素材,否则会失真。

<2>+imageWithContentsOfFile/+imageWithData:(scale:)/-initWithContentsOfFile:/-initWithData*:(scale:) 这组方法创建的UIImage对象没有使用系统缓存,并且指定文件名必须包含明确的高倍图后缀。如果文件名包含@2x后缀,则image.scale=2.0;否则默认image.scale=1.0,同样对于Retina屏将会失真。

<3>目前,适配iPhone6+时,除了一些铺满全屏的大图(LogoIcon、LaunchImage)需提供三倍图,其他的小图仍可沿用原有的二倍图自适应拉伸。

三种适配方式:

  • 按宽度适配
    我们先来看一下iPhone4~6(+)的屏幕高宽比:

    • iPhone4(s): 分辨率960640,高宽比1.5
    • iPhone5(s): 分辨率1136640,高宽比1.775*
    • iPhone6: 分辨率1334750,高宽比1.779*
    • iPhone6+: 分辨率19201080,高宽比1.778* 可粗略认为iPhone5(s)、6(+)的高宽比是一致的(16:9),即可以等比例缩放。因此可以按宽度适配: fitScreenWidth= width*(SCREEN_WIDTH/320)
      这样,共有iPhone3/4/5、6、6+三组宽度,在iPhone6、6+下将按比例横向放大。
  • 按高度适配
    在同样的宽度下,iPhone4(s)的屏高比iPhone5(s)低,若纵向排版紧张,可以iPhone5(s)为基准,按高度适配: fitScreenHeight= height*(SCREEN_HEIGHT/568) 共有iPhone3/4、5、6、6+四组高度,在iPhone3/4下将按比例纵向缩小,在iPhone6、6+下将按比例纵向放大。
    这里需要注意iPhone/iOS双环上网的热点栏对纵向布局的影响:iPhone作为个人热点且有连接时,系统状态栏下面会多一行热点连接提示栏"Personal Hotspot: * Connection",纵向会下压20pt,[UIApplication sharedApplication].statusBarFrame高度变为40pt;当所有连接都断开时,热点栏消失,纵向高度恢复正常为20pt。详情可参考《iPhone/iOS开启个人热点的纵向适配小结》。

  • 按字体适配
    另外,iPhone的【设置】【通用】【辅助功能】中可以设置调节【更大字体】,APP也可以按字号适配: 例如适配表视图(UITableView:UIScrollView),无法左右滑动,因此无论字号缩放比例多大,横向都不应超过SCREEN_WIDTH。注意限定控件元素内容区域宽度以及间距,并设置适当的LineBreakMode。表视图支持上下滑动,因此纵向上的表格行高和内容区域高度可按字号缩放。

    对于纵向也不支持滑动的视图,在屏幕可见视区内排版时,最好不要随字号缩放,否则可能超出既定宽高。

适配用到的编码
UILineBreakMode->NSLineBreakMode
(2)UITextAlignment->NSTextAlignment
(3)sizeWithFont:->boundingRectWithSize:
(4)stretchableImageWithLeftCapWidth:topCapHeight:->resizableImageWithCapInsets:






苹果官方 适配教程
设计原则:

  • 清晰
  • 统一性,一致性
  • 即时反馈,反应
  • 反馈,对任何操作有有明显的用户反馈
  • 比喻,比如开关,书籍翻页的比喻
  • 用户控制,一切功能都在用户的把控之中

关于 iPhone X

新的适配方法
safe area
margin layout guides
iPhone X 4.7寸
iPhone X 的状态栏比其他机型的状态栏要高
iPhone X上的状态栏在语音记录和位置跟踪等后台任务很活跃时不会改变高度。

iPhone X 个人验证:https://developer.apple.com/ios/human-interface-guidelines/user-interaction/authentication/
键盘:https://developer.apple.com/ios/human-interface-guidelines/extensions/custom-keyboards/

图标大小:
桌面图标: 6060 (2倍图,3倍图)
App Store 1024
1024(1 倍图)
Spotlight icon 图标:120(2倍图,3倍图)
Settings icon size 29 (2倍图,3倍图)
Notification icon size 20 (2倍图,3倍图)
Navigation Bar and Toolbar Icon Size 24到28(2倍图,3倍图)

  • iOS适配

你可能感兴趣的:(iOS 适配 梳理)