欢迎关注我的 Blog tunnycoder.com
自从 Apple 出了 4.7 寸和 5.5 寸的 iphone 后,在 iOS 开发中, 屏幕适配也成为了一项很重要的工作。(PS:之前一直吐槽安卓各种屏幕适配好蛋疼,后来发现出来混总是要还的。)还好苹果公司也在为这条适配之路更好走,不断的改进着~本文记录了一些屏幕适配过程中的一些问题。
| 机型 | 屏幕宽高(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 作为基准尺寸,原因如下:
以 iphone6 作为基准尺寸,适配原则:文字流式,控件弹性,图片等比缩放。
App 设计的几个技巧
以前的旧工程跑 iphone6 和 iphone6plus 时,默认是「兼容模式」即系统会简单的把内容等比放大,但效果粗糙。此时程序中获取到的设备尺寸还是和 iphone5s 一个尺寸 320pt 。
启动高分辨率模式的方法:
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 是在 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 实现屏幕多样化,界面大统一。
SizeClass 各模式下的适配情况:
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,里面涉及了一些基本的使用,有兴趣的小伙伴可以下载看看
1
ins 2016-05-22 07:59:22 +08:00
这个好..很有用
|
2
xiaoc19 2016-05-22 11:21:28 +08:00
Autolayout 有些约束想的头疼
|