一个赏心悦目的界面,少不了的就是排版,我们项目中比较常见的就是方形的布局, 图片,按钮,标签的布局等等;
这里我就以按钮为例,介绍几种开发中对批量控件布局的方式:
线形布局:
第一种: 最简单直接,但比较繁琐,代码冗余的方式:
//1.创建按钮
UIButton *button1 = [[UIButton alloc]init];
UIButton *button2 = [[UIButton alloc]init];
UIButton *button3 = [[UIButton alloc]init];
//2.添加到父视图中
[self.view addSubview:button1];
[self.view addSubview:button2];
[self.view addSubview:button3];
//3.布局
[button1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.view.mas_centerY);
make.left.equalTo(self.view.mas_left);
}];
[button2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(button1.mas_right);
make.centerY.equalTo(button1.mas_centerY);
make.width.equalTo(button1.mas_width);
}];
[button3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(button2.mas_right);
make.centerY.equalTo(button2.mas_centerY);
make.width.equalTo(button2.mas_width);
make.right.equalTo(self.view.mas_right);
}];
第二种:这种方式就代码简洁,比较简单
//创建按钮数组
NSMutableArray *buttonArrM = [NSMutableArray array];
//1.创建按钮
for (NSInteger i = 0; i < 3; i++) {
UIButton *button = [[UIButton alloc]init];
[self.view addSubview:button];
[buttonArrM addObject: button];
}
//2.布局
[buttonArrM mas_distributeViewsAlongAxis: MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];
[buttonArrM mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.equalTo(self.view);
}];
方形布局(九宫格):
第一种方式:先说简单的方式
//按钮的宽高
CGFloat buttonWH = 60;
//第一个 button 的 frame 假设第一个 button 的 坐标点为原点
CGRect firstFrame = CGRectMake(0, 0, buttonWH, buttonWH);
//设置按钮要移动的间距
CGFloat gap = buttonWH + 20;
for (NSInteger i = 0; i < 9; i++) {
UIButton *button = [[UIButton alloc]init];
[self.view addSubview:button];
//九宫格算法
//计算行数和列数
NSInteger row = i / 3;
NSInteger col = i % 3;
//给每一个按钮设置 frame
// 在 swifit 中 button.frame = firstFrame.offsetBy(gap * col, gap * row)
button.frame = CGRectOffset(firstFrame, gap * col, gap * row);
}
第二种方式:这种方式跟上述线形布局思路一样(在上一个按钮的位置做偏移,这里就不做描述了)
以上的这些布局方式适用于多种控件,当然我想大家一定会选用简单快捷,而稍具有质量的代码,希望可以帮助大家。