我找到了一个很棒的教程,它解释了一个很好的但是关于如何使用 PureLayout 来做一些很酷和简单的布局的东西。我在让我的标签与我试图放入的视图的右侧对齐时遇到了一些问题
我在班上名列前茅
var cardView: UIView!
var clipView: UIView!
var scrollView: UIScrollView!
...
然后我有这个viewDidLoad()
var openNowLabelView: UIView!
var openNowLabel: UILabel!
cardView = UIView(frame: CGRect.zero)
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOffset = CGSize(width: 0, height: 12)
cardView.layer.shadowOpacity = 0.33
cardView.layer.shadowRadius = 8
cardView.layer.shadowPath = UIBezierPath(roundedRect: cardView.bounds, cornerRadius: 12).cgPath
self.addSubview(cardView)
clipView = UIView(frame: CGRect.zero)
clipView.backgroundColor = UIColor(red: 42/255, green: 46/255, blue: 61/255, alpha: 1)
clipView.layer.cornerRadius = 12.0
clipView.clipsToBounds = true
cardView.addSubview(clipView)
scrollView = UIScrollView(frame: CGRect.zero)
clipView.addSubview(scrollView)
...
openNowLabelView = UIView(frame: CGRect.zero)
openNowLabel = UILabel(frame: CGRect.zero)
openNowLabel.textColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
openNowLabel.font = UIFont(name: "Gibson-Regular", size: 18)
openNowLabel.text = "Open Now"
openNowLabelView.layer.borderWidth = 1
openNowLabelView.layer.borderColor = UIColor.red.cgColor
openNowLabel.textAlignment = .right
openNowLabelView.addSubview(openNowLabel)
scrollView.addSubview(openNowLabelView)
我有一个override func updateConstraints()
功能
if(shouldSetupConstraints) {
cardView.autoPinEdge(toSuperviewEdge: .bottom, withInset: edgesInset)
cardView.autoPinEdge(toSuperviewEdge: .left, withInset: edgesInset)
cardView.autoPinEdge(toSuperviewEdge: .right, withInset: edgesInset)
cardView.autoSetDimension(.height, toSize: UIScreen.main.bounds.height - 32)
clipView.autoPinEdge(.top, to: .top, of: cardView)
clipView.autoPinEdge(.left, to: .left, of: cardView)
clipView.autoPinEdge(.right, to: .right, of: cardView)
clipView.autoPinEdge(.bottom, to: .bottom, of: cardView)
scrollView.autoPinEdge(.top, to: .top, of: clipView, withOffset: 161)
scrollView.autoPinEdge(.bottom, to: .bottom, of: clipView)
scrollView.autoPinEdge(.left, to: .left, of: clipView)
scrollView.autoPinEdge(.right, to: .right, of: clipView)
...
openNowLabel.sizeToFit()
openNowLabelView.autoSetDimension(.height, toSize: openNowLabel.bounds.height)
openNowLabelView.autoSetDimension(.width, toSize: openNowLabel.bounds.width)
openNowLabelView.autoPinEdge(.right, to: .right, of: scrollView, withOffset: edgesInset)
openNowLabelView.autoPinEdge(.top, to: .top, of: placeDistanceLabelView)
shouldSetupConstraints = false
}
super.updateConstraints()
这是我得到的结果看起来像这样......
我不明白为什么会这样
更新
我已经稍微清理了视图和标签以使其更清晰,我能够解决我需要在视图中嵌入标签以使PureLayout
库正常工作的问题,希望这可以更好地说明我的代码说明了我在屏幕上看到的内容
// setup views and labels
...
var scrollView: UIScrollView = {
let view = UIScrollView.newAutoLayout()
view?.translatesAutoresizingMaskIntoConstraints = false
return view!
}()
...
var placeTitleLabel: UILabel = {
let label = UILabel.newAutoLayout()
label?.numberOfLines = 1
label?.lineBreakMode = .byClipping
label?.textColor = .white
label?.font = UIFont(name: "Gibson-Semibold", size: 25)
return label!
}()
var placeDistanceLabel: UILabel = {
let label = UILabel.newAutoLayout()
label?.numberOfLines = 1
label?.lineBreakMode = .byClipping
label?.textColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
label?.font = UIFont(name: "Gibson-Regular", size: 18)
return label!
}()
var placeNumReviewsLabel: UILabel = {
let label = UILabel.newAutoLayout()
label?.numberOfLines = 1
label?.lineBreakMode = .byClipping
label?.textColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
label?.font = UIFont(name: "Gibson-Regular", size: 12)
return label!
}()
var openNowLabel: UILabel = {
let label = UILabel.newAutoLayout()
label?.numberOfLines = 1
label?.lineBreakMode = .byClipping
label?.textColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
label?.font = UIFont(name: "Gibson-Regular", size: 18)
label?.text = "Open Now"
label?.textAlignment = .right
return label!
}()
// constraints
placeTitleLabel.setContentCompressionResistancePriority(UILayoutPriority.required, for: .vertical)
placeTitleLabel.autoPinEdge(.top, to: .top, of: scrollView, withOffset: edgesInset)
placeTitleLabel.autoPinEdge(.left, to: .left, of: scrollView, withOffset: edgesInset)
placeDistanceLabel.setContentCompressionResistancePriority(UILayoutPriority.required, for: .vertical)
placeDistanceLabel.autoPinEdge(.left, to: .left, of: scrollView, withOffset: edgesInset)
placeDistanceLabel.autoPinEdge(.top, to: .bottom, of: placeTitleLabel, withOffset: edgesInset / 2)
placeNumReviewsLabel.setContentCompressionResistancePriority(UILayoutPriority.required, for: .vertical)
placeNumReviewsLabel.autoPinEdge(.left, to: .right, of: ratingView, withOffset: edgesInset)
placeNumReviewsLabel.autoPinEdge(.top, to: .top, of: ratingView, withOffset: -2)
openNowLabel.setContentCompressionResistancePriority(UILayoutPriority.required, for: .vertical)
openNowLabel.autoPinEdge(.trailing, to: .trailing, of: scrollView, withOffset: edgesInset)
openNowLabel.autoPinEdge(.top, to: .top, of: placeDistanceLabel)
据我在检查员中可以看出,当我突出显示scrollView
嵌入其中的标签时,那里有我容器的全宽,标签本身似乎有一个宽度等,我只是不知道为什么我可以' t 对齐右边缘,左边缘没有问题。
当我检查模拟器时,我在旁边看到这个图标,openNowLabel
但我不确定它的含义或如何获取有关它的信息,这与我的问题有关吗?
这是我上传的 repo 的链接,其中包含运行所需的所有 pod,看看我所看到的原始上下文是否有助于它有意义