屏幕适配的简单学习与使用

屏幕适配目前几个阶段

写固定值->autoresizingMask->autolayout->sizeClasses

autolayout->sizeClasses 其中他们是依赖关系
autoresizingMask->autolayout 敌对关系,有你没我。所有autoresizingMask要用这个,在xib 或者sb必须取消autolayout

autoresizing xib 简单使用

比如一个view 相对父控件始终在其右下角
屏幕适配的简单学习与使用_第1张图片
屏幕快照 2018-01-08 下午9.43.16.png

我们选择了勾选右边约束和下面约束。相对于父视图。
屏幕适配的简单学习与使用_第2张图片
屏幕快照 2018-01-08 下午9.42.57.png

屏幕适配的简单学习与使用_第3张图片
屏幕快照 2018-01-08 下午9.50.42.png

上下左右4根线是指相对于父视图距离。 里面2根线代表视图是否随着父视图大小改变而一起改变。

代码创建不使用autoresizing

  //禁止autoresizing 自动转为约束
    self.blockView.translatesAutoresizingMaskIntoConstraints = NO ;
autoresizing 代码中的使用 , 需求redview 一直在控制器view的右下角 ,
 //      需求redview 一直在控制器view的右下角
    UIView *redView = [UIView new];
    CGFloat y = self.view.frame.size.height - 100;
    CGFloat x = self.view.frame.size.width - 100;
    redView.frame = CGRectMake(x, y, 100, 100);
    //autoresizing 设置
    redView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleTopMargin;
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    /*
     typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
     UIViewAutoresizingNone                 = 0,
     UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,  距离父控件左边可以伸缩
     UIViewAutoresizingFlexibleWidth        = 1 << 1,  宽度可根据父控件伸缩
     UIViewAutoresizingFlexibleRightMargin  = 1 << 2, 距离父控件右部部可以伸缩
     UIViewAutoresizingFlexibleTopMargin    = 1 << 3, 距离父控件顶部部可以伸缩
     UIViewAutoresizingFlexibleHeight       = 1 << 4,   高度可根据父控件伸缩
     UIViewAutoresizingFlexibleBottomMargin = 1 << 5  距离父控件底部可以伸缩
     };
     */
 
屏幕适配的简单学习与使用_第4张图片
屏幕快照 2018-01-08 下午10.07.54.png
autoresizingMask 局限性

1,只能解决子控件和父控件之间的相对关系
2,比如2个甲乙view 。不是子父关系。我们想乙相对于甲距离始终是20,或者乙跟随甲变化而变化

AutoLayout 自动布局简单学习

  • 通过给控件添加约束。来决定控件的位置和尺寸
    一般控件对象。都需要4个约束。大小。左右约束等。确定其位置。但是Label是个特殊对象。只需要确定其具体位置就可以了。宽高他自己会计算
  • 需求固定宽度。确定其位置。Label 显示很长的字符串 和很短的字符串。记得设置numberOfLines 自动换行,
    屏幕适配的简单学习与使用_第5张图片
    屏幕快照 2018-01-08 下午11.26.27.png
屏幕适配的简单学习与使用_第6张图片
屏幕快照 2018-01-08 下午11.25.55.png

可以看出固定宽度。如果字符串很短,那么Label 显示那么长很不好看。xib 可以设置最大宽度
屏幕适配的简单学习与使用_第7张图片
59E6413D-D669-4FC5-A824-181457A503CB.png

找到label 宽度,设置 relation 最大宽度。即可

xib 设置父控件跟随子控件高度进行自适应变化

屏幕适配的简单学习与使用_第8张图片
屏幕快照 2018-01-08 下午11.42.05.png

首先设置灰色父视图位置和宽


屏幕适配的简单学习与使用_第9张图片
屏幕快照 2018-01-08 下午11.42.18.png

设置白色头像相对灰色父视图位置和大小
屏幕适配的简单学习与使用_第10张图片
屏幕快照 2018-01-08 下午11.42.30.png

设置label相对灰色父视图的约束。即可,效果图
屏幕适配的简单学习与使用_第11张图片
屏幕快照 2018-01-08 下午11.45.24.png

如何设置一个view 相对于另一个view等高。右边对齐。但是宽度是其一半呢

屏幕适配的简单学习与使用_第12张图片
屏幕快照 2018-01-08 下午11.49.31.png

