如何在inputAccessoryView中实现滚动View [Swift]

Question

在我的swift应用中，我正在使用inputActivityView，真的很辛苦，我的想法是在这个视图中添加一个滚动视图，有2个子视图，并启用分页.这是我所做的，我认为问题是约束，但我不知道如何解决它。

  lazy var scrollView: UIScrollView = {
        let sv = UIScrollView(frame: self.bounds)
        sv.backgroundColor = .blue
        sv.isPagingEnabled = true
        sv.contentSize = .init(width: 2 * self.frame.width, height: 54)
        return sv
    }()

    override init(frame: CGRect) { // the init of the customInputAccessoryView
        super.init(frame: frame)
        setup()
    }

    override var intrinsicContentSize: CGSize {
        return .zero
    }

    func setup() {
        backgroundColor = .red
        autoresizingMask = .flexibleHeight

        addSubview(scrollView)
        scrollView.fillSuperview()
        scrollView.heightAnchor.constraint(equalToConstant: 54).isActive = true


        firstView = UIView(frame: .init(origin: .zero, size: .init(width: frame.width, height: 54)))
        firstView.frame.origin = .zero
        firstView.backgroundColor = .gray
        firstView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(firstView)

        secondView = UIView(frame: firstView.bounds)
        secondView.frame.origin.x = frame.width
        secondView.backgroundColor = .lightGray
        secondView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(secondView)

        addConstraints()
    }

    private func addConstraints() {
        NSLayoutConstraint.activate([
            firstView.widthAnchor.constraint(equalToConstant: frame.width),
            firstView.heightAnchor.constraint(equalToConstant: 54)
       ])
    }

如何设置子视图的约束条件，因为这样一来，只出现第一个视图，我无法滚动到第二个视图。

Answer 1

是的，你缺少一些约束条件。

首先，不需要将视图实例化为带有 UIView(frame: ...) 如果你是然后设置 .translatesAutoresizingMaskIntoConstraints = false 因为你刚才给它的框架会被忽略。

第二，如果你的约束条件设置正确，就不需要设置滚动视图的 .contentSize

// don't do this
//sv.contentSize = .init(width: 2 * self.frame.width, height: 54)

第三，当配置滚动视图的子视图时，确保你的约束条件定义了Top Leading Bottom Trailing（顶部领先底部落后）。AND 宽度和高度。

下面是你的代码的编辑版本，可以试试。

class MyInputAccessoryView: UIView {

    lazy var scrollView: UIScrollView = {
        let sv = UIScrollView()
        sv.backgroundColor = .blue
        sv.isPagingEnabled = true
        // no need for this
        //sv.contentSize = .init(width: 2 * self.frame.width, height: 54)
        return sv
    }()

    var firstView: UIView!
    var secondView: UIView!

    override init(frame: CGRect) { // the init of the customInputAccessoryView
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override var intrinsicContentSize: CGSize {
        return .zero
    }

    func setup() {
        backgroundColor = .red
        autoresizingMask = .flexibleHeight

        addSubview(scrollView)
        //scrollView.fillSuperview()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
            scrollView.heightAnchor.constraint(equalToConstant: 54),
        ])


        //firstView = UIView(frame: .init(origin: .zero, size: .init(width: frame.width, height: 54)))
        //firstView.frame.origin = .zero
        firstView = UIView()
        firstView.backgroundColor = .gray
        firstView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(firstView)

        //secondView = UIView(frame: firstView.bounds)
        //secondView.frame.origin.x = frame.width
        secondView = UIView()
        secondView.backgroundColor = .lightGray
        secondView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(secondView)

        addConstraints()
    }

    private func addConstraints() {
        NSLayoutConstraint.activate([

            // make both subviews equal width and height to scrollView
            firstView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
            firstView.heightAnchor.constraint(equalTo: scrollView.heightAnchor),
            secondView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
            secondView.heightAnchor.constraint(equalTo: scrollView.heightAnchor),

            // constrain firstView Leading and Top to scrollView contentLayoutGuide Leading and Top
            firstView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            firstView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),

            // constrain secondView Leading to firstView Trailing
            secondView.leadingAnchor.constraint(equalTo: firstView.trailingAnchor),

            // constrain secondView Top / Bottom / Trailing Top to scrollView contentLayoutGuide Top / Bottom / Trailing
            secondView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            secondView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            secondView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),

        ])
    }

}