[英]iOS - Constraints - Two Views next to each other in UITableViewCell
[英]3 views next to each other programmatically constraints
我正在尝试创建一个自定义 callOutView,为此我有一个bubbleView
,它是此视图中UIView
的子类,我想创建 3 个彼此相邻的视图。 首先是一个imageView
,它的静态宽度和高度为 60。然后是一个 UIView ,它的动态宽度取决于bubbleView
的总宽度。 然后最后还有另一个具有静态高度和宽度的 imageView 再次在 60。我怎样才能做到这一点? 我在下面尝试过snapKit ,但似乎不起作用。
我想要的插图
我试过的代码
bubbleView = BubbleView()
bubbleView?.clipsToBounds = true
bubbleView?.layer.masksToBounds = true
self.addSubview(bubbleView!)
let logoImageView = UIImageView()
logoImageView.contentMode = UIViewContentMode.ScaleAspectFill
logoImageView.image = UIImage(data: logoImage!)
bubbleView?.contentView.addSubview(logoImageView)
logoImageView.backgroundColor = UIColor.whiteColor()
let informationView = UIView()
bubbleView?.contentView.addSubview(informationView)
informationView.backgroundColor = UIColor.redColor()
let discView = UIImageView()
discView.contentMode = UIViewContentMode.ScaleAspectFill
discView.image = UIImage(data: logoImage!)
bubbleView?.contentView.addSubview(discView)
discView.backgroundColor = UIColor.whiteColor()
logoImageView.snp_makeConstraints { (make) -> Void in
make.top.equalTo(bubbleView!).offset(0)
make.left.equalTo(bubbleView!).offset(0)
make.height.equalTo(60)
make.right.equalTo(informationView)
}
informationView.snp_makeConstraints { (make) -> Void in
make.top.equalTo(bubbleView!).offset(0)
make.left.equalTo(logoImageView).offset(0)
make.height.equalTo(60)
make.right.equalTo(discView).offset(0)
}
discView.snp_makeConstraints { (make) -> Void in
make.top.equalTo(bubbleView!).offset(0)
make.left.equalTo(informationView).offset(0)
make.height.equalTo(60)
make.right.equalTo(bubbleView!)
}
你需要设置
leftView
和rightView
上的宽度约束等于 60。middleView.leading
等于leftView.trailing
middleView.trailing
等于rightView.leading
。all.height
等于 60。all.top
等于parent.top
您可以在 Playground 中尝试此操作。
import UIKit
import XCPlayground
let parentView = UIView()
parentView.frame.size = CGSize(width: 450, height: 60)
parentView.backgroundColor = UIColor.whiteColor()
let leftView = UIView()
leftView.translatesAutoresizingMaskIntoConstraints = false
leftView.backgroundColor = .blackColor()
let rightView = UIView()
rightView.translatesAutoresizingMaskIntoConstraints = false
rightView.backgroundColor = .grayColor()
let middleView = UIView()
middleView.translatesAutoresizingMaskIntoConstraints = false
middleView.backgroundColor = .lightGrayColor()
// add subview
parentView.addSubview(leftView)
parentView.addSubview(middleView)
parentView.addSubview(rightView)
// config constraints
leftView.leadingAnchor.constraintEqualToAnchor(parentView.leadingAnchor).active = true
leftView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
leftView.heightAnchor.constraintEqualToConstant(60).active = true
leftView.widthAnchor.constraintEqualToConstant(60).active = true
rightView.trailingAnchor.constraintEqualToAnchor(parentView.trailingAnchor).active = true
rightView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
rightView.heightAnchor.constraintEqualToConstant(60).active = true
rightView.widthAnchor.constraintEqualToConstant(60).active = true
middleView.leadingAnchor.constraintEqualToAnchor(leftView.trailingAnchor).active = true
middleView.trailingAnchor.constraintEqualToAnchor(rightView.trailingAnchor).active = true
middleView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
middleView.bottomAnchor.constraintEqualToAnchor(parentView.bottomAnchor).active = true
XCPlaygroundPage.currentPage.liveView = parentView
尝试以下操作:
let bubbleView = UIView()
bubbleView.translatesAutoresizingMaskIntoConstraints = false
let logoImageView = UIImageView()
logoImageView.translatesAutoresizingMaskIntoConstraints = false
logoImageView.backgroundColor = .darkGrayColor()
bubbleView.addSubview(logoImageView)
let informationView = UIView()
informationView.translatesAutoresizingMaskIntoConstraints = false
informationView.backgroundColor = .lightGrayColor()
bubbleView.addSubview(informationView)
let discImageView = UIImageView()
discImageView.translatesAutoresizingMaskIntoConstraints = false
discImageView.backgroundColor = .darkGrayColor()
bubbleView.addSubview(discImageView)
let views = ["logoImageView": logoImageView, "informationView": informationView, "discImageView": discImageView]
bubbleView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[logoImageView(60)][informationView][discImageView(60)]|", options: [.AlignAllBottom, .AlignAllTop], metrics: nil, views: views))
bubbleView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[logoImageView(60)]|", options: [], metrics: nil, views: views))
// helper constraint so that the information view is at least two times the imageviews' width
bubbleView.addConstraint(NSLayoutConstraint(item: informationView, attribute: .Width, relatedBy: .GreaterThanOrEqual, toItem: logoImageView, attribute: .Width, multiplier: 2.0, constant: 0.0))
view.addSubview(bubbleView)
view.addConstraint(NSLayoutConstraint(item: bubbleView, attribute: .CenterX, relatedBy: .Equal, toItem: view, attribute: .CenterX, multiplier: 1.0, constant: 0.0))
view.addConstraint(NSLayoutConstraint(item: bubbleView, attribute: .CenterY, relatedBy: .Equal, toItem: view, attribute: .CenterY, multiplier: 1.0, constant: 0.0))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.