以编程方式创建页面控件不显示

Posted 2023-03-14

【中文标题】以编程方式创建页面控件不显示

【英文标题】：Programatically created UIPageControl not showing

【发布时间】：2020-05-04 12:29:02

【问题描述】：

在我的视图层次结构中，我有一个 UIPageViewController（在容器视图内）。下面是 UIPageControl，底部是一个堆栈视图，由一个文本视图和一个按钮组成。我看到 UIPageViewController 和堆栈视图，但没有看到 UIPageControl。知道我做错了什么：

// Page view controller
        introPageViewC = IntroPageViewC()
        addChild(introPageViewC)

        introPageViewC.view.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(introPageViewC.view)

        NSLayoutConstraint.activate([
            introPageViewC.view.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 0.0),
            introPageViewC.view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 0.0),
            introPageViewC.view.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 0.0),
            introPageViewC.view.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: 0.0),
            ])

        introPageViewC.didMove(toParent: self)

        // Page view control

        introPageControl.currentPageIndicatorTintColor = UIColor.orange
        introPageControl.pageIndicatorTintColor = UIColor.lightGray.withAlphaComponent(0.8)

        view.addSubview(introPageControl)

        introPageControl.translatesAutoresizingMaskIntoConstraints = false
        introPageControl.topAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 10).isActive = true
        introPageControl.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        // Stack view
        view.addSubview(stackView)
        stackView.axis = .vertical
        stackView.distribution = .fillEqually
        stackView.spacing = 30

        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.topAnchor.constraint(equalTo: introPageControl.bottomAnchor, constant: 10).isActive = true
        stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 40).isActive = true
        stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -40).isActive = true

预期输出：

编辑： 尝试添加到堆栈视图：

var allViews = [UIView]()

        // Adding to stackview
        introPageControl.currentPageIndicatorTintColor = UIColor.orange
        introPageControl.pageIndicatorTintColor = UIColor.lightGray.withAlphaComponent(0.8)
        allViews.append(introPageControl)

        nameTextField = UITextField(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
        nameTextField.placeholder = "Mealplan name"
        Utilities.styleTextField(nameTextField)
        nameTextField.setPadding()
        allViews.append(nameTextField)

        let nextButton = UIButton(type: .system)
        nextButton.frame = CGRect(x: 20, y: 20, width: 100, height: 40)
        nextButton.setTitle("Next", for: .normal)
        nextButton.titleLabel?.textColor = .white
        nextButton.titleLabel?.font = UIFont(name: "NexaBold", size: 16)
        Utilities.styleDefaultButton(nextButton)
        nextButton.addTarget(self, action: #selector(tapSubmit(_:)), for: .touchUpInside)
        allViews.append(nextButton)

        errorLabel.frame = CGRect(x: 20, y: 20, width: 100, height: 40)
        errorLabel.font = UIFont(name: "NexaBold", size: 16)
        errorLabel.textColor = .systemRed
        errorLabel.textAlignment = .center
        errorLabel.alpha = 0
        allViews.append(errorLabel)

        for eachView in allViews 
            stackView.addArrangedSubview(eachView)
        

【问题讨论】：

您是否可能因为它是白色背景上的白点而没有看到它？给你的页面控件一个背景颜色，看看它是否出现。如果仍然没有，请使用 Debug View Hierarchy 检查您的布局。

【参考方案1】：

introPageControl.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true 我相信你的意思是centerXAnchor？

【讨论】：

我在玩它的时候把它改成了 Y，但我确实把它改回了 X，结果是一样的。页面控件在屏幕上仍然不可见。

【参考方案2】：

我认为你把 topAnchor 搞错了。现在，它似乎被限制在 containerView 的底部加上 10，它就在屏幕外。我想你的意思是说-10。

introPageControl.topAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -10).isActive = true

【讨论】：

containerView 包含 UIPageViewController，所以它的底部就在 UIPageControl 的上方。如果这就是你的意思，它不是整个屏幕的视图。

哦，好吧。他们都在stackview中吗？如果他们是，您不必担心他们的 Y 定位。介意分享那个代码吗？

不，只有 textView 和 button 在 stackview 中。但是为了让 PageControl 出现，我试图把它放在 stackview 中，但它仍然不会出现。我在上面的编辑部分中添加了 stackview 的代码。

并删除了这个stackView.topAnchor.constraint(equalTo: introPageControl.bottomAnchor, constant: 10).isActive = true？

嗯，你的 UIPageControl init-ed 怎么样？堆栈视图的其余部分看起来还不错吗？