无法使用PureLayout

时间:2018-05-11 18:25:36

标签: ios swift autolayout pure-layout

我发现了一个很好的教程,解释了一个很好的但是如何使用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()

这是我看起来像这样的结果......

enter image description here

我不明白为什么会发生这种情况

更新

我已经清理了一些视图和标签,试图让它更清晰,我能够解决我遇到的问题,我需要在视图中嵌入标签以制作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标签嵌入其中时,我的容器的宽度就在那里,标签本身似乎有宽度等等,我我只是不确定为什么我不能对齐右边缘,左边缘没有问题。

当我检查模拟器时,我在openNowLabel旁边看到了这个图标,但我不确定它的含义或我如何获取有关它的信息,这是否与我的问题有关?

enter image description here

这是我上传的回购链接的链接,其中包含了运行所需的所有窗格,如果原始上下文有助于理解我看到的内容

https://github.com/Jordan4jc/place-app-test

1 个答案:

答案 0 :(得分:0)

在您分享的代码示例中,您似乎已将openNowLabel添加为openNowLabelView的子视图,但您从未设置其约束。

如果我正确理解您要实现的目标,则需要将openNowLabel的边缘固定在其超级视图上(在openNowLabelView的情况下)。

<强>更新

根据您共享的项目,看起来您的滚动视图及其子视图未获得所有必需的约束,因此系统知道如何计算内容大小。看一下Apple的这篇文章(Technical Note TN2154):

  

使用约束在滚动视图中布置子视图   确保约束绑定到滚动视图的所有四个边缘   不要依赖滚动视图来获取它们的大小。

尝试添加这些约束,看看你是否得到了你想要的布局:

openNowLabel.autoPinEdge(.left, to: .right, of: placeDistanceLabel, withOffset: edgesInset)
ratingView.autoPinEdge(.bottom, to: .bottom, of: scrollView, withOffset: edgesInset)

注意:如果您只添加第一个约束,则您的布局看起来会相同,但滚动视图的布局会模糊不清,因为它无法计算内容大小的高度。