以底部toolbar为例,添加三个Button,等宽登高布局
layout_01.png
方式一:
addChildButton为抽取的创建Button的公共方法,其中完成了添加控件的操作
约束1:
左边按钮:
设置left、top、bottom等于父控件-底部ToolBar(offset为0)
设置width等于中间按钮
中间按钮:
设置top、bottom与底部等于父控件底部ToolBar(offset为0)
设置left等于左边按钮的right
设置width等于右边按钮
右边按钮:
设置top、right、bottom与底部等于父控件-底部ToolBar(offset为0)
设置left等于中间按钮right
// MARK: - 设置视图
private func setupUI () {
// 添加控件
let leftButton = addChildButton("left", title: "默认")
let midButton = addChildButton("mid", title: "Emoji")
let rightButton = addChildButton("right", title: "浪小花")
// 添加约束
leftButton.snp_makeConstraints { (make) in
make.left.top.bottom.equalTo(self)
make.width.equalTo(midButton)
}
midButton.snp_makeConstraints { (make) in
make.top.bottom.equalTo(self)
make.left.equalTo(leftButton.snp_right)
make.width.equalTo(rightButton)
}
rightButton.snp_makeConstraints { (make) in
make.right.top.bottom.equalTo(self)
make.left.equalTo(midButton.snp_right)
}
}
addChildButton创建Button公共方法
// MARK: - 添加Button公共方法
private func addChildButton (imageName: String ,title: String) -> UIButton {
let button = UIButton()
button.setBackgroundImage(UIImage(named: "compose_emotion_table_\(imageName)_normal"), forState: UIControlState.Normal)
button.setBackgroundImage(UIImage(named: "compose_emotion_table_\(imageName)_selected"), forState: UIControlState.Selected)
button.setTitle(title, forState: UIControlState.Normal)
button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
button.setTitleColor(UIColor.grayColor(), forState: UIControlState.Selected)
button.titleLabel?.font = UIFont.systemFontOfSize(15)
addSubview(button)
return button
}
方式二:
UIStackView
①创建自定义toolbar时继承自UIStackView
class JSEmoticonToolBarView: UIStackView
②添加子控件时需要使用addArrangedSubview
addArrangedSubview(<#T##view: UIView##UIView#>)
③设置排列方式和填充方式
需要注意的是,与使用约束一样,要先添加控件,再设置约束,否则使用约束会直接报错,而使用StackView不会报错
// 排列方式
axis = .Horizontal
// 填充方式
distribution = .FillEqually // 子控件大小相等,填充父控件
④如果使用UIStackView初始化时需要传入frame,如果使用约束,可以先传入CGRectZero
// MARK: - 懒加载控件
private lazy var toolbar:JSEmoticonToolBarView = JSEmoticonToolBarView(frame: CGRectZero)
方式三:
OC中Masonry快捷方法:
将要排列的空间添加到一个数组中,对数组进行约束
NSArray *arr = @[leftButton,midButton,rightButton];
/*
参数1: distributeViewsAlongAxis 排列方向
MASAxisTypeHorizontal - 水平分布
MASAxisTypeVertical - 垂直分布
参数2: FixedSpacing item间距
参数3: leadSpacing 左侧距离父控件的间距
参数4: tailSpacing 右侧距离父控件的间距
*/
[arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];
[arr makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@0);
make.height.equalTo(@0);
}];
mas_distributeViewsAlongAxis使用说明
水平方向:
方式1:设置top和bottom相对父控件的offset
方式2:或者设置一个height + top/bottom
垂直方向:
方式1:设置left和right相对父控件的offset
方式2:或者设置一个width+left/right