ios - UIScrollView 内容布局不正确-6ren

ios - UIScrollView 内容布局不正确

转载作者：行者123 更新时间：2023-11-28 23:20:58

我花了两天时间试图让它工作，但没有成功。我花了很多时间在这里和谷歌上进行研究，虽然有一些关于将 UIImageViews 添加到 UIScrollViews 的信息，但似乎没有太多关于 UITextFields 和 UILabels 等其他内容的信息。

引用下面的代码，我有几个问题:

myScrollView 中的 contentView:即使 contentView 具有 backgroundColor、约束等，contentView 似乎没有正确显示，但添加到它的 subview 确实显示了(见附件截图)。
尽管设置了约束，但添加到 scrollView 的 contentView 中的 UITextFields 布局不正确。从屏幕截图中可以看出，位于具有类似约束的那些 View 之外的文本字段确实得到了正确的布局 - 例如橙色文本字段。
垂直滚动无法显示(在本例中，thirdTextField，即蓝绿色文本字段)未显示且无法滚动到它。奇怪的是，如果我在 secondTextField 中键入内容，即红色文本字段，它将扩大大小并继续增长并最终自动激活 UIScrollView 的水平滚动。另外，不要将其理解为它嵌入到 containerView 中，该 View 具有似乎被忽略的约束。

对于 101 类型的问题，我们将不胜感激并提前致歉。

以下所有内容均以编程方式完成，而不是通过 Storyboard完成。

import UIKit

class ViewController: UIViewController {

    lazy var myScrollView: UIScrollView = {
        let view =  UIScrollView(frame: .zero)
        view.backgroundColor = .lightGray
        return view
    }()

    lazy var contentView: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        return view
    }()

    var firstTextField = UITextField()
    var secondtextField = UITextField()
    var thirdTextField = UITextField()
    var fourthTextField = UITextField()

    var firstLabel = UILabel()
    var secondLabel = UILabel()

    var aButton = UIButton()

    var keyboardToolBar = UIToolbar()


    override func viewDidLoad() {
        super.viewDidLoad()

        // Add first label
        view.addSubview(firstLabel)
        firstLabel.backgroundColor = .yellow
        firstLabel.text = "Yellow Label"

        // Layout first label
        firstLabel.translatesAutoresizingMaskIntoConstraints = false
        firstLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        firstLabel.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
        firstLabel.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true

        // Add first textfield
        view.addSubview(firstTextField)
        firstTextField.backgroundColor = .orange
        firstTextField.placeholder = "Orange TextField"

        // Layout first text field
        firstTextField.translatesAutoresizingMaskIntoConstraints = false
        firstTextField.topAnchor.constraint(equalTo: view.topAnchor, constant: 150).isActive = true
        firstTextField.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
        firstTextField.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true
        firstTextField.inputAccessoryView = keyboardToolBar

        // Add scrollView
        view.addSubview(myScrollView)

        // Layout scrollview
        myScrollView.translatesAutoresizingMaskIntoConstraints = false
        myScrollView.topAnchor.constraint(equalTo: firstTextField.bottomAnchor, constant: 20).isActive = true
        myScrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20.0).isActive = true
        myScrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20.0).isActive = true
        myScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -200.0).isActive = true

        // Add ContentView inside scrollview
        myScrollView.addSubview(contentView)

        // layout contentview
        contentView.translatesAutoresizingMaskIntoConstraints = false
        contentView.topAnchor.constraint(equalTo: myScrollView.topAnchor, constant: 20.0).isActive = true
        contentView.leftAnchor.constraint(equalTo: myScrollView.leftAnchor, constant: 20.0).isActive = true
        contentView.rightAnchor.constraint(equalTo: myScrollView.rightAnchor, constant: -20.0).isActive = true
        contentView.bottomAnchor.constraint(equalTo: myScrollView.bottomAnchor, constant: -20.0).isActive = true

        // Add secondTextfield - inside contentview
        contentView.addSubview(secondtextField)
        secondtextField.backgroundColor = .red
        secondtextField.placeholder = "Red TextField"
        secondtextField.inputAccessoryView = keyboardToolBar

        // Layout secondtextField - inside contentview
        secondtextField.translatesAutoresizingMaskIntoConstraints = false
        secondtextField.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 100).isActive = true
        secondtextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20).isActive = true
        secondtextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20).isActive = true

        // Add thirdtextfield - inside contentview
        contentView.addSubview(thirdTextField)
        thirdTextField.backgroundColor = .brown
        thirdTextField.placeholder = "Brown TextField"
        thirdTextField.inputAccessoryView = keyboardToolBar

        // Layout thirdtextField - inside contentview
        thirdTextField.translatesAutoresizingMaskIntoConstraints = false
            // Placed 500 below secondtextfield to use through vertical scrolling
        thirdTextField.topAnchor.constraint(equalTo: secondtextField.topAnchor, constant: 500).isActive = true
        thirdTextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20).isActive = true
        thirdTextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20).isActive = true

        // elements outside of scrollview
        // add fourthtextField
        view.addSubview(fourthTextField)
        fourthTextField.backgroundColor = .systemTeal
        fourthTextField.placeholder = "Teal Textfield"
        fourthTextField.inputAccessoryView = keyboardToolBar

        // layout fourthtextField - over the top of the scrollview (for testing/modelling purposes)
        fourthTextField.translatesAutoresizingMaskIntoConstraints = false
        fourthTextField.topAnchor.constraint(equalTo: firstTextField.bottomAnchor, constant: 300).isActive = true
        fourthTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
        fourthTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true

        // Add second label
        view.addSubview(secondLabel)
        secondLabel.backgroundColor = .green
        secondLabel.text = "Green Label"

        // Layout of second label
        secondLabel.translatesAutoresizingMaskIntoConstraints = false
        secondLabel.topAnchor.constraint(equalTo: view.bottomAnchor, constant: -150).isActive = true
        secondLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
        secondLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true

        // Add button
        view.addSubview(aButton)
        aButton.backgroundColor = .systemBlue
        aButton.setTitle("A Button", for: .normal)

        // Layout button
        aButton.translatesAutoresizingMaskIntoConstraints = false
        aButton.topAnchor.constraint(equalTo: view.bottomAnchor, constant: -100).isActive = true
        aButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
        aButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true

        // Add Target to BUtton
        aButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

    }

}

