本文将综合介绍Masonry的使用,核心代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
// 创建 red button
UIButton *redButton = [[UIButton alloc] init];
redButton.backgroundColor = [UIColor redColor];
[self.view addSubview:redButton];
self.redButton = redButton;
[self.redButton addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];
// 创建 orange button
UIButton *orangeButton = [[UIButton alloc] init];
orangeButton.backgroundColor = [UIColor orangeColor];
[self.redButton addSubview:orangeButton];
self.orangeButton = orangeButton;
// 创建 yellow button
UIButton *yellowButton = [[UIButton alloc] init];
yellowButton.backgroundColor = [UIColor yellowColor];
[self.orangeButton addSubview:yellowButton];
self.yellowButton = yellowButton;
// 创建 green button
UIButton *greenButton = [[UIButton alloc] init];
greenButton.backgroundColor = [UIColor greenColor];
[self.yellowButton addSubview:greenButton];
self.greenButton = greenButton;
// 创建 blue button
UIButton *blueButton = [[UIButton alloc] init];
blueButton.backgroundColor = [UIColor blueColor];
[self.greenButton addSubview:blueButton];
self.blueButton = blueButton;
// 创建 purple button
UIButton *purpleButton = [[UIButton alloc] init];
purpleButton.backgroundColor = [UIColor purpleColor];
[self.blueButton addSubview:purpleButton];
self.purpleButton = purpleButton;
// 可以给red button添加初始约束
[self.redButton mas_makeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(self.view);
// 约束宽高初始值
make.width.equalTo(self.view.mas_width).offset(-20);
make.height.equalTo(self.view.mas_height).offset(-20);
}];
// 可以给orange button添加初始约束
[self.orangeButton mas_makeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(self.redButton);
// 约束宽高初始值
make.width.equalTo(self.redButton.mas_width).offset(-20);
make.height.equalTo(self.redButton.mas_height).offset(-20);
}];
// 可以给yellow button添加初始约束
[self.yellowButton mas_makeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(self.orangeButton);
// 约束宽高初始值
make.width.equalTo(self.orangeButton.mas_width).offset(-20);
make.height.equalTo(self.orangeButton.mas_height).offset(-20);
}];
// 可以给green button添加初始约束
[self.greenButton mas_makeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(self.yellowButton);
// 约束宽高初始值
make.width.equalTo(self.yellowButton.mas_width).offset(-20);
make.height.equalTo(self.yellowButton.mas_height).offset(-20);
}];
// 可以给blue button添加初始约束
[self.blueButton mas_makeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(self.greenButton);
// 约束宽高初始值
make.width.equalTo(self.greenButton.mas_width).offset(-20);
make.height.equalTo(self.greenButton.mas_height).offset(-20);
}];
// 可以给purple button添加初始约束
[self.purpleButton mas_makeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(self.blueButton);
// 约束宽高初始值
make.width.equalTo(self.blueButton.mas_width).offset(-20);
make.height.equalTo(self.blueButton.mas_height).offset(-20);
}];
self.buttonArray = @[self.redButton, self.orangeButton, self.yellowButton, self.greenButton, self.blueButton, self.purpleButton];
}
- (void)click {
for (NSInteger i = self.buttonArray.count - 1; i >= 0; i --) {
UIButton *itemButton = self.buttonArray[i];
// 重设约束
[itemButton mas_remakeConstraints:^(MASConstraintMaker *make) {
// 约束中点位置为父控件的中点位置
make.center.equalTo(itemButton.superview);
// 约束宽度不变,仍为200
make.width.equalTo(@(200));
// 约束高度变为50
make.height.equalTo(@50);
}];
}
// 开始执行动画,设置约束
[UIView animateWithDuration:1.0 animations:^{
[self.view layoutIfNeeded];
}];
}
点击红色按钮后,重新设置所有按钮的约束。
重点是找到每个按钮的父控件,并将该按钮的约束设置为:中点为父控件的中点,宽度为200,高度为50。约束完成后,要想立即更新约束必须调用layoutIfNeeded函数,并执行动画。