Невозможно расположить метку к правому краю просмотра, используя PureLayout - PullRequest
Новая
       27

Невозможно расположить метку к правому краю просмотра, используя PureLayout

0 голосов
/ 11 мая 2018

Я нашел отличный учебник, который объяснил хороший, но о том, как использовать 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

Я не понимаю, почему это происходит

UPDATE

Я немного почистил представления и метки, чтобы сделать их более понятными, я смог обойти проблему, которая возникла там, где мне нужно было вставить метки в представления, чтобы библиотека 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 голосов
/ 12 мая 2018

Из примера кода, которым вы поделились, похоже, что вы добавили openNowLabel как подпредставление openNowLabelView, но вы никогда не устанавливали его ограничения.

Если я правильно понимаю, чего вы пытаетесь достичь, вам нужно прикрепить края openNowLabel к его суперпредставлению (в случае openNowLabelView).

UPDATE

Исходя из проекта, которым вы поделились, ваш вид прокрутки выглядит так, что его подпредставления не получают всех необходимых ограничений, поэтому система знает, как рассчитать размер контента. Взгляните на эту статью от Apple ( Техническое примечание TN2154 ):

Используйте ограничения для размещения подпредставлений в представлении прокрутки, будучи убедитесь, что ограничения связаны со всеми четырьмя краями вида прокрутки и не полагайтесь на представление прокрутки, чтобы получить их размер.

Попробуйте добавить эти ограничения и посмотрите, получите ли вы нужный макет: 

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

Примечание: если вы добавите только первое ограничение, ваш макет будет выглядеть так же, но представление прокрутки будет иметь неоднозначный макет, поскольку не сможет рассчитать высоту размера контента.

...