一 简单参数的介绍
>参数一:(UILayoutPriority)
>设置优先级等级,数值越大,优先级越高。
>UILayoutPriorityRequired == 1000;
>UILayoutPriorityDefaultHigh == 750;
>UILayoutPriorityDefaultLow == 250;
>UILayoutPriorityFittingSizeLevel == 50;
mas_makeConstraints() 添加约束
mas_remakeConstraints() 移除之前的约束,重新添加新的约束
mas_updateConstraints() 更新约束,写哪条更新哪条,其他约束不变
equalTo() 参数是对象类型,一般是视图对象或者mas_width这样的坐标系对象
mas_equalTo() 和上面功能相同,参数可以传递基础数据类型对象,可以理解为比上面的API更强大
width() 用来表示宽度,例如代表view的宽度
mas_width() 用来获取宽度的值。和上面的区别在于,一个代表某个坐标系对象,一个用来获取坐标系对象的值
[_textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.mas_left);
make.width.equalTo(weakSelf).multipliedBy(0.01f);//相对于weakSelf比例进行缩放
make.top.equalTo(weakSelf);
make.bottom.equalTo(weakSelf.mas_bottom).mas_offset(-10);
}];
二 动态刷新布局简单实用
纯代码约束优先级.gif
- (void)viewDidLoad {
[super viewDidLoad];
//1.添加三个View
UIView *orangeView = [[UIView alloc]init];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];
self.orangeView = orangeView;
//2.
UIView *yellowView = [[UIView alloc]init];
yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:yellowView];
self.yellowView = yellowView;
//3.
UIView *greenView = [[UIView alloc]init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
self.greenView = greenView;
//配置约束
[self setUpRestrain];
}
//配置约束
-(void)setUpRestrain
{
__weak typeof( self) weakSelf = self;
//对于橙色View只需正常设置约束就好
[self.orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.height.mas_equalTo(100);
make.left.offset(10);
make.top.offset(50);
}];
//黄色View只会发生一次变化,就多设一个优先级较低的约束就好
[self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.height.mas_equalTo(100);
make.left.equalTo(weakSelf.orangeView.mas_right).offset(20);
make.top.offset(50);
//当橙色View消失后,黄色View缺少左边约束,所以给其加一个优先级更低的左边约束。当第一个左边约束失效后,这个约束就起作用了
make.left.equalTo(weakSelf.view.mas_left).offset(20).priority(300);
}];
//同理绿色View的低级约束就得设置两个
[self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.height.mas_equalTo(100);
make.left.equalTo(weakSelf.yellowView.mas_right).offset(20);
make.top.offset(50);
make.left.equalTo(weakSelf.orangeView.mas_right).offset(20).priority(300);
make.left.equalTo(weakSelf.view.mas_left).offset(20).priority(250);
}];
}
//删除黄色View
- (IBAction)cancelYellowBtn:(id)sender {
//这里有个知识点:用约束布局实现动画,布局代码写在外面,然后调用强制布局方法写在UIView动画里面
[self.yellowView removeFromSuperview];
[UIView animateWithDuration:0.5 animations:^{
//强制刷新布局
[self.view layoutIfNeeded];
}];
}
//删除橙色View
- (IBAction)cancelGreenBtn:(id)sender {
[self.orangeView removeFromSuperview];
[UIView animateWithDuration:0.5 animations:^{
//强制刷新布局
[self.view layoutIfNeeded];
}];
}
三 硬度的简单实用
最近在使用Masonry时出现一个布局问题,如下图:
1707114-687f0017c5d25623.png
正常显示:
1707114-fc6cc0052f899a50.png
布局需求是,最左侧头像完整显示,姓名完整显示,性别和年领完整显示,病名紧贴右侧,左侧不能遮挡年龄,病名过长可以不显示完全。
开始有问题的布局代码:
[self.headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentView).offset(12.5);
make.size.mas_equalTo(CGSizeMake(45, 45));
make.centerY.equalTo(self.contentView);
}];
[self.lbPatientName mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.headImageView.mas_right).with.offset(7);
make.top.equalTo(self.headImageView).with.offset(2.5);
}];
[self.lbPatientAge mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.lbPatientName.mas_right).offset(10);
make.centerY.equalTo(self.lbPatientName);
}];
[self.btnIllDiagnose mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.lbPatientName);
make.right.equalTo(self.contentView).offset(-15);
make.left.greaterThanOrEqualTo(self.lbPatientAge.mas_right).offset(3);
}];
这样布局的话当病名过长时,会出现性别年龄被遮挡的情况,如上图一。
解决办法:
因为我们没有给姓名、病名和性别年龄设定固定宽度,所以系统在自动布局的时候并不知道哪个应该被完整显示,哪个可以不完整显示。所以我们要给控件设置布局优先级:
修改后代码如下:
[self.headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentView).offset(12.5);
make.size.mas_equalTo(CGSizeMake(45, 45));
make.centerY.equalTo(self.contentView);
}];
[self.lbPatientName mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.headImageView.mas_right).with.offset(7);
make.top.equalTo(self.headImageView).with.offset(2.5);
}];
[self.lbPatientAge mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.lbPatientName.mas_right).offset(10);
make.centerY.equalTo(self.lbPatientName);
}];
[self.btnIllDiagnose mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.lbPatientName);
make.right.equalTo(self.contentView).offset(-15);
make.left.greaterThanOrEqualTo(self.lbPatientAge.mas_right).offset(3);
}];
// 设置优先级
[self.lbPatientName setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
[self.lbPatientAge setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
[self.btnIllDiagnose setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
设置优先级方法:
- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
第一个参数(priority):通俗来讲,不同的优先级,表示显示的完整性的高低,优先级越高,那么在父控件无法在无越界的情况下的情况下,就会优先先把优先级高的控件显示完整,然后再依次显示优先级低的
第二个参数(axis):代表在什么方向上进行优先级限制
这样显示就正常了:
1707114-50cea9df8cd32d0c.png
网友评论