设置三个按钮等宽分布
效果图:
思路:(self为自定义的View,里面有三个按钮和两个分隔线)
一、按钮约束:使三个按钮等宽分布
1、按钮一:上、左、下和self对齐,宽和“按钮二”对齐
2、按钮二:上、下和self对齐,宽和“按钮三”对齐,左和“按钮二”右对齐
3、按钮三:上、右、下和self对齐,左和“按钮二”右对齐
二、竖线约束:
1、分隔线一:CenterY和self对齐,CenterX和“按钮一”右对齐
2、分隔线二:CenterY和self对齐,CenterX和“按钮二”右对齐
1 private func setupUI(){ 2 // 添加三个按钮 3 let retweetButton = addChildButton(imageName: "timeline_icon_retweet",title: "转发") 4 let commentButton = addChildButton(imageName: "timeline_icon_comment",title: "评论") 5 let unlikeButton = addChildButton(imageName: "timeline_icon_unlike",title: "赞") 6 7 // 添加两个分隔线 8 let firstLineView = addChildLineView() 9 let secondLineView = addChildLineView() 10 11 // 设置三个按钮的约束 12 retweetButton.snp_makeConstraints { (make) in 13 make.top.leading.bottom.equalTo(self) 14 make.width.equalTo(commentButton) 15 } 16 commentButton.snp_makeConstraints { (make) in 17 make.top.bottom.equalTo(self) 18 make.leading.equalTo(retweetButton.snp_trailing) 19 make.width.equalTo(unlikeButton) 20 } 21 unlikeButton.snp_makeConstraints { (make) in 22 make.top.trailing.bottom.equalTo(self) 23 make.leading.equalTo(commentButton.snp_trailing) 24 } 25 26 // 设置两个分隔线约束 27 firstLineView.snp_makeConstraints { (make) in 28 make.centerX.equalTo(retweetButton.snp_trailing) 29 make.centerY.equalTo(self) 30 } 31 secondLineView.snp_makeConstraints { (make) in 32 make.centerX.equalTo(commentButton.snp_trailing) 33 make.centerY.equalTo(self) 34 } 35 } 36 37 // 创建button按钮 38 private func addChildButton(imageName:String,title:String) -> UIButton{ 39 let button = UIButton() 40 button.setImage(UIImage(named:imageName), for: .normal) 41 button.setTitle(title, for: .normal) 42 button.titleLabel?.font = UIFont.systemFont(ofSize: 14) 43 button.setTitleColor(UIColor.darkGray, for: .normal) 44 button.setBackgroundImage(UIImage(named:"timeline_card_bottom_background"), for: .normal) 45 button.adjustsImageWhenHighlighted = false 46 addSubview(button) 47 return button 48 } 49 50 // 创建竖线视图 51 private func addChildLineView() -> UIImageView{ 52 let imageView = UIImageView(image:UIImage(named:"timeline_card_bottom_line")) 53 addSubview(imageView) 54 return imageView 55 }