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

Posted 2023-03-15

【中文标题】如何在 inputAccessoryView [Swift] 中实现滚动视图

【英文标题】：How to implement a scrollView inside inputAccessoryView [Swift]

【发布时间】：2020-04-27 14:48:47

【问题描述】：

在我的 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)
       ])
    

如何设置子视图的约束，因为这样只会出现第一个视图，不能滚动到第二个。

【参考方案1】：

是的，您缺少一些约束。

首先，如果您要设置.translatesAutoresizingMaskIntoConstraints = false，则无需使用UIView(frame: ...) 实例化视图，因为您刚刚提供的框架将被忽略。

其次，如果您的约束设置正确，则无需设置滚动视图的.contentSize

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

第三，在配置滚动视图的子视图时，确保您的约束定义了顶部/前导/底部/尾随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),

        ])
    

【讨论】：

非常感谢，但不幸的是它不起作用，这是我尝试过的模板：drive.google.com/file/d/1hZJFI2D6qKnsO2MYyyIhwdOKwHwof7gv/view如果你有时间你真的帮助我

@PaulRock - 如果你仔细查看你的代码，你会发现两个错别字......在 addConstraints() 中有两行以 scrollView. 开头，应该以 secondView. 开头——如果你从我的答案中复制/粘贴确切的 addConstraints() 代码，它可以按需要工作。

非常感谢，有没有可以学习的手册？

@PaulRock - 好吧，“手册”几乎就是“互联网”。从Apple's docs 开始，然后去谷歌（或你最喜欢的搜索引擎）搜索swift auto-layout tutorial——然后阅读、实验、阅读、实验、阅读、实验、阅读、实验……

非常感谢 DonMag，很高兴与您交谈。