- 使用 Masonry 時,有時候我們需要同時在一個父控件上布局一系列等寬高的控件,如下圖:
實現(xiàn)思路:
Masonry 里有兩個這樣的屬性
centerX NSLayoutAttributeCenterX 橫向中點(diǎn)
centerY NSLayoutAttributeCenterY 縱向中點(diǎn)
我們通過上邊的這兩個屬性幫助我們實現(xiàn)
左側(cè)的 view 約束設(shè)置:(距離黑色 view 左側(cè)的距離搜变、centerY(縱向中心,相當(dāng)于確定了 Y 值)、view 的高度與 self.view 的高度比内边,還有一個視圖自身的寬高相等);
中間的 view 約束設(shè)置: ( centerX 待锈、 centerY 漠其、自身寬高相等, 自身和self.view 的高度比竿音,高度也可以和黑色的 View 對比和屎,這里只是一個動態(tài)的高度比);
右側(cè)的跟左側(cè)的很像春瞬,唯一區(qū)別柴信,需要將右側(cè)進(jìn)行約束;
切換橫豎屏我們看一下效果
代碼如下:
- 由于使用了 Block 需要注意循環(huán)引用問題
__weak typeof(self) weakSelf = self
;
__weak typeof(self) weakSelf = self;
self.viewForBottom = [[UIImageView alloc]init];
[self.view addSubview:self.viewForBottom];
self.viewForBottom.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
[self.viewForBottom mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(weakSelf.view).offset(0);
make.left.equalTo(weakSelf.view).offset(0);
make.right.equalTo(weakSelf.view).offset(0);
make.height.equalTo(weakSelf.view.mas_height).multipliedBy(1/13.0f);
}];
self.cropButton = [[UIButton alloc]init];
self.previewButton = [[UIButton alloc]init];
self.saveButton = [[UIButton alloc]init];
[self.viewForBottom addSubview:self.saveButton];
[self.viewForBottom addSubview:self.cropButton];
[self.viewForBottom addSubview:self.previewButton];
self.cropButton.backgroundColor = [UIColor colorWithRed:0.8 green:1.0 blue:0.4 alpha:1.0];
self.saveButton.backgroundColor = [UIColor colorWithRed:1.0 green:0.8 blue:0.4 alpha:1.0];
self.previewButton.backgroundColor = [UIColor yellowColor];
[self.cropButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.viewForBottom).offset(40);
//中心 Y
make.centerY.equalTo(weakSelf.viewForBottom);
make.height.equalTo(weakSelf.cropButton.mas_width);
make.height.equalTo(weakSelf.view.mas_height).multipliedBy(1/25.0f);
}];
[self.previewButton mas_makeConstraints:^(MASConstraintMaker *make) {
//中心 Y
make.centerX.equalTo(weakSelf.viewForBottom);
make.centerY.equalTo(weakSelf.viewForBottom);
make.height.equalTo(weakSelf.previewButton.mas_width);
make.height.equalTo(weakSelf.view.mas_height).multipliedBy(1/25.0f);
}];
[self.saveButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(weakSelf.viewForBottom).offset(-40);
make.centerY.equalTo(weakSelf.viewForBottom);
make.height.equalTo(weakSelf.saveButton.mas_width);
make.height.equalTo(weakSelf.view.mas_height).multipliedBy(1/25.0f);
}];
學(xué)習(xí):
里脊串 Masonry介紹與使用實踐(快速上手Autolayout)