垂直旋转的 UIPageControl 占用太多空间

Question

我使用CGAffineTransform 将水平的 UIPageControl 垂直旋转。但是当我将它添加到我的收藏视图之外时，它占用了太多的宽度。当我在它上面添加一个宽度锚时，UIPageControl 消失了。

noticesPagingIndicator = UIPageControl()
let angle = CGFloat.pi/2
noticesPagingIndicator.transform = CGAffineTransform(rotationAngle: angle)

 NSLayoutConstraint.activate([
//            noticesPagingIndicator.widthAnchor.constraint(equalToConstant: 30),
            noticesPagingIndicator.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            noticesPagingIndicator.centerYAnchor.constraint(equalTo: noticesCollectionView.centerYAnchor),
            noticesCollectionView.leadingAnchor.constraint(equalTo: noticesPagingIndicator.trailingAnchor),
            noticesCollectionView.topAnchor.constraint(equalTo: noticeStackView.bottomAnchor, constant: 8),
            noticesCollectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
            noticesCollectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
 ])

当我查看 UIView 层次结构时，我看到 UIPageControl 上有很多填充

启用宽度锚点：

Answer 1

@DonMag 用故事板回答

第 1 步：

在 View Controller 中，拖动 UIVIew --> 将其命名为 (holderView)

第 2 步：

在 holderView 中拖动页面控件

第 4 步：

选择持有人View - 添加Center Y Constraint，Trailing Constraint with Super View

第 5 步：

选择页面 Control View - 添加 Center X , Center Y 约束

第 6 步：

从左侧面板的视图列表中，选择父视图和页面控制视图，添加 Equal With 和 Equal Height 约束

第 7 步：

现在选择 Equal Width 约束，并从左侧面板（约束属性）将 superView Width 更新为 SuperView Height，

高度约束也一样

你的约束应该是这样的

Answer 2

了解Debug View Hierarchy 工具。它可以帮助您找出大多数布局问题。

当您转换视图时，它不会改变它的边界，因此也不会改变它与其他 UI 元素的约束关系。

使用此代码（8 页，所以 8 个点）：

class ViewController: UIViewController {
    
    let pgc = UIPageControl()
    let greenLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemYellow
        
        pgc.translatesAutoresizingMaskIntoConstraints = false
        greenLabel.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(pgc)
        view.addSubview(greenLabel)
        
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // page control Leading to safe area Leading + 20, centerY
            pgc.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            pgc.centerYAnchor.constraint(equalTo: g.centerYAnchor, constant: 0.0),
            
            // constrain greenLabel Leading to page control trailing + 8 and centerY, safe area trailing -8
            greenLabel.leadingAnchor.constraint(equalTo: pgc.trailingAnchor, constant: 8.0),
            greenLabel.centerYAnchor.constraint(equalTo: pgc.centerYAnchor),
            greenLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -8.0),
            
        ])

        // rotate the page control
        let angle = CGFloat.pi/2
        pgc.transform = CGAffineTransform(rotationAngle: angle)
        
        pgc.backgroundColor = .systemBlue
        greenLabel.backgroundColor = .green
        
        pgc.numberOfPages = 8
        
        greenLabel.numberOfLines = 0
        greenLabel.text = "UIPageControl indicates the number of open pages in an application by displaying a dot for each open page. The dot that corresponds to the currently viewed page is highlighted. UIPageControl supports navigation by sending the delegate an event when a user taps to the right or to the left of the currently highlighted dot."
        
    }
    
}

你得到这个输出：

如您所见，页面控件尾锚的绿色标签前导约束显示页面控件 width 与没有旋转时的匹配。

如果您使用Debug View Hierarchy 检查视图，您会看到页面控件如下所示：

frame 是 w: 27.5 h: 217，但 bounds 是 w: 217 h: 27.5。

要解决此问题，您需要将页面控件嵌入“持有人”视图中，将持有人视图的高度限制为页面控件的宽度和宽度到高度。然后将您的其他元素约束到该“持有人”视图：

class ViewController: UIViewController {
    
    let pgcHolder = UIView()
    let pgc = UIPageControl()
    let greenLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemYellow
        
        pgcHolder.translatesAutoresizingMaskIntoConstraints = false
        pgc.translatesAutoresizingMaskIntoConstraints = false
        greenLabel.translatesAutoresizingMaskIntoConstraints = false
    
        pgcHolder.addSubview(pgc)
        view.addSubview(pgcHolder)
        view.addSubview(greenLabel)
        
        let g = view.safeAreaLayoutGuide
    
        NSLayoutConstraint.activate([

            // center page control in its "holder" view
            pgc.centerXAnchor.constraint(equalTo: pgcHolder.centerXAnchor),
            pgc.centerYAnchor.constraint(equalTo: pgcHolder.centerYAnchor),
            
            // constrain holder view leading to view + 20, centerY
            pgcHolder.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            pgcHolder.centerYAnchor.constraint(equalTo: g.centerYAnchor, constant: 0.0),
            
            // constrain holder view WIDTH to page control HEIGHT
            pgcHolder.widthAnchor.constraint(equalTo: pgc.heightAnchor),
            // constrain holder view HEIGHT to page control WIDTH
            pgcHolder.heightAnchor.constraint(equalTo: pgc.widthAnchor),
            
            // constrain greenLabel Leading to holder view trailing + 8 and centerY, safe area trailing -8
            greenLabel.leadingAnchor.constraint(equalTo: pgcHolder.trailingAnchor, constant: 8.0),
            greenLabel.centerYAnchor.constraint(equalTo: pgcHolder.centerYAnchor),
            greenLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -8.0),
            
        ])
        
        let angle = CGFloat.pi/2
        pgc.transform = CGAffineTransform(rotationAngle: angle)

        pgcHolder.backgroundColor = .systemRed
        pgc.backgroundColor = .systemBlue
        greenLabel.backgroundColor = .green
        
        pgc.numberOfPages = 8
        
        greenLabel.numberOfLines = 0
        greenLabel.text = "UIPageControl indicates the number of open pages in an application by displaying a dot for each open page. The dot that corresponds to the currently viewed page is highlighted. UIPageControl supports navigation by sending the delegate an event when a user taps to the right or to the left of the currently highlighted dot."

    }
    
}

现在我们有了我们想要的输出：