Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIPageControl not visible in iOS 14

I have a UIPageControl that has worked fine in my production app for the last 6 months. However, after updating all my test devices to iOS 14 and updating Xcode to v12, my UIPageControl I have in a tableView cell is no longer visible.

I have changed nothing in my code, this just occurred spontaneously due to the software update. I understand Apple has changed the view hierarchy of UITableView and has also modified page controls. Does anyone have any idea why this page control is positioned correctly yet remains invisible?

Page control is in view hierarchy yet it is not visible

like image 233
Rage Avatar asked Sep 22 '20 20:09

Rage


2 Answers

UIPageControl works a little differently in iOS 14. It might be surprising that it does not show anything if the width is too small.

iOS 13 UIPageControl iOS 14 UIPageControl

import UIKit

class ViewController: UIViewController {
    
    lazy var label: UILabel = UILabel()
    var widthConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()

        let pageControl = UIPageControl()
        pageControl.numberOfPages = 10
        pageControl.currentPage = 3
        pageControl.pageIndicatorTintColor = .red
        pageControl.currentPageIndicatorTintColor = .green
        pageControl.layer.borderWidth = 1
        pageControl.layer.borderColor = UIColor.purple.cgColor
        widthConstraint = pageControl.widthAnchor.constraint(equalToConstant: 100)
        widthConstraint.isActive = true
        
        let slider = UISlider()
        slider.minimumValue = 0
        slider.maximumValue = 300
        slider.value = 100
        slider.widthAnchor.constraint(equalToConstant: 200).isActive = true
        slider.addTarget(self, action: #selector(sliderValueDidChange(_:)), for: .valueChanged)
        
        let stackView = UIStackView(arrangedSubviews: [label, pageControl, slider])
        stackView.axis = .vertical
        stackView.alignment = .center
        stackView.spacing = 40
        
        view.addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stackView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
        
        updateLabel()
    }


    @objc
    func sliderValueDidChange(_ sender: Any?) {
        guard let slider = sender as? UISlider else { return }
        widthConstraint.constant = CGFloat(slider.value)
        updateLabel()
    }
    
    func updateLabel() {
        if #available(iOS 14.0, *) {
            label.text = "iOS 14 PageControl width: \(widthConstraint.constant.rounded())"
        } else {
            label.text = "iOS 13 PageControl width: \(widthConstraint.constant.rounded())"
        }
    }
}
like image 156
David Arve Avatar answered Sep 19 '22 04:09

David Arve


I have same issue, When UIPageControl's width is short, such as 80pt, I set pageControl.backgroundStyle = .minimal in iOS 14 or later. It works for me.

like image 38
Leo.J Avatar answered Sep 20 '22 04:09

Leo.J