IOS开发教程第一季之01UI基础day10合并IOS学习011布局与屏幕适配（完结）

最新推荐文章于 2020-08-25 11:12:13 发布

心湖中的石子

最新推荐文章于 2020-08-25 11:12:13 发布

阅读量118

点赞数

分类专栏： # oc学习笔记 IOS学习笔记

本文链接：https://blog.csdn.net/weixin_43745804/article/details/107270269

版权

IOS学习笔记同时被 2 个专栏收录

48 篇文章 1 订阅

订阅专栏

oc学习笔记

42 篇文章 1 订阅

订阅专栏

1.布局概述

autoResizing通过父容器的大小来进行大小的适配。子控件的frame不再写死。而是使用参照
以后主要使用autoLayout布局
不仅通过针对父容器的大小位置，还要考虑容器与容器之间的相对位置和相对大小来进行布局。
使用size classes+AutoLayout针对不同屏幕运用不同规则

PS：autoresizing和autolayout是互斥的

一、介绍屏幕适配的发展过程

直接使用 frame

iPhone3GS \ iPhone4 \ iPhone4S 屏幕的物理尺寸是一样的, 而且一个应用要么是横屏要么是竖屏, 不存在能同时进行横竖屏切换的应用

使用 autoresizing

苹果发布 iPad 以后, 屏幕的物理大小发生了变化, 并且要求部分应用程序实现横竖屏切换
举例: 在竖屏下有一个按钮要占据整个屏幕宽度, 当切换到横屏下以后同样要占据整个屏幕的宽度
autoresizing只能设置当前控件与父控件之间的相对关系

使用 autolayout（从 iOS6开始）

随着 iPhone5 \ iPhone5s 等的发布苹果设备的屏幕变得越来越多, 不仅要求能根据控件父子关系来设置相对位置, 也要求能根据任意控件之间的关系来设置位置
因为 autoresizing只能设置当期控件与父控件之间的相对关系, 当遇到要设置兄弟控件之间的关系的时候 autoresizing就无能为力了
举例: 在竖屏下, 屏幕底部有两个按钮, 这两个按钮的间距为一个固定的值; 当切换为横屏的时候要求这两个按钮还显示在屏幕底部, 并且按钮间的间距不变, 按钮可以随之变宽。

使用 size classes(看时间作为补充, 今天的内容是"Autolayout")

当 iPhone6发布以后, 苹果设备的屏幕越来越多(以后也可能出现更多不同大小的屏幕), 为了能更容易的适配不同的屏幕, 苹果推出了size classes 技术
通过 autolayout设置的约束, 约束一旦添加就会应用于各种屏幕（也就是说在各种不同的屏幕下都使用相同的约束）
通过 size classes + autolayout的方式, 可以为不同尺寸的屏幕设置不同的约束
举例: 在3.5 inch的屏幕下希望某个按钮紧贴屏幕上边显示, 但是当屏幕变成4.7 inch以后, 则希望该按钮显示到屏幕的正中央
size classes技术主要解决的问题: 为不同屏幕, 通过 autolayout设置不同的约束。

二、介绍 autoresizing的使用(只是为了介绍, 以后不要用 autoresizing, 都用 autolayout)
** autoresizing 和 autolayout只能用其一

案例演示(说明 autoresizing外面的四根线作用):

** 特别提示: autoresizing 和 autolayout二者只能用其一。若使用了 autoresizing则不能使用 autolayout, 若使用了 autolayout, 则不能使用 autoresizing。
4> 选中对应的子控件, 点击"工具箱"中的"Size Inspector(小尺子)"
5> 找到 autoresizing的属性框, 通过设置是否需要"外面的4根线"来实现屏幕适配
** 外面四根线的含义: 当前控件与父控件之间是否保持固定的距离。如果"选择"了外面的"线"则表示与父控件某一边的距离固定, 如果不勾选, 则表示当前控件与父控件的某一边距离是可拉伸的（不固定）。

** 里面两根线的作用: 表示子控件的宽和高是否随着父控件的宽高的变化而变化

通过修改属性中蓝色 UIView的大小来演示红色 UIView 跟随变化的效果

2.autoRisizing

#import "ViewController.h"

@interface ViewController ()
//为了方便在方法间能够引用各个控件，需要声明一个全局的属性
@property(nonatomic,weak)UIView* blueView;


- (IBAction)btnClick;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  UIView* blueView=[[UIView alloc]init];
  blueView.backgroundColor=[UIColor blueColor];
  
  blueView.frame=CGRectMake(0, 0, 200, 200);
  self.blueView=blueView;
  [self.view addSubview:blueView];
  
  UIView* redView=[[UIView alloc]init];
  redView.backgroundColor=[UIColor redColor];
  [blueView addSubview:redView];
  
  CGFloat redW=blueView.frame.size.width;
  CGFloat redH=50;
  CGFloat redX=0;
  CGFloat redY=blueView.frame.size.height-50;

  redView.frame=CGRectMake(redX, redY, redW, redH);
  
  //设置autoresizing
  //设置红色view距离蓝色view的底部距离保持不变,注意，多选要使用“ | ”或运算符
  redView.autoresizingMask=UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth;

  
}


- (IBAction)btnClick {
  //每次增加蓝色view的宽度和宽度，frame是结构体，因此不能直接修改结构体，应该拿到结构体之后再修改
  CGRect blueFrame=self.blueView.frame;
  //增加宽和高
  blueFrame.size.width+=20;//修改具体的属性值
  blueFrame.size.height+=20;
  self.blueView.frame=blueFrame;//再赋值回给结构体

}
@end

3.AutoLayout

AutoLayout的2的两个核心概念
1、参照
通过参照其他空间或父控件来设置当前控件的位置和大小
2、约束
通过添加约束限制控件的位置和大小

4.代码实现AutoLayout

利用nslayoutConstraint类创建具体的约束对象

添加约束对象到相应的view上

-（void）addConstraint:(NSLayoutConstraint *)constraint;
-（void）addConstraint:(NSArray*)constraint;

代码实现AutoLayout的注意点

要先禁止autoresizing功能，设置view的如下属性为NO；

view.translateAutoresizingMaskIntoConstraints=NO;

添加约束之前，一定要保证相关控件都已经在各自的父控件上
不用再给控件设置frame

自动布局的核心公式

obj1.proterty1=obj2.property2*multiplier+contant.value

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  // 创建蓝色view
  UIView* blueview=[[UIView alloc]init];
  blueview.backgroundColor=[UIColor blueColor];
  
  
  //创建红色view
  UIView* redview=[[UIView alloc]init];
  redview.backgroundColor=[UIColor redColor];
  
  //临时设置个frame
  //blueview.frame=CGRectMake(0, 60, 300, 30);
  //redview.frame=CGRectMake(0, 120, 300, 30);

  [self.view addSubview:blueview];
  [self.view addSubview:redview];
  
  //禁用autoresizing
  blueview.translatesAutoresizingMaskIntoConstraints=NO;
  redview.translatesAutoresizingMaskIntoConstraints=NO;
  
  
  //创建并添加约束
  //1、创建蓝色view的约束
  //1.1创建蓝色view的高度约束，距离左边30，上60，右边30
  //一下个参数的意思为：A对象 的 某属性 等于 B对象 的 某属性 乘multipler 加constaint
  NSLayoutConstraint* blueHC=[NSLayoutConstraint constraintWithItem:blueview attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];
  //把约束添加到控件上
  [blueview addConstraint:blueHC];
  
  NSLayoutConstraint* blueLeft=[NSLayoutConstraint constraintWithItem:blueview attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
  
  NSLayoutConstraint* blueTop=[NSLayoutConstraint constraintWithItem:blueview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueview.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:60];
  
  NSLayoutConstraint* blueRight=[NSLayoutConstraint constraintWithItem:blueview attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueview.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30];
  
  //将约束添加到父控件中
  [self.view addConstraint:blueLeft];
  [blueview.superview addConstraint:blueTop];
  [blueview.superview addConstraint:blueRight];
  //2、创建红色view的约束
  //2.1让红色view的高度等于蓝色view的高度
  NSLayoutConstraint* redHC=[NSLayoutConstraint constraintWithItem:redview attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueview attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
  //由于后续需要使用到这个高度约束，即对其有依赖
  [self.view addConstraint:redHC];
  //2.2让红色view的top距离蓝色view的top为50
  NSLayoutConstraint* redTop=[NSLayoutConstraint constraintWithItem:redview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:40];
  [self.view addConstraint:redTop];

  
  //2.3红色view与蓝色view右对齐
  NSLayoutConstraint* redRight=[NSLayoutConstraint constraintWithItem:redview attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueview attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
  [self.view addConstraint:redRight];

  //红色view的宽度为蓝色view宽度的0.5倍
  NSLayoutConstraint* redWidthC=[NSLayoutConstraint constraintWithItem:redview attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueview attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
  [self.view addConstraint:redWidthC];

}

@end

结果：
在这里插入图片描述

5.基于动画的代码实现AutoLayout

#import "ViewController.h"

@interface ViewController ()
- (IBAction)btnClick;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *viewConstrain;
@property (weak, nonatomic) IBOutlet UIView *bigView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view.
}

//按钮单击事件
- (IBAction)btnClick {
  self.viewConstrain.constant+=100;
  [UIView animateWithDuration:1.5 animations:^{
    //更新控件的布局
    [self.bigView layoutIfNeeded];
  }];
}
@end

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IOS开发教程第一季之01UI基础day10合并IOS学习011布局与屏幕适配（完结）

1.AutoLayoutautoResizing通过父容器的大小来进行大小的适配。子控件的frame不再写死。而是使用参照以后主要使用autoLayout布局不仅通过针对父容器的大小位置，还要考虑容器与容器之间的相对位置和相对大小来进行布局。使用size classes+AutoLayout针对不同屏幕运用不同规则PS：autoresizing和autolayout是互斥的...
复制链接

扫一扫