![](/img/trans.png)
[英]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.