部署目标 12.3 的 UIStackView 圆角

Question

我可以轻松地在 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) 及更高版本时显示圆角？

Answer 1

您可以将 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也是组团激活比较好，不是一个一个激活

部署目标 12.3 的 UIStackView 圆角

UIStackView rounded corners for deployment target 12.3

swift

uistackview

rounded-corners

ios12