Не удается создать UIScrollerView с чисто автоматическими ограничениями макета

Я сократил свой код, чтобы его было легко понять.

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

Вы можете вызвать мой инструмент функции (представлен ниже) следующим образом:

// Create scroll view
let strip = addStripCategoryTo(view)

// Attach it to the view, vertically and horizontally
strip.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true
strip.leftAnchor.constraintEqualToAnchor(view.leftAnchor).active = true


// The function
func addStripCategoryTo(parent: UIView) -> UIView {

    let h:CGFloat = 128
    let w = 2*h/3
    let n = 5
    let width  = w * CGFloat(n)
    let height = h

    // Scroll view
    let scrollview = UIScrollView()
    parent.addSubview(scrollview)

    scrollview.scrollEnabled = true
    scrollview.translatesAutoresizingMaskIntoConstraints = false
    scrollview.widthAnchor .constraintEqualToAnchor(parent.widthAnchor).active = true
    scrollview.heightAnchor.constraintEqualToConstant(h).active = true

    scrollview.layer.borderWidth = 2
    scrollview.layer.borderColor = UIColor.greenColor().CGColor
    scrollview.backgroundColor = UIColor.brownColor()

    // Scroll view content
    let contentView = UIView() //frame:CGRect(origin: CGPointZero, size:CGSize(width: width, height: height)))
    scrollview.addSubview(contentView)
    contentView.backgroundColor = UIColor.redColor()
    contentView.layer.borderWidth = 10
    contentView.layer.borderColor = UIColor.blueColor().CGColor
    contentView.translatesAutoresizingMaskIntoConstraints = false
    contentView.centerYAnchor.constraintEqualToAnchor(scrollview.centerYAnchor).active = true
    contentView.widthAnchor .constraintEqualToConstant(width).active = true
    contentView.heightAnchor.constraintEqualToConstant(height).active = true

    return scrollview
}

К сожалению, я не могу прокрутить его по горизонтали, см. Скриншот следующим образом:

Что мне не хватает?

Источник

3 ответа

Решение

Вот решение моей проблемы. Я предоставил функцию инструмента, которая решает проблему следующим образом:

func setScrollViewConstraints(scrollView: UIScrollView, contentView:UIView, multiplier m:(width:CGFloat, height:CGFloat)=(1, 1)) {

    guard let scrollViewParent = scrollView.superview else {
        assert(false, "setScrollViewConstraints() requires the scrollview to have a superview")
        return
    }

    guard let contentViewParent = contentView.superview else {
        assert(false, "setScrollViewConstraints() requires the contentView to have a superview")
        return
    }

    guard contentViewParent == scrollView else {
        assert(false, "setScrollViewConstraints() requires the contentView to have a superview being the scrollView")
        return
    }

    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.widthAnchor  .constraintEqualToAnchor(scrollViewParent.widthAnchor,  multiplier: m.width ).active = true
    scrollView.heightAnchor .constraintEqualToAnchor(scrollViewParent.heightAnchor, multiplier: m.height).active = true


    contentView.translatesAutoresizingMaskIntoConstraints = false
    contentView.leftAnchor  .constraintEqualToAnchor(contentViewParent.leftAnchor      ).active = true
    contentView.rightAnchor .constraintEqualToAnchor(contentViewParent.rightAnchor     ).active = true
    contentView.topAnchor   .constraintEqualToAnchor(contentViewParent.topAnchor       ).active = true
    contentView.bottomAnchor.constraintEqualToAnchor(contentViewParent.bottomAnchor    ).active = true

   /*

 // Pre-iOS 9 version

 let views = [
 "scrollView":scrollview,
 "contentView":contentView
 ]

 parent.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options:[], metrics: [:], views:views))
 parent.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options:[], metrics: [:], views:views))

 scrollview.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[contentView]|", options:[], metrics: [:], views:views))
 scrollview.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[contentView]|", options:[], metrics: [:], views:views))
 */

}

Используйте его таким образом, чтобы иметь вид прокрутки шириной 100%, супер вид и 1/4 его высоты:

