UI028:屏幕适配发展

屏幕适配发展历史

一、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的使用。

  1. 选中控件,属性---不勾选Use Auto Layout,禁用auto layout;
    同时禁用sizes classes。
  2. 选中控件,再选择小尺子,会显示Autoresizing。一共6根线(每根线有2个状态:选中/未选中)。
  3. 外面4根线的作用:分别设置距离父控件的距离是否保持不变。
    不勾选,表示当前控件与父控件的某一边距离是可拉伸的(不固定)。
  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 周一

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 女儿昨晚奋笔疾书也没能完成老师周末布置的作业,原因是作业的数量确实有些个多了,以至于她只完成了一半多一些。当...
    零下1度的刺猬阅读 74评论 0 0
  • 鹤壁汽车工程职业学院宿舍环境很不错,空间很大,每个宿舍都有空调,独立卫生问、阳台和洗漱台,还有自助洗衣机,宿舍条件...
    吃货爱上了瘦子阅读 83评论 0 0
  • 有人放弃你了,不要颓废 因为你被寄予希望
    欲欲阅读 23评论 0 0
  • 仁义礼智信,百善孝为先,孝最近人,修齐治平,家国天下,家家户户,每天都在与孝字打交道,是人世修行的第一步,每当关起...
    九州逍遥001阅读 101评论 0 5
  • 如果把谷歌和谷歌的文件夹删除掉了,下载了新的谷歌,想恢复标签中的内容? 1.去回收站里面看一下有没有 user D...
    你眼里起风阅读 72评论 0 0