一、iPhone屏幕适配的发展历史。
1.直接使用frame计算控件的位置,大小【MagicNumber】。
屏幕的物理尺寸是一样的(3GS, 4, 4S),无需屏幕适配,且不存在同时进行横竖屏切换的应用。
2.使用autoresizing进行屏幕适配(只能参照父控件来设置参照)
随着iPad发布,屏幕的物理尺寸发生了变化,要实现横竖屏切换,不能把控件的frame写死。要进行屏幕适配。
autoresizing的核心思想:
参考父容器来设置子控件的frame,不要写死frame,而是参照。
注意:autoresizing只能设置当前控件与父控件之间的相对关系,从而实现间接设置frame。
iOS系统在运行时,根据设置的规则,计算出frame,无需手动设置frame。
3. autolayout( iOS6+),设置参照(参考父控件,参照兄弟控件)
随着5/5s的发布,不同尺寸的屏幕越来越多,不仅要求根据控件父子关系来设置相对位置,还要能根据任意控件之间的关系来设置位置。
不同屏幕,应用同一种规则。
4. size classes + autolayout 进行屏幕适配。【不同屏幕,应用不同规则】
随着6的发布,屏幕越来越多,为了能更容易的适配不同的屏幕,苹果退出了size classes技术。
通过autolayout设置的约束,约束一旦添加就会应用于各种屏幕(也就是说在各种不同的屏幕下都使用相同的约束)
通过size classes+ autolayout的方式,可以为不同尺寸的屏幕设置不同的约束。
eg:小屏幕下希望按钮紧贴屏幕上边显示,但是到4.7大屏幕上,希望该按钮,显示在屏幕的正中央。
size classes技术主要解决的问题:为不同尺寸的屏幕,通过autolayout设置不同的约束。
5. 注意:
无论是通过autoresizing, 还是autolayout。其实只是间接设置了控件的frame。所以一旦使用了autoresizing或者autolayout,那么就不要再直接设置frame了。否则可能产生混乱。
autoresizing不再推荐使用。主要使用autolayout技术。
autoresizing与autolayout是互斥的,同时只能使用其中1种。
但是用autoresizing的时候,必须禁用autolayout;
当使用autolayout的时候,就无法使用autoresizing了。
二. autoresizing的使用。
- 选中控件,属性---不勾选Use Auto Layout,禁用auto layout;
同时禁用sizes classes。- 选中控件,再选择小尺子,会显示Autoresizing。一共6根线(每根线有2个状态:选中/未选中)。
- 外面4根线的作用:分别设置距离父控件的距离是否保持不变。
不勾选,表示当前控件与父控件的某一边距离是可拉伸的(不固定)。- 里面2根线的作用:当前子控件的宽高,是否会随着父控件的宽度增减 而增减。
三. 代码实现autoresizing
目的:旧的项目是通过代码设置实现的autoresizing,遇到autoresizing是可以应付自如。旧的项目还没有storeboard。
注意:这里一定要用纯代码的方式,创建每一个控件。拖上来的控件默认设置了一些属性,会造成运行效果不正确。
// 通过代码来创建,先禁用auto layout和sizes classes。
@interface ViewController ()
- (IBAction)btnClick;
@property(nonatomic, weak) UIView *blueView;
@property(nonatomic, weak) UIView *redView;
@end
- (void)viewDidLoad {
[super viewDidLoad];
UIView *blueVw = [[UIView alloc] init];
blueVw.background = [UIColor blueColor];
blueVw.frame = CGRectMake(0, 0, 200, 200);
[self.view addSubview:blueVw];
self.blueView = blueVw; // 赋值给引用变量,便于增加其宽高。
UIView *redVw = [[UIView alloc] init];
redVw.background = [UIColor redColor];
[self.blueVw addSubview:redVw];
CGFloat redW = blueVw.frame.size.width;
CGFloat redH = 50;
CGFloat redX = 0;
CGFloat redY = blueVw.frame.size.height - redH;
blueVw.frame = CGRectMake(redX, redY, redW, redH);
self.redView = redVw;
// 设置autoresizing。
// 1. 设置红view距离蓝色view底部的距离保持不变。
// UIViewAutoresizingFlexibleWidth: 宽度随着父控件的变化而变化。勾选了里面的横线。
// UIViewAutoresizingFlexibleLeftMargin: 距离左边可变,右边距离是固定的。
// UIViewAutoresizingFlexibleTopMargin: 距离下边是固定的。
redVw.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;
}
- (IBAction)btnClick {
// 增加蓝色view的宽高。
CGRect blueFrame = self.blueView.frame;
blueFrame.size.height += 20;
blueFrame.size.width += 20;
self.blueView.frame = blueFrame;
}
2023/06/12 周一