func addStripCategoryTo(parent: UIView) -> UIView {

    // Scroll view
    let scrollview = UIScrollView()
    parent.addSubview(scrollview)

    scrollview.backgroundColor    = UIColor.brownColor()
    scrollview.layer.borderWidth  = 2
    scrollview.layer.borderColor  = UIColor.greenColor().CGColor

    // Scroll view content
    let contentView = UIImageView()
    contentView.image = UIImage(named: "cover-0.jpeg")
    scrollview.addSubview(contentView)

    contentView.backgroundColor   = UIColor.redColor()
    contentView.layer.borderWidth = 10
    contentView.layer.borderColor = UIColor.blueColor().CGColor

    // Apply constraints
    setScrollViewConstraints(scrollview, contentView:contentView, multiplier: (1, 0.25))

    return scrollview
}
Источник

Собираюсь попробовать и ответить на это, посмотреть, поможет ли это.

РЕДАКТИРОВАТЬ Ответ на вопрос лучше, старый ответ удален:

Добавление этих двух строк должно привести к горизонтальной прокрутке:contentView.leadingAnchor.constraintEqualToAnchor(scrollview.leadingAnchor).active = true contentView.trailingAnchor.constraintEqualToAnchor(scrollview.trailingAnchor).active = true

Проблема состоит в том, что без этих двух ограничений scrollView не знает свой contentSize, поэтому не прокручивает, даже если вы дали contentView определенную ширину. Вам нужно сообщить scrollView, где начинается и заканчивается этот contentView, и эти два ограничения помогут scrollView узнать, насколько велика ширина contentView. В противном случае contentSize объекта scrollView будет оставаться на том же уровне, что и ширина устройства, а contentView просто будет отображаться вне экрана, поскольку его ширина больше, чем у экрана устройства.

Надеюсь, это помогло лучше.

Полный код функции

    func addStripCategoryTo(parent: UIView)-> UIView {

    let h:CGFloat = 128
    let w = 2*h/3
    let n = 5
    let width  = w * CGFloat(n)
    let height = h

    // Scroll view
    let scrollview = UIScrollView()
    parent.addSubview(scrollview)

    scrollview.scrollEnabled = true
    scrollview.translatesAutoresizingMaskIntoConstraints = false
    scrollview.leadingAnchor.constraintEqualToAnchor(parent.leadingAnchor).active = true
    scrollview.trailingAnchor.constraintEqualToAnchor(parent.trailingAnchor).active = true
    scrollview.widthAnchor .constraintEqualToAnchor(parent.widthAnchor).active = true
    scrollview.heightAnchor.constraintEqualToConstant(h).active = true

    scrollview.layer.borderWidth = 2
    scrollview.layer.borderColor = UIColor.greenColor().CGColor
    scrollview.backgroundColor = UIColor.brownColor()

    // Scroll view content
    let contentView = UIView() //frame:CGRect(origin: CGPointZero, size:CGSize(width: width, height: height)))
    scrollview.addSubview(contentView)
    contentView.backgroundColor = UIColor.redColor()
    contentView.layer.borderWidth = 10
    contentView.layer.borderColor = UIColor.blueColor().CGColor
    contentView.translatesAutoresizingMaskIntoConstraints = false
    contentView.centerYAnchor.constraintEqualToAnchor(scrollview.centerYAnchor).active = true
    contentView.leadingAnchor.constraintEqualToAnchor(scrollview.leadingAnchor).active = true
    contentView.trailingAnchor.constraintEqualToAnchor(scrollview.trailingAnchor).active = true
    contentView.widthAnchor.constraintEqualToConstant(width).active = true
    contentView.heightAnchor.constraintEqualToConstant(height).active = true

    return scrollview
}
Источник

Ваши ограничения должны быть такими,

Scrollview - верхний, нижний, ведущий, трейлинг

ContentView - верхняя, нижняя, ведущая, конечная, фиксированная ширина, вертикально в центре контейнера (центр y)

и ширина вашего контента должна быть больше ширины экрана, тогда вы также можете прокрутить горизонтально. Надеюсь, это поможет:)

Источник
Другие вопросы по тегам