0

给定视图层次结构:

- View `container`
    - UIScrollView `scrollView`
        - UIView `content`
    - UIView `footer`

我希望UIScrollView.contentInset.bottom等于footer.bounds.height

问题:这可以使用自动布局来表达吗?

现在,我知道有一种非常明显的蛮力方法,并且有效:

  1. 观察bounds属性的变化footer
  2. scrollView.contentInset.bottom = -footer.bounds.height一旦footer的父母已经完成layoutSubviews()

或者,我可以在content.bottom和之间有一个约束scrollView.bottom(我敢肯定,你知道,它表示非模棱两可的大小内容的底部内容插入),并且每次footer边界改变时都会改变它的常量。

但关键是所有这些方法都非常流行,真的让我对它们产生的糟糕代码感到不舒服,所以我想知道:

这可以使用自动布局来表达吗?

我试图做以下事情:

content.bottomAnchor.constraint(equalTo: footer.topAnchor)

希望这content.bottomAnchor将被视为滚动视图内容的底部插图,但不-自动布局实际上将其视为我将内容的底部限制到页脚的顶部。

4

1 回答 1

1

好的 - 一种方法...

从 iOS 11 开始(我假设您不需要更早的定位), a 的子视图UIScrollView可以限制为滚动视图的Frame Layout Guide. 这使得将非滚动 UI 元素添加到滚动视图层次结构变得很容易。

基于此层次结构:

- view
    - scrollView
        - contentView
            - element1
            - element2
            - element3
            - UILayoutGuide
        - footerView

我们要做的是:

  • 将所有“可滚动”元素添加到 contentView
  • 加上UILayoutGuide将作为或“底部”可滚动元素的 contentView添加
  • 最后将 footerView 添加到 scrollView,使其位于 z-order 的顶部
  • 将footerView 约束到scrollView,Frame Layout Guide使其保持原样
  • 约束我们的heightAnchorUILayoutGuide等于footerView的heightAnchor

因为 aUILayoutGuide是一个非渲染视图,所以它是不可见的,但它会创建从我们最后一个可视元素底部到 contentView 底部的空间——如果/当 footerView 改变高度时,它会自动改变高度。

这是一个完整的例子——scrollView / contentView / 3 imageViews / layout guide / translucent footerView:

class ExampleViewController: UIViewController {

    let scrollView: UIScrollView = {
        let v = UIScrollView()
        v.backgroundColor = .lightGray
        return v
    }()

    let contentView: UIView = {
        let v = UIView()
        v.backgroundColor = .cyan
        return v
    }()

    let footerView: UILabel = {
        let v = UILabel()
        v.textAlignment = .center
        v.textColor = .white
        v.font = UIFont.systemFont(ofSize: 24.0, weight: .bold)
        v.text = "Footer View"
        v.backgroundColor = UIColor.black.withAlphaComponent(0.65)
        return v
    }()

    var imgView1: UIImageView = {
        let v = UIImageView()
        v.backgroundColor = .red
        v.image = UIImage(systemName: "1.circle")
        v.tintColor = .white
        return v
    }()

    var imgView2: UIImageView = {
        let v = UIImageView()
        v.backgroundColor = .green
        v.image = UIImage(systemName: "2.circle")
        v.tintColor = .white
        return v
    }()

    var imgView3: UIImageView = {
        let v = UIImageView()
        v.backgroundColor = .blue
        v.image = UIImage(systemName: "3.circle")
        v.tintColor = .white
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // add 3 image views as the content we want to see
        contentView.addSubview(imgView1)
        contentView.addSubview(imgView2)
        contentView.addSubview(imgView3)

        // add contentView to srollView
        scrollView.addSubview(contentView)

        // add footer view to scrollView last so it's at the top of the z-order
        scrollView.addSubview(footerView)

        view.addSubview(scrollView)

        [scrollView, contentView, footerView, imgView1, imgView2, imgView3].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        // "spacer" for bottom of scroll content
        //  we'll constrain it to the height of the footer view
        let spacerGuide = UILayoutGuide()
        contentView.addLayoutGuide(spacerGuide)

        let g = view.safeAreaLayoutGuide
        let svCLG = scrollView.contentLayoutGuide
        let scFLG = scrollView.frameLayoutGuide

        NSLayoutConstraint.activate([

            // constrain scrollView view 40-pts on all 4 sides to view (safe-area)
            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
            scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -40.0),

            // contentView view 0-pts top / leading / trailing / bottom to scrollView contentLayoutGuide
            contentView.topAnchor.constraint(equalTo: svCLG.topAnchor, constant: 0.0),
            contentView.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor, constant: 0.0),
            contentView.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor, constant: 0.0),
            contentView.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor, constant: 0.0),

            // contentView width == scrollView frameLayoutGuide width
            contentView.widthAnchor.constraint(equalTo: scFLG.widthAnchor, constant: 0.0),


            // imgView1 to top of contentView
            imgView1.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0.0),

            // imgView1 width / height
            imgView1.widthAnchor.constraint(equalToConstant: 240.0),
            imgView1.heightAnchor.constraint(equalToConstant: 240.0),

            // imgView1 centerX to contentView centerX
            imgView1.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),


            // imgView2 top to bottom of imgView1 + 20-pt spacing
            imgView2.topAnchor.constraint(equalTo: imgView1.bottomAnchor, constant: 20.0),

            // imgView2 width / height
            imgView2.widthAnchor.constraint(equalToConstant: 200.0),
            imgView2.heightAnchor.constraint(equalToConstant: 280.0),

            // imgView2 centerX to contentView centerX
            imgView2.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),


            // imgView3 top to bottom of imgView2 + 20-pt spacing
            imgView3.topAnchor.constraint(equalTo: imgView2.bottomAnchor, constant: 20.0),

            // imgView3 width / height
            imgView3.widthAnchor.constraint(equalToConstant: 280.0),
            imgView3.heightAnchor.constraint(equalToConstant: 320.0),

            // imgView3 centerX to contentView centerX
            imgView3.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),


            // spacerGuide top to bottom of actual content
            // spacerGuide top to imgView3 bottom
            spacerGuide.topAnchor.constraint(equalTo: imgView3.bottomAnchor, constant: 0.0),

            // spacerGuide to leading / trailing / bottom of contentView
            spacerGuide.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 0.0),
            spacerGuide.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0.0),
            spacerGuide.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0.0),

            // footerView to leading / trailing / bottom of scrollView frameLayoutGuide
            //  (constrained to frameLayoutGuide so it won't scroll)
            footerView.leadingAnchor.constraint(equalTo: scFLG.leadingAnchor, constant: 0.0),
            footerView.trailingAnchor.constraint(equalTo: scFLG.trailingAnchor, constant: 0.0),
            footerView.bottomAnchor.constraint(equalTo: scFLG.bottomAnchor, constant: 0.0),

            // footerView height == scrollView height with 0.25 multiplier
            //  (so it will change height when scrollView changes height, such as device rotation)
            footerView.heightAnchor.constraint(equalTo: scFLG.heightAnchor, multiplier: 0.25),

            // finally, spacerGuide height equal to footerView height
            spacerGuide.heightAnchor.constraint(equalTo: footerView.heightAnchor),

        ])

    }
}

结果:

在此处输入图像描述

滚动到底部:

在此处输入图像描述

并旋转(所以我们看到 footerView 高度变化)一直滚动到底部:

在此处输入图像描述


编辑

具体问题的答案是:你不能。

滚动视图contentInset不是可以添加约束的对象......它是滚动视图的属性。就像您不能将滚动视图约束.backgroundColor到自动布局约束一样。

于 2020-06-05T13:55:20.977 回答