swift - 部署目标 12.3 的 UIStackView 圆角
问题描述
通过执行以下操作,我可以轻松地在 iOS 14 中创建一个带有圆角的 stackview:
stackView.layer.cornerRadius = 10
stackView.clipsToBounds = true
不做任何其他事情。但是由于我希望我的应用程序也可以在无法超越 iOS 12 的 iPhone 6 上运行,所以上面的 2 行代码不会做任何事情。我看过如何设置 UIStackView 的角半径?并将代码改编为我的应用程序,但它仍然无法正常工作。要清楚,我有:
- 更改了我的构建设置以使用 iOS 12.3 的部署目标
- 排除对场景的引用并添加窗口变量(将 iOS 12 支持添加到新的 Xcode 11 项目)
- 用 iPhone 11 和 iphone 6 模拟器测试(都没有显示圆角)
这是我的代码:
import UIKit
class ViewController: UIViewController {
let buttonList = ["Dog", "Cat", "Mouse"]
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .black
let stackView = UIStackView()
stackView.axis = .vertical
stackView.distribution = .fillEqually
stackView.alignment = .fill
stackView.spacing = 6
stackView.backgroundColor = .systemPink // this actually works
view.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
stackView.widthAnchor.constraint(equalToConstant: 140).isActive = true
// The following is "supposed" to create rounded corners for the stackview
let subView = UIView(frame: stackView.bounds)
subView.backgroundColor = .yellow // this ends up showing through instead of the systemPink
subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
stackView.insertSubview(subView, at: 0)
subView.layer.cornerRadius = 10
subView.layer.masksToBounds = true
subView.clipsToBounds = true
// Fill the stackview with buttons
for index in 0..<buttonList.count {
let button = UIButton()
button.setTitle(buttonList[index], for: .normal)
button.backgroundColor = .cyan
button.setTitleColor(.black, for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 14)
stackView.addArrangedSubview(button)
}
}
}
这就是它的样子(没有圆角):
那么我错过了什么?对于 iPhone 6 (iOS 12) 及更高版本,如何让我的 stackview 看起来有圆角?
解决方案
您可以将 stackView 放在另一个视图中,并为此容器视图设置背景颜色/角半径:
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .black
// The following is "supposed" to create rounded corners for the stackview
let subView = UIView()
subView.backgroundColor = .yellow // this ends up showing through instead of the systemPink
subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
subView.layer.cornerRadius = 10
subView.layer.masksToBounds = true
subView.clipsToBounds = true
view.addSubview(subView)
subView.translatesAutoresizingMaskIntoConstraints = false
let stackView = UIStackView()
stackView.axis = .vertical
stackView.distribution = .fillEqually
stackView.alignment = .fill
stackView.spacing = 6
stackView.backgroundColor = .systemPink // this actually works
subView.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
// Fill the stackview with buttons
for index in 0..<buttonList.count {
let button = UIButton()
button.setTitle(buttonList[index], for: .normal)
button.backgroundColor = .cyan
button.setTitleColor(.black, for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 14)
stackView.addArrangedSubview(button)
}
NSLayoutConstraint.activate([
stackView.trailingAnchor.constraint(equalTo: subView.trailingAnchor),
stackView.leadingAnchor.constraint(equalTo: subView.leadingAnchor),
stackView.topAnchor.constraint(equalTo: subView.topAnchor),
stackView.bottomAnchor.constraint(equalTo: subView.bottomAnchor),
subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
subView.widthAnchor.constraint(equalToConstant: 140)
])
}
据我所知,最好还是NSLayoutConstraint
成组激活,不要一个一个
推荐阅读
- reactjs - React js,在数组上映射时关于键的错误
- javascript - 使用 Meteor 使用 fs(文件系统)在私有文件夹中读取和循环
- java - 如何在没有打印语句的情况下运行多线程程序?
- python - 支持多种物联网协议的python库
- php - 使用 PHPExcel 写入 excel 文件时超出内存
- iis - IIS 日志是否只包含传入的请求?
- javascript - 在循环内形成表格的行
- java - 易失性读取冲突
- c# - Firebase GetValueAsync() 如果 task.result 不存在它不执行下面的代码
- javascript - 在jquery和php中过滤搜索时如何解决数据表选择的行