效果图:
思路:(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) in13 make.top.leading.bottom.equalTo(self)14 make.width.equalTo(commentButton)15 }16 commentButton.snp_makeConstraints { (make) in17 make.top.bottom.equalTo(self)18 make.leading.equalTo(retweetButton.snp_trailing)19 make.width.equalTo(unlikeButton)20 }21 unlikeButton.snp_makeConstraints { (make) in22 make.top.trailing.bottom.equalTo(self)23 make.leading.equalTo(commentButton.snp_trailing)24 }25 26 // 设置两个分隔线约束27 firstLineView.snp_makeConstraints { (make) in28 make.centerX.equalTo(retweetButton.snp_trailing)29 make.centerY.equalTo(self)30 }31 secondLineView.snp_makeConstraints { (make) in32 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 = false46 addSubview(button)47 return button48 }49 50 // 创建竖线视图51 private func addChildLineView() -> UIImageView{52 let imageView = UIImageView(image:UIImage(named:"timeline_card_bottom_line"))53 addSubview(imageView)54 return imageView55 }