屏幕适配目前几个阶段
写固定值->autoresizingMask->autolayout->sizeClasses
autolayout->sizeClasses 其中他们是依赖关系
autoresizingMask->autolayout 敌对关系，有你没我。所有autoresizingMask要用这个，在xib 或者sb必须取消autolayout
autoresizing xib 简单使用
比如一个view 相对父控件始终在其右下角
屏幕快照 2018-01-08 下午9.43.16.png
我们选择了勾选右边约束和下面约束。相对于父视图。
屏幕快照 2018-01-08 下午9.42.57.png
屏幕快照 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 距离父控件底部可以伸缩
};
*/
屏幕快照 2018-01-08 下午10.07.54.png
autoresizingMask 局限性
1，只能解决子控件和父控件之间的相对关系
2，比如2个甲乙view 。不是子父关系。我们想乙相对于甲距离始终是20，或者乙跟随甲变化而变化
AutoLayout 自动布局简单学习
- 通过给控件添加约束。来决定控件的位置和尺寸
一般控件对象。都需要4个约束。大小。左右约束等。确定其位置。但是Label是个特殊对象。只需要确定其具体位置就可以了。宽高他自己会计算 -
需求固定宽度。确定其位置。Label 显示很长的字符串 和很短的字符串。记得设置numberOfLines 自动换行，
屏幕快照 2018-01-08 下午11.26.27.png
屏幕快照 2018-01-08 下午11.25.55.png
可以看出固定宽度。如果字符串很短，那么Label 显示那么长很不好看。xib 可以设置最大宽度
59E6413D-D669-4FC5-A824-181457A503CB.png
找到label 宽度，设置 relation 最大宽度。即可
xib 设置父控件跟随子控件高度进行自适应变化
屏幕快照 2018-01-08 下午11.42.05.png
首先设置灰色父视图位置和宽
屏幕快照 2018-01-08 下午11.42.18.png
设置白色头像相对灰色父视图位置和大小
屏幕快照 2018-01-08 下午11.42.30.png
设置label相对灰色父视图的约束。即可，效果图
屏幕快照 2018-01-08 下午11.45.24.png
如何设置一个view 相对于另一个view等高。右边对齐。但是宽度是其一半呢
屏幕快照 2018-01-08 下午11.49.31.png
我们可以设置红色右对齐白色，距离白色底部20，等宽高白色。然后根据万能公式，改比例系数。找到等款的位置修改为0.5
29EA62AA-D16D-4E17-863F-8C5145A9D44F.png
xib 设置约束的优先级
E6AC2C88-AB78-4792-AF56-FB0775C9A732.png
比如3个等宽高。的view。甲乙丙 。丙和甲也有约束关系，但是会和乙冲突。那么就有约束优先问题了。当乙消失的时候，甲丙约束就会生效
屏幕快照 2018-01-09 下午10.38.10.png
现在我设置了三个互相关系是 等宽高。 蓝和红关系是 等宽高。底部对齐。如果黑色消失 那么 蓝和红 就少了个约束关系了。所有需要蓝和红有一个距离约束，我们设置为20
屏幕快照 2018-01-09 下午10.40.29.png
现在我们看到报错了。因为和黑色约束冲突了。已经红和黑距离20+ 上黑色的宽度。红和蓝约束 在为20 。明显错误了。所有设置红蓝距离约束的优先级
7E56E42A-A652-495C-AD4D-76B613AC9861.png
下面是设置成功的样子
屏幕快照 2018-01-09 下午10.43.35.png
。可以红蓝距离约束变成虚线啦、这样我们设置移除黑色的view时候。红蓝会相距20
屏幕快照 2018-01-09 下午10.45.27.png
如果想代码修改。直接xib 拉出约束线的对象。代码设置长度就可以了
5F7941C4-F1FF-43F1-83AD-636D216997B9.png
我们想修改距离顶部约束。拉出约束对象topcontent。在代码设置
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
self.topcontent.constant = 50 ;
}
那么想动画修改呢
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
self.topcontent.constant = 50 ;
[UIView animateWithDuration:2.0f animations:^{
[self.view layoutIfNeeded]; //强制刷新
}];
}
Masonry 简单使用，比如一个view 距离父控件的上下左右为20 的几种写法
屏幕快照 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);
}];
屏幕快照 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);
}];
}
屏幕快照 2018-01-09 下午11.48.58.png
网友评论