最佳答案

Shurtugal 的回答部分正确——您需要在 thirdTextField 上添加一个 bottomAnchor 来给 contentView 一些高度:

thirdTextField.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true

有关其他讨论，请参阅对该答案的评论。

但是，我添加这个答案作为提示。如果您将约束逻辑地组合在一起，您可能会发现使用约束和自动布局要容易得多，如下面编辑过的代码所示:

class ViewController: UIViewController {

    lazy var myScrollView: UIScrollView = {
        let view =  UIScrollView(frame: .zero)
        view.backgroundColor = .lightGray
        return view
    }()

    lazy var contentView: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        return view
    }()

    var firstTextField = UITextField()
    var secondtextField = UITextField()
    var thirdTextField = UITextField()
    var fourthTextField = UITextField()

    var firstLabel = UILabel()
    var secondLabel = UILabel()

    var aButton = UIButton()

    var keyboardToolBar = UIToolbar()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Add first label
        view.addSubview(firstLabel)
        firstLabel.backgroundColor = .yellow
        firstLabel.text = "Yellow Label"

        // Add first textfield
        view.addSubview(firstTextField)
        firstTextField.backgroundColor = .orange
        firstTextField.placeholder = "Orange TextField"

        firstTextField.inputAccessoryView = keyboardToolBar

        // Add scrollView
        view.addSubview(myScrollView)

        // Add ContentView inside scrollview
        myScrollView.addSubview(contentView)

        // Add secondTextfield - inside contentview
        contentView.addSubview(secondtextField)
        secondtextField.backgroundColor = .red
        secondtextField.placeholder = "Red TextField"
        secondtextField.inputAccessoryView = keyboardToolBar

        // Add thirdtextfield - inside contentview
        contentView.addSubview(thirdTextField)
        thirdTextField.backgroundColor = .brown
        thirdTextField.placeholder = "Brown TextField"
        thirdTextField.inputAccessoryView = keyboardToolBar

        // elements outside of scrollview
        // add fourthtextField
        view.addSubview(fourthTextField)
        fourthTextField.backgroundColor = .systemTeal
        fourthTextField.placeholder = "Teal Textfield"
        fourthTextField.inputAccessoryView = keyboardToolBar

        // Add second label
        view.addSubview(secondLabel)
        secondLabel.backgroundColor = .green
        secondLabel.text = "Green Label"

        // Add button
        view.addSubview(aButton)
        aButton.backgroundColor = .systemBlue
        aButton.setTitle("A Button", for: .normal)

        [firstLabel, firstTextField, myScrollView, contentView, secondtextField, thirdTextField, fourthTextField, secondLabel, aButton].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        NSLayoutConstraint.activate([

            // firstLabel 100-pts from top, 20-pts on each side
            firstLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
            firstLabel.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20),
            firstLabel.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20),

            // firstTextField 150-pts from top, 20-pts on each side
            firstTextField.topAnchor.constraint(equalTo: view.topAnchor, constant: 150),
            firstTextField.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20),
            firstTextField.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20),

            // myScrollView 20-pts from bottom of firstTextField
            // 20-pts on each side
            // 200-pts from bottom of view
            myScrollView.topAnchor.constraint(equalTo: firstTextField.bottomAnchor, constant: 20),
            myScrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20.0),
            myScrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20.0),
            myScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -200.0),

            // contentView (subview of myScrollView) 20-pts on each side
            // this will automatically define the scrollView's .contentSize
            // however, it does NOT control the SIZE of contentView
            contentView.topAnchor.constraint(equalTo: myScrollView.topAnchor, constant: 20.0),
            contentView.leftAnchor.constraint(equalTo: myScrollView.leftAnchor, constant: 20.0),
            contentView.rightAnchor.constraint(equalTo: myScrollView.rightAnchor, constant: -20.0),
            contentView.bottomAnchor.constraint(equalTo: myScrollView.bottomAnchor, constant: -20.0),

            // secondtextField (subview of contenView) 100-pts from top, 20-pts on each side
            secondtextField.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 100),
            secondtextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            secondtextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),

            // secondtextField (subview of contenView) 500-pts from top of secondtextField (should probably be from bottom of secondTextField)
            // 20-pts on each side
            // (end up being placed 500 below secondtextfield to use through vertical scrolling)
            thirdTextField.topAnchor.constraint(equalTo: secondtextField.topAnchor, constant: 500),
            thirdTextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            thirdTextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),

            // constraints which define the SIZE of contentView...

            // if we want contentView to fit the width of myScrollView (with 20-pts "padding" on each side)
            contentView.widthAnchor.constraint(equalTo: myScrollView.widthAnchor, constant: -40),
            // thirdTextField bottom 20-pts from contentView bottom (this will define contentView's height)
            thirdTextField.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20),

            // fourthTextField 300-pts from bottom of firstTextField, 10-pts on each side
            fourthTextField.topAnchor.constraint(equalTo: firstTextField.bottomAnchor, constant: 300),
            fourthTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
            fourthTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10),

            // secondLabel 150-pts from bottom of view, 20-pts on each side
            secondLabel.topAnchor.constraint(equalTo: view.bottomAnchor, constant: -150),
            secondLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            secondLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

            // aButton 100-pts from bottom of view, 20-pts on each side
            aButton.topAnchor.constraint(equalTo: view.bottomAnchor, constant: -100),
            aButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            aButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

        ])

        // Add Target to BUtton
        aButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

    }

    @objc func buttonTapped() -> Void {
        print("button tapped")
    }

}

