部署目标 12.3 的 UIStackView 圆角
UIStackView rounded corners for deployment target 12.3
我可以轻松地在 iOS 14 中创建带圆角的堆栈视图,方法是:
stackView.layer.cornerRadius = 10
stackView.clipsToBounds = true
没有做任何其他事情。但是由于我希望我的应用程序也可以在 iPhone 6 上工作,不能超过 iOS 12,所以上面的 2 行代码什么都不做。我查看了 并将代码调整到我的应用程序,但它仍然不起作用。明确地说,我有:
- 更改了我的构建设置以使用 iOS 12.3
的部署目标
- 排除了对场景的引用并添加了 window 变量 (Add iOS 12 support to a new Xcode 11 Project)
- 使用 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 放在另一个视图中并为此容器视图设置背景 color/corner 半径:
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
也是组团激活比较好,不是一个一个激活
我可以轻松地在 iOS 14 中创建带圆角的堆栈视图,方法是:
stackView.layer.cornerRadius = 10
stackView.clipsToBounds = true
没有做任何其他事情。但是由于我希望我的应用程序也可以在 iPhone 6 上工作,不能超过 iOS 12,所以上面的 2 行代码什么都不做。我查看了
- 更改了我的构建设置以使用 iOS 12.3 的部署目标
- 排除了对场景的引用并添加了 window 变量 (Add iOS 12 support to a new Xcode 11 Project)
- 使用 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 放在另一个视图中并为此容器视图设置背景 color/corner 半径:
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
也是组团激活比较好,不是一个一个激活