Question

我有视图的视图控制器：顶级视图包含容器视图，其中包含两个视图：bottomView，topView，如图所示。

场景

我想在topView中显示：to：date range。在bottomView中我想显示一个UIScrollView，它包含两个我可以滚动的列。我这样做了，但是当我介绍scrollView时，topView和BottomView重叠了。当我滚动时，我可以看到视图分离，一旦我放开滚动条，它们就会重叠。

有人能告诉我如何解决它吗？我似乎并不了解如何关联scrollView和bottomView。代码如下：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    scrollView.frame = view.bounds

    //scrollView.frame = innerView.bounds
    innerView.frame =   CGRect(x:0, y:0, width:scrollView.contentSize.width, height:scrollView.contentSize.height)
}
func buildBottomView () {
    let screenSize = UIScreen.main.bounds
    let screenWidth = screenSize.width
    let ht:Int = 21
    let incrX:Int = 5
    let incrY:Int = 5
    let gapCol1:Int = 5
    let col1Width:Int = 65
    let col2Width:Int = 65
    let startY:Int = 5
    let col1StartX:Int = 10
    let col2StartX:Int = col1StartX + col1Width + gapCol1

    var loadRowStartY: Int = 0
    // column headers
    categoryColumnLabel.text = "Interval"
    categoryColumnLabel.font = UIFont.preferredFont(forTextStyle:UIFontTextStyle.subheadline)
    //categoryColumnLabel.font = UIFont.systemFont(ofSize: 14)
    categoryColumnLabel.frame = CGRect(x: col1StartX, y:startY, width: col1Width, height: ht)
    categoryColumnLabel.textAlignment = NSTextAlignment.left
    categoryColumnLabel.tag = 1
    innerView.addSubview(categoryColumnLabel)

    valueColumnLabel.text = "Values"
    valueColumnLabel.font = UIFont.preferredFont(forTextStyle:UIFontTextStyle.subheadline)
    //valueColumnLabel.font = UIFont.systemFont(ofSize: 14)
    valueColumnLabel.frame = CGRect(x: col2StartX, y:startY, width: col2Width, height: ht)
    valueColumnLabel.textAlignment = NSTextAlignment.center
    valueColumnLabel.tag = 3
    innerView.addSubview(valueColumnLabel)

    let sepLine:UIView = UIView()
    sepLine.frame = CGRect(x: col1StartX, y:startY+ht+incrY, width: Int(screenWidth-20), height: 2)
    sepLine.backgroundColor = UIColor.darkGray
    sepLine.tag = 60

    loadRowStartY = startY+ht+incrX+ht
    innerView.addSubview(sepLine)



    for i in 0 ..< 24 {

        let timeIntervalLabel = UILabel()
        let value2Label = UILabel()

        print("display load profile")

        let loadStruct  = loadDict[String(i)] as! CommercialProfile
        print (loadStruct.timeInterval)

        timeIntervalLabel.text = loadStruct.timeInterval
        timeIntervalLabel.font = UIFont.preferredFont(forTextStyle:UIFontTextStyle.caption1)

        //valueColumnLabel.font = UIFont.systemFont(ofSize: 14)
        timeIntervalLabel.frame = CGRect(x: col1StartX, y:loadRowStartY, width: col1Width, height: Int(timeIntervalLabel.font.lineHeight))
        timeIntervalLabel.textAlignment = NSTextAlignment.center
        innerView.addSubview(timeIntervalLabel)

        print(loadStruct.value)

        value2Label.text = loadStruct.value
        value2Label.font = UIFont.preferredFont(forTextStyle:UIFontTextStyle.caption1)
        //value2Label = UIFont.systemFont(ofSize: 14)
        value2Label.frame = CGRect(x: col2StartX, y:loadRowStartY, width: col2Width, height: Int(value2Label.font.lineHeight))
        value2Label.textAlignment = NSTextAlignment.center
        innerView.addSubview(value2Label)

        loadRowStartY = loadRowStartY + incrY + Int(value2Label.font.lineHeight)

    }

Answer 1

您使用以下代码将scrollView的边界设置为整个视图的大小：scrollView.frame = view.bounds。

scrollView只需滚动底部视图中的内容。滚动视图有自己的内容，通常大于屏幕/视图的可视区域。滚动视图只允许您平移该视图的视口。

因此，添加底部视图并设置约束。将scrollView添加到底部视图，然后将您的内容添加到scrollView。

确保您的底部视图已将clipToBounds设置为true，然后您应该能够将标题保留在原位并滚动内容。

我会尽快为你做一个例子。

编辑：

我刚刚创建了这个简单的示例，它显示了您需要的滚动行为。这适用于游乐场或简单的视图控制器。由于时间原因，我故意不使用自动布局或设置限制，但您会看到解决问题所需的内容

class ViewController: UIViewController {

    var topView: UIView!
    var bottomView: UIView!
    var scrollView: UIScrollView!
    var contentView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let screenSize = UIScreen.main.bounds

        self.topView = UIView(frame: CGRect(x: 0, y: 0, width: screenSize.width, height: 100))
        self.bottomView = UIView(frame: CGRect(x: 0, y: 100, width: screenSize.width, height: screenSize.height - 100))
        self.scrollView = UIScrollView(frame: CGRect(x: 0, y: 100, width: screenSize.width, height: screenSize.height - 100))
        self.contentView = UIView(frame: CGRect(x: 0, y: 0, width: screenSize.width, height: screenSize.height * 3))

        self.view.backgroundColor = .white
        self.view.addSubview(self.topView)
        self.view.addSubview(self.bottomView)
        self.bottomView.addSubview(self.scrollView)
        self.scrollView.addSubview(self.contentView)
        self.bottomView.clipsToBounds = true


        self.scrollView.contentSize = CGSize(width: screenSize.width, height: screenSize.height * 3)
        self.contentView.backgroundColor = .gray
    }
}

以编程方式在Swift中显示UIScrollView

1 个答案: