為什么我的 2D UIViews 沒有出現在屏幕上？

Question

我正在嘗試制作包含有邊距的 12x7 UIViews 的 UIView。 我認為最好的方法是制作 7 個垂直堆棧，然后將它們全部添加到一個大的水平堆棧中。 我對它進行了編碼，但問題是這個 Horizo​​ntal Stacks 根本沒有出現在屏幕上（我已經嘗試過 Xcode 功能來查看沒有任何圖層的圖層）。

這是我的代碼：

import UIKit

class CalendarView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        setupView()
    }

    private func setupView() {
        // array to add in future in columnsStackView
        var columnStacks: [UIStackView] = []

        for columns in 1...12 {
            // array to add in future in columnStackView
            var columnViews: [UIView] = []

            for cell in 1...7 {
                let cellView = UIView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
                cellView.backgroundColor = .orange
                columnViews.append(cellView)
            }

            // create columnStackView and add all 7 views
            let columnStackView = UIStackView(arrangedSubviews: columnViews)
            columnStackView.axis = .vertical
            columnStackView.distribution = .fillEqually
            columnStackView.alignment = .fill
            columnStackView.spacing = 4

            columnStacks.append(columnStackView)
        }

        // create columnsStackView and add those 12 stacks
        let columnsStackView = UIStackView(arrangedSubviews: columnStacks)
        columnsStackView.axis = .horizontal
        columnsStackView.distribution = .fillEqually
        columnsStackView.alignment = .fill
        columnsStackView.spacing = 4
        columnsStackView.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(columnsStackView)
    }
}

你能幫我解決這個問題嗎！！！

Answer 1

幾件事...

UIStackView在排列其子視圖時使用自動布局，所以這一行：

let cellView = UIView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))

將創建一個UIView ，但寬度和高度將被忽略。

您需要設置具有約束的那些：

for cell in 1...7 {
    let cellView = UIView()
    cellView.backgroundColor = .orange
                
    // we want each "cellView" to be 24x24 points
    cellView.widthAnchor.constraint(equalToConstant: 24.0).isActive = true
    cellView.heightAnchor.constraint(equalTo: cellView.widthAnchor).isActive = true
                
    columnViews.append(cellView)
}

現在，因為我們已經明確設置了“cellViews”的寬度和高度，我們可以設置堆棧視圖.distribution = .fill （而不是.fillEqually ）。

接下來，我們必須將“外部”堆棧視圖（ columnsStackView ）約束到視圖本身：

// constrain the "outer" stack view to self
NSLayoutConstraint.activate([
    columnsStackView.topAnchor.constraint(equalTo: topAnchor),
    columnsStackView.leadingAnchor.constraint(equalTo: leadingAnchor),
    columnsStackView.trailingAnchor.constraint(equalTo: trailingAnchor),
    columnsStackView.bottomAnchor.constraint(equalTo: bottomAnchor),
])

否則，視圖將具有 0x0 尺寸。

這是您的課程的修改版本：

class CalendarView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        setupView()
    }
    
    private func setupView() {
        // array to add in future in columnsStackView
        var columnStacks: [UIStackView] = []
        
        for columns in 1...12 {
            // array to add in future in columnStackView
            var columnViews: [UIView] = []
            
            for cell in 1...7 {
                let cellView = UIView()
                cellView.backgroundColor = .orange
                
                // we want each "cellView" to be 24x24 points
                cellView.widthAnchor.constraint(equalToConstant: 24.0).isActive = true
                cellView.heightAnchor.constraint(equalTo: cellView.widthAnchor).isActive = true
                
                columnViews.append(cellView)
            }
            
            // create columnStackView and add all 7 views
            let columnStackView = UIStackView(arrangedSubviews: columnViews)
            columnStackView.axis = .vertical
            columnStackView.distribution = .fill
            columnStackView.alignment = .fill
            columnStackView.spacing = 4
            
            columnStacks.append(columnStackView)
        }
        
        // create columnsStackView and add those 12 stacks
        let columnsStackView = UIStackView(arrangedSubviews: columnStacks)
        columnsStackView.axis = .horizontal
        columnsStackView.distribution = .fill
        columnsStackView.alignment = .fill
        columnsStackView.spacing = 4
        columnsStackView.translatesAutoresizingMaskIntoConstraints = false
        
        self.addSubview(columnsStackView)
        
        // constrain the "outer" stack view to self
        NSLayoutConstraint.activate([
            columnsStackView.topAnchor.constraint(equalTo: topAnchor),
            columnsStackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            columnsStackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            columnsStackView.bottomAnchor.constraint(equalTo: bottomAnchor),
        ])
    }
}

和一個簡單的測試控制器來展示如何使用它：

class CalendarTestViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let cv = CalendarView()
        
        cv.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(cv)
        
        // the CalendarView will size itself, so we only need to
        //  provide x and y position constraints
        NSLayoutConstraint.activate([
            cv.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            cv.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        ])
        
        // let's give it a background color so we can see its frame
        cv.backgroundColor = .systemYellow
    }

}

結果：