垂直旋转的 UIPageControl 占用过多 space

Question

我使用 CGAffineTransform 将水平的 UIPageControl 垂直旋转。但是，当我将它添加到 collection 视图之外时，它的宽度太大了。当我在其上添加宽度锚点时，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

了解 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."
        
    }
    
}

你得到这个输出：

如您所见，页面控件尾随锚点的绿色标签前导约束显示页面控件宽度与没有旋转的情况相匹配。

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

frame 是 w: 27.5 h: 217 但 bounds 是 w: 217 h: 27.5.

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

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."

    }
    
}

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

Answer 2

@DonMag 用故事板回答

第 1 步：

在视图控制器中，拖动 UIVIew --> 将其命名为 (holderView)

第 2 步：

在 holderView 中拖动页面控件

第 4 步：

Select holder View - 添加 Center Y Constraint , Trailing Constraint with Super View

第 5 步：

Select 页面控制视图 - 添加 Center X , Center Y 约束

第 6 步：

从左侧面板的视图列表中，select父视图和页面控制视图，添加等于和等于高度约束

第 7 步：

现在 select 等宽约束并从左侧面板（约束属性）将 superView 宽度更新为 SuperView 高度，

高度限制相同

您的约束应如下所示

垂直旋转的 UIPageControl 占用过多 space

Vertically rotated UIPageControl taking too much space

uipagecontrol

ios

autolayout

swift