iOS 屏幕适配~~整理了一些屏幕适配的东西
互联网资源分享 · 互联网资源分享 · 于 05-10 06:45发布 · 111 次阅读
欢迎关注我的 Blog tunnycoder.com 整理了一些 iOS 屏幕适配的东西 自从 Apple 出了 4.7 寸和 5.5 寸的 iphone 后,在 iOS 开发中, 屏幕适配也成为了一项很重要的工作。(PS:之前一直吐槽安卓各种屏幕适配好蛋疼,后来发现出来混总是要还的。)还好苹果公司也在为这条适配之路更好走,不断的改进着~本文记录了一些屏幕适配过程中的一些问题。 4s 、 5/5s 、 6/6s 、 6p/6sp 的参数以及适配的参考基准建议 | 机型 | 屏幕宽高(point) | 渲染像素(pixel) | 物理像素(pixel) | 屏幕对角线长度(英寸) | 屏幕模式 | | -------- |:---------:|:---------:|:---------:|:---------:|:---------:| ------:| |iPhone 2G/3G/3GS|320 * 480| 320 * 480| 320 * 480| 3.5(163PPI)| 1x| |iPhone 4/4s| 320 * 480| 640 * 960| 640 * 960| 3.5 (326PPI)| 2x| |iPhone 5/5s| 320 * 568| 640 * 1136| 640 * 1136| 4 (326PPI)| 2x| |iPhone 6/6s| 375 * 667| 750 * 1334| 750 * 1334| 4.7 (326PPI)| 2x| |iPhone 6Plus/6sPlus| 414 * 736| 1242 * 2208| 1080 * 1920| 5.5 (401PPI)| 3x| 设计和开发时一般选用 iphone6 作为基准尺寸,原因如下: 从中间尺寸向上和向下适配的时候界面调整的幅度最小。如果直接以 414pt 作为基准,那么适配到 320pt 的时候可能就会出现视觉比例失调。 iPhone 6 plus 有两种显示模式,标准模式分辨率为 1242x2208 ,放大模式分辨率为 1125x2001 (即 iPhone 6 的 1.5 倍)。很多情况下这两种尺寸可以用 1.5 倍直接等比适配。如果 UI 设计师可以做两套,一般情况下都是使用 375pt 作为基准设计一套(用来切 @2x 图),然后再等比放大 1.5 倍,生成 1125px 的设计稿(用来切 @3x 图)。 1242x2208 这个奇葩的分辨率,不便于记忆和计算栅格。 以 iphone6 作为基准尺寸,适配原则:文字流式,控件弹性,图片等比缩放。 App 设计的几个技巧 非矢量素材,就可以做尺寸最大的,之后再进行缩小。比如需要兼容 3x 的屏幕,就直接做最高那种图片。 假如是那种导航栏,工具栏之类的背景图,需要横跨整个屏幕。可以只切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,只拉伸最中间的一列像素。需要拉伸的话,横方向就不要出现一些渐变色。 按钮的点击区域,不应该少于 44 像素,就算按钮的图片看起来比较小,也应该使得点按钮周围的透明区也有反应。 启动高分辨率方法 以前的旧工程跑 iphone6 和 iphone6plus 时,默认是「兼容模式」即系统会简单的把内容等比放大,但效果粗糙。此时程序中获取到的设备尺寸还是和 iphone5s 一个尺寸 320pt 。 启动高分辨率模式的方法: 在项目中添加 Launch Screen File Lanuch Screen 是 xcode6 和 iOS8 新加的功能,它用一个 xib 或者 storyboard 作为启动画面。 iOS 在旧版系统中启动时,该属性会被自动忽略,不会造成异常。 补充启动动画 iOS 启动动画的方式有两种:启动图和布局文件。 Xcode 6 是 LaunchScreen.xib ,到 Xcode 7 变成了 LaunchScreen.storyboard ,无可厚非,两者本质都是一样的。 使用布局文件实现启动动画也很简单:获取LaunchScreen.storyboard 里的 ViewController,在把View 提取出来加到UIWindow显示做动画即可。这种方式的好处就是,获取大小就是屏幕的大小,而且只要你把不同屏幕的布局搞定了,系统会帮你生成好加在的启动页,这样就免去了判断和从新设置大小的麻烦,这样才是真适配嘛~ //设置启动动画并跳转 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; [self.window makeKeyAndVisible]; UIViewController* myvc = [[UIViewController alloc] initWithNibName:nil bundle:nil]; self.window.rootViewController = myvc; UIViewController *viewController = [[UIStoryboard storyboardWithName:@"Launch Screen" bundle:nil] instantiateViewControllerWithIdentifier:@"LaunchScreen"]; self.lunchView = viewController.view; [self.window addSubview:self.lunchView]; self.imageV = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.imageV.image = [UIImage imageNamed:@"default0"]; self.timerIndex = 0; self.timer = [NSTimer scheduledTimerWithTimeInterval:0.2f target:self selector:@selector(updateImage:) userInfo:nil repeats:YES]; [self.lunchView addSubview:self.imageV]; [self.window bringSubviewToFront:self.lunchView]; PS: 注意升级 Xcode 7 之后 ios 9 一启动程序就报错Assertion failure in -[UIApplication _runWithMainScene:transitionContext:completion:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3505.16/UIApplication.m:3294 原因是:新的 SDK 不允许在设置rootViewController之前做过于复杂的操作。解决办法: 先设置个rootVIewController之后重新赋值。 Autolayout 与 size Classes 适配 Autolayout 是在 xcode5 之后流行起来的,解决了 Autoresizing 在 storyboard 中,无法实现兄弟控件的布局的问题。 Autolayout 的核心是参照和约束。用相对位置解决问题。 Autolayout 可以动态的修改约束,只需要将对应的约束拖到对应的 view 或者对应的 Controller 中,进行动态修改,并添加一句 [添加了约束的 view layoutIfNeeded]; 就会在下一个消息循环里调用里刷新屏幕的时候调用updateViewConstraints方法。 Autolayout 添加动画也是这样做的。 // 1. 修改约束 xxxxxxxx // 2.执行动画 [UIView animateWithDuration:5 animations:^ { // 让 view 上的约束执行动画 [self.view layoutIfNeeded]; }]; 注: iOS 建议:忘掉 Frame ,使用 Autolayout, 使用比例来固定尺寸而非具体的尺寸大小;相同级别的控件他们的约束在父控件去找 SizeClass 实现屏幕多样化,界面大统一。 仅仅是对屏幕进行了分类,排布 UI 元素还需要 autolayout 不再有横竖屏概念,只有屏幕尺寸的概念,无法单独区分出 5.5 寸竖屏 不再有具体尺寸的区别,只有抽象尺寸的概念 把宽度和高度分为三种情况:Compact(紧凑) Any(任意) Regular(正常) SizeClass 各模式下的适配情况: 宽高任意( WAHA ):任意设备 宽任意高正常(WAHR): 3.5 寸竖屏, 4 寸竖屏, 4.7 寸竖屏, 5.5 寸竖屏, iPad 竖屏、 iPad 横屏 宽任意高紧凑(WAHC): 3.5 寸横屏 , 4 寸横屏, 4.7 寸横屏, 5.5 寸横屏 宽正常高任意(WRHA): 5.5 寸横屏, iPad 竖屏、 iPad 横屏 宽正常高正常(WRHR): iPad 竖屏、 iPad 横屏 宽正常高紧凑(WRHC): 5.5 寸横屏 宽紧凑高任意(WCHA): 3.5 寸竖屏、 3.5 寸横屏, 4 寸竖屏、 4 寸横屏, 4.7 寸竖屏、 4.7 寸横屏, 5.5 寸竖屏 宽紧凑高正常(WCHR): 3.5 寸竖屏, 4 寸竖屏, 4.7 寸竖屏, 5.5 寸竖屏 宽紧凑高紧凑(WCHC): 3.5 寸横屏, 4 寸横屏, 4.7 寸横屏 SizeClass 的其他用途: 通过 Image Asset 为不同的 SizeClass 配置不同的图片 Label 的 FontSize 根据不同的 SizeClass 设置不同的字号 SizeClass 关于代码中判断屏幕旋转问题 Apple 在 iOS 8 中引入了一个新的类,UITraitCollection。这个类封装了像水平和竖直方向的 Size Class 等信息。 iOS 8 的 UIKit 中大多数 UI 的基础类 (包括 UIScreen,UIWindow,UIViewController 和 UIView) 都实现了 UITraitEnvironment 这个接口,通过其中的 traitCollection 这个属性,我们可以拿到对应的 UITraitCollection 对象,从而得知当前的 Size Class,并进一步确定界面的布局。 注:如果项目要区分横竖屏幕、和支持 ipad 以及 ipad 横竖屏幕,应该一开始就提前沟通好,然后选择合适的 SizeClass 来进行操作,否则最后画好了之后再考虑横竖屏幕会很蛋疼(但也不是不能做)。 Demo 就 Autolayout 和 SizeClass 写了一个 Demo,里面涉及了一些基本的使用,有兴趣的小伙伴可以下载看看 Demo 下载 这个好..很有用 Autolayout 有些约束想的头疼
qun
共收到 0 条回复:
回复
.NET Core 大润晟泽实验室
.NET Core 开发
VS Code 或者 VS 2019

系统介绍:

系统开发:
ASP.NET Core + EF Core Mysql + Bootstrap
运行环境:
Ubuntu 16.04 + Kestrel

博客介绍: Sufangxu's Blog
Lab: 大润晟泽实验室
服务器时间:2024-05-07 12:46:21
统计信息
  • 社区会员: 344 人
  • 帖子数: 11 个
  • 回帖数: 1022 条