我们可以设置红色右对齐白色,距离白色底部20,等宽高白色。然后根据万能公式,改比例系数。找到等款的位置修改为0.5
屏幕适配的简单学习与使用_第13张图片
29EA62AA-D16D-4E17-863F-8C5145A9D44F.png
xib 设置约束的优先级
屏幕适配的简单学习与使用_第14张图片
E6AC2C88-AB78-4792-AF56-FB0775C9A732.png
比如3个等宽高。的view。甲乙丙 。丙和甲也有约束关系,但是会和乙冲突。那么就有约束优先问题了。当乙消失的时候,甲丙约束就会生效
屏幕适配的简单学习与使用_第15张图片
屏幕快照 2018-01-09 下午10.38.10.png

现在我设置了三个互相关系是 等宽高。 蓝和红关系是 等宽高。底部对齐。如果黑色消失 那么 蓝和红 就少了个约束关系了。所有需要蓝和红有一个距离约束,我们设置为20
屏幕适配的简单学习与使用_第16张图片
屏幕快照 2018-01-09 下午10.40.29.png

现在我们看到报错了。因为和黑色约束冲突了。已经红和黑距离20+ 上黑色的宽度。红和蓝约束 在为20 。明显错误了。所有设置红蓝距离约束的优先级


屏幕适配的简单学习与使用_第17张图片
7E56E42A-A652-495C-AD4D-76B613AC9861.png

下面是设置成功的样子
屏幕适配的简单学习与使用_第18张图片
屏幕快照 2018-01-09 下午10.43.35.png

可以红蓝距离约束变成虚线啦、这样我们设置移除黑色的view时候。红蓝会相距20


屏幕适配的简单学习与使用_第19张图片
屏幕快照 2018-01-09 下午10.45.27.png

如果想代码修改。直接xib 拉出约束线的对象。代码设置长度就可以了

比如
屏幕适配的简单学习与使用_第20张图片
5F7941C4-F1FF-43F1-83AD-636D216997B9.png
我们想修改距离顶部约束。拉出约束对象topcontent。在代码设置
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    self.topcontent.constant = 50 ;
}

那么想动画修改呢

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    self.topcontent.constant = 50 ;
    [UIView animateWithDuration:2.0f animations:^{
        [self.view layoutIfNeeded]; //强制刷新 
    }];
}
Masonry 简单使用,比如一个view 距离父控件的上下左右为20 的几种写法
屏幕适配的简单学习与使用_第21张图片
屏幕快照 2018-01-09 下午11.14.58.png

//方式1

  UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    //添加约束 ,其实就是万能公式
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        //红色view 顶部等于父控件的顶部 * 1.0 + 20
        make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);
        make.left.equalTo(self.view.mas_left).multipliedBy(1.0).offset(20);
        make.right.equalTo(self.view.mas_right).multipliedBy(1.0).offset(-20);
        make.bottom.equalTo(self.view.mas_bottom).multipliedBy(1.0).offset(-20);
    }];

//方式2

  UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
  
    //添加约束 ,其实就是万能公式
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
       // make.top.mas_equalTo(self.view).offset(20); 
        make.top.equalTo(self.view).offset(20);
        make.left.equalTo(self.view).offset(20);
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
    }];

//方式3 ,直接默认其父控件

   // Do any additional setup after loading the view from its nib.

    UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
        
    //添加约束 ,其实就是万能公式
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        //红色view 顶部等于父控件的顶部 * 1.0 + 20
        make.top.offset(20);
        make.left.offset(20);
        make.right.offset(-20);
        make.bottom.offset(-20);
    }];

//方式4

 UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
        
 //添加约束 ,其实就是万能公式
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        //红色view 顶部等于父控件的顶部 * 1.0 + 20
        make.top.and.left.offset(20);
        make.right.and.bottom.offset(-20);
    }];
更新约束 。
    //更新约束。距离顶部为 80
    [redView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(80);
    }];
    
屏幕适配的简单学习与使用_第22张图片
屏幕快照 2018-01-09 下午11.41.40.png
删除之前的所有约束 ,居中大小 100
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.navigationController.navigationBar.hidden = YES ;
    UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    //添加约束 ,其实就是万能公式
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        //红色view 顶部等于父控件的顶部 * 1.0 + 20
        make.top.mas_equalTo(self.view).offset(20);
        make.left.equalTo(self.view).offset(20);
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
    }];
    
    
    //更新约束。距离顶部为 80
    [redView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(80);
    }];
    
    //删除之前所有约束变成居中大小100 的红色view
    [redView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.width.mas_equalTo(100);
        make.height.mas_equalTo(100);
        make.center.mas_equalTo(self.view);
    }];
}
    
屏幕适配的简单学习与使用_第23张图片
屏幕快照 2018-01-09 下午11.48.58.png
简单的学习记录。大佬勿喷

你可能感兴趣的:(屏幕适配的简单学习与使用)