ios - 垂直旋转的 UIPageControl 占用太多空间
问题描述
我曾经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 上有很多填充
启用宽度锚点:
解决方案
了解该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
,您将看到页面控件如下所示:
框架是w: 27.5 h: 217
但边界是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."
}
}
现在我们有了我们想要的输出:
推荐阅读
- java - 如何在骆驼弹簧WS中捕获肥皂故障细节
- javascript - 在哪里放置快速验证消毒剂?
- python - 从 ASCII 代码中清除 python 字节
- pandas - 基于月差的组总数
- python - 如果它们存在于单独的元组中,则保留重复的元组值,但如果它们位于同一元组中,则仅保留唯一的元组值
- android - Android 上下文:“this”的类型不匹配
- python - 在这个程序中我得到属性错误?谁能解决这个错误并向我解释
- java - 调整另一个 jpanel 的大小时如何调整 jpanel 的大小
- excel - 复制值
- php - 在循环中完成 bindValue() 后无法执行 () 查询,但在为表中的每个列名独立运行 bindValue 时执行