结果:

滚动后:

关于ios - UIScrollView 内容布局不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59679316/

文章推荐： java - 由于 web.xml，JSP 文件未使用 CSS

文章推荐： mysql - Sailsjs MVC 将参数从外部 API 映射到多个模型

文章推荐： java - 在 hibernate 中加载相关对象

文章推荐： mysql - 替换配置单元列中的特殊字符

iphone - UIScrollView 里面的 UIScrollView 里面的 UIScrollView
抱歉这个奇怪的标题，但是，这正是我所需要的。我知道这是可以做到的，因为我见过其他应用程序这样做。基本上，我的应用程序有一个启用分页的大 ScrollView ，其中包含一些嵌套的 ScrollVie
iphone - 如何将 UIScrollView 嵌套在 UIScrollView 中，以便用户可以滚动内部 UIScrollView？
我还没有尝试过，但我假设一旦我知道用户想要在子 ScrollView 中滚动，我就必须禁用父 ScrollView 的滚动，对吗？两个 ScrollView 都是水平滚动的。如何暂时禁用父级的滚动
uiscrollview - 如何从标准的 UIScrollView 获取捏合手势坐标？
我需要实现这个方法: - (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center { 但我不知道如何获得我需要的中心坐标。通常
uiscrollview - UIAccelerometer 和 UIScrollView
我想根据 UIAccelerometer 值滚动 ScrollView 。实现这一目标的最佳方法是什么？最初，我根据获得的加速度计值将内容偏移设置为一个值。然后在每个 scrollViewDidEn
uiscrollview - 将 UIScrollView 的底部淡化为透明
我有一个 UIScrollView，我需要底部淡入透明，这样它就不会突然切断内容。 UIScrollView 的背景是自定义颜色。这是我到目前为止所拥有的，但图层显示为白色，而不是自定义颜色。这就是我
iphone - UIScrollView 中的 UIScrollView
我有一个 UIScrollviews 彼此存在的层次结构。如何将特定区域的滑动事件重定向到内部 ScrollView ？最佳答案如果您将 UIScrollViews 设置为只能在一个轴或另一轴上
uiscrollview - 更改 UIScrollView 滚动速度
在我的应用程序中，我有一个扩展 UIScrollView 并在用户滚动时填充其内容的 View 。但是，如果用户滚动太快，则 UIScrollView 内填充的 View 不会及时创建，您实际上可以看
uiscrollview - 如何判断 UIScrollView 内容是否溢出
我有一个包含内容的 UIScroll View 。如果该内容溢出，使 ScrollView 可滚动，我想将 View 的底部设置为某种颜色。如果没有，我想将其设置为不同的颜色。我的问题是，我不知道如
ios - UIScrollView 嵌入其他 UIScrollView
我有一个 ScrollView ，其中包含一个 UIImageView，以及一个额外的 UIScrollView 和 UIImageView。我想要实现的是独立缩放和平移每个 ScrollView
ios - UIScrollView 内部的 UIScrollView？
类似的问题也有人问过这个，但我的困境其实和他们正好相反。我有一个全屏、分页 UIScrollView，每个页面都是屏幕的大小。在其中，我有一些页面本身就是 UIScrollViews，它们的宽度大于屏
ios - UIScrollView 内部的 UIScrollView
我有一个 UIScrollView 和另一个 UIScrollView 。它们都水平滚动并且具有 pagingEnabled = YES。假设我开始滚动内部 ScrollView 并到达最右边界。如果
uiscrollview - drawRect 使 UIScrollView 中的滚动变慢
我有一个 UIScrollView，里面有一个(自定义)UIView。在我的 scrollViewDidScroll 方法中，我正在调用 [myCustomView setNeedsDisplay]
uiscrollview - UIScrollView 减速时 GestureRecognizers 未接收到触摸事件
我有一个水平滚动的 UICollectionView，其中填充了垂直滚动的 UITableViews(两者都是 UISCrollView 的子类)。当滚动手势开始沿任一方向滚动时，在其减速完成之前不会
ios - 垂直 UIScrollView 优于水平 UIScrollView
iOS 8， swift 。我试图在水平 ScrollView 上创建垂直 ScrollView 。它们都是 UIScrollView。垂直 ScrollView 允许从底部向上滑动 View 。顶部
uiscrollview - 将 UIScreenEdgePanGestureRecognizer 用于 UIScrollView
我需要一个分页的 UIScrollView，它以 UIScreenEdgePanGestureRecognizer 的方式检测屏幕边缘的平移，而不是像 UIPanGestureRecognizer 那
ios - 当另一个 UIScrollView 滚动时停止动画 UIScrollView
假设我有多个 ScrollView ，并且我希望在任何给定时间只打开其中一个 (scrollView.contentOffset != 0)。因此，当 scroll view 1 打开且 scroll
ios - 分页 UIScrollView 内的 UIScrollView
我在分页 UIScrollView(外部)中的 VC 中有 UIScrollView(内部 - UICollectionView 是诚实的)。两者都是水平的。当我向内滚动到边缘(左侧或右侧)时，它开始
ios - 如何从现有的 UIScrollView 中获取重复的 UIScrollView？
如何在不干扰现有 UIScrollView 的情况下从现有 UIScrollView 获取重复的 UIScrollView。第一个 ScrollView ， UIScrollView *firstS
iphone - 将 UIScrollView 手势识别器添加到另一个 UIScrollView
我的应用程序中有一个点，我删除了一个 ScrollView 并添加了另一个。我希望新 ScrollView 中也能出现上一个 ScrollView 中的相同手势。我尝试过: s
ios - 如何以编程方式在 UIScrollview 中创建 UIScrollview
请告诉我如何在类似嵌套进程的 ScrollView 中设置 ScrollView 。以下代码部分有效。 int x=10; int y=10; for(int i=0; i<5; i++) {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

ios - UIScrollView 内容布局不正确