以编程方式在 UITableViewCell 内创建 UIScrollView - ScrollView 不滚动

Posted 2023-03-12

【中文标题】以编程方式在 UITableViewCell 内创建 UIScrollView - ScrollView 不滚动

【英文标题】：Programmatically creating a UIScrollView inside of a UITableViewCell - ScrollView doesn't scroll

【发布时间】：2018-04-10 15:45:53

【问题描述】：

我试图在UITableView Cell 中创建一个动态生成的UIScrollView。 UIScrollView 是在 ScrollViewClass 中使用 build function 构建的。该类采用一组视图并将它们并排放置，然后返回一个ScrollView，然后可以将其添加到cell's subviews。 ScrollView 已添加且可见，但是 ScrollView 不会按预期水平滚动。所有的代码都可以在下面找到。

ScrollViewClass

import Foundation
import UIKit

class ScrollViewClass 
    let ArrayOfViews: [UIView]
    let scrollView = UIScrollView()

    init(ArrayOfViews: [UIView]) 
        self.ArrayOfViews = ArrayOfViews
    

    func build() -> UIScrollView 
        scrollView.isScrollEnabled =  true
        scrollView.frame.size.width = UIScreen.main.bounds.width
        scrollView.frame.size.height = UIScreen.main.bounds.height
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.isPagingEnabled = true
        scrollView.contentSize = CGSize(width: 2000, height: 500)
        scrollView.showsHorizontalScrollIndicator = true

        for (index, views) in ArrayOfViews.enumerated() 
            scrollView.addSubview(views)
            views.frame.origin.x = CGFloat(index) * UIScreen.main.bounds.width / 2
            print(index)
        

        return scrollView
    

TableView CellForRowAt

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        let cell: UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: "CellID")
        cell.selectionStyle = UITableViewCellSelectionStyle.none;

        let view1 = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 500))
        let view2 = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 500))
        let view3 = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 500))

        view1.backgroundColor = UIColor.blue
        view2.backgroundColor = UIColor.green
        view3.backgroundColor = UIColor.red

        let ArrayOfViews = [view1, view2, view3]
        let scrollView = ScrollViewClass(ArrayOfViews: ArrayOfViews)
        cell.addSubview(scrollView.build())

        return cell
    

【问题讨论】：

你正在设置scrollView.translatesAutoresizingMaskIntoConstraints = false，但你没有给它任何限制。试试scrollView.backgroundColor = .red，我猜你不会看到任何红色 - 但你可以看到它的子视图，因为.clipsToBounds 没有设置为true。

@DonMag 我会解决这个问题的！但是，这仍然不能解决滚动问题

附带说明，如果您每次调用 cellForRowAt 时都添加一个滚动视图，您将多次添加它（重复使用单元格）。

您是否检查过它是否解决了滚动问题？

@DonMag 抱歉，我该怎么做呢，我对 xcode 还很陌生。但这确实是有道理的，好像视图只是由于剪辑而被禁用，然后触摸检测不存在

【参考方案1】：

你应该使用带有水平轴的 UIStackView，这样滚动视图才能正确获取 contentSize。

ScrollViewClass

import Foundation
import UIKit

class ScrollViewClass 
    let ArrayOfViews: [UIView]
    let scrollView = UIScrollView()

    init(ArrayOfViews: [UIView]) 
        self.ArrayOfViews = ArrayOfViews
    

    func build() -> UIScrollView 
        scrollView.isScrollEnabled =  true
        scrollView.frame.size.width = UIScreen.main.bounds.width
        scrollView.frame.size.height = UIScreen.main.bounds.height
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.isPagingEnabled = true
        scrollView.contentSize = CGSize(width: 2000, height: 500)
        scrollView.showsHorizontalScrollIndicator = true
        let stackView:UIStackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.alignment = .fill
        stackView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        for (index, views) in ArrayOfViews.enumerated() 
            stackView.addArrangedSubview(views)
            print(index)
        
        scrollView.addSubview(stackView)  
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0).isActive = true 
        stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0).isActive = true
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0).isActive = true
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0).isActive = true  
        return scrollView
    

您还应该对cellForRowAt: 中的scrollView 进行约束

    let scrollView = ScrollViewClass(ArrayOfViews: ArrayOfViews)
    cell.addSubview(scrollView.build())
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.leadingAnchor.constraint(equalTo: cell.leadingAnchor, constant: 0).isActive = true 
    scrollView.trailingAnchor.constraint(equalTo: cell.trailingAnchor, constant: 0).isActive = true
    scrollView.topAnchor.constraint(equalTo: cell.topAnchor, constant: 0).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: 0).isActive = true  

【讨论】：

运行您的编码时，它通过间距错误。它也不显示表格中的视图。

请立即尝试。

错误消失了，视图仍然没有显示

现在再试一次。

遗憾的是仍然没有显示，我在 for 循环中打印了视图以检查它们是否正在被拉出，所以与 stactview 有关