模擬兩個單元格之間和兩個單元格下方的單元格

我在里面使用 tableview 和 collection view 來創建這個螢屏。

如果您在設計中仔細觀察..我將不得不創建一個單元格在下方或頂部單元格上方具有拐角半徑的效果……模擬單元格位于兩個單元格下方和之間……

具有拐角半徑的頂部區域也是如此。

請指導通過正確的方法來設計整個螢屏。

（我只使用故事板和 UIKit...我不想使用 swiftUI）

uj5u.com熱心網友回復：

解決這個問題的各種方法 - 這是一個......

四種細胞型別：

• “頂部”單元格
• “類別”單元格
• “頂級產品”單元格
• “建議”單元格

在每個單元格類中，添加一個UIView帶圓角的 - 這將保存每個單元格的“內容”。

在圓角視圖后面UIView，添加一個 "Top Color"和一個 "Bottom Color"UIView。

它看起來像這樣：

運行時，我們得到這樣的結果：

這是一些示例代碼：

class MyBaseCell: UITableViewCell {
    
    var topBotColors: [UIColor] = [.white, .white] {
        didSet {
            topColorView.backgroundColor = topBotColors[0]
            botColorView.backgroundColor = topBotColors[1]
        }
    }
    
    let theStack: UIStackView = {
        let v = UIStackView()
        v.axis = .vertical
        v.spacing = 12
        return v
    }()
    
    let topColorView = UIView()
    let botColorView = UIView()
    let roundedCornerView = UIView()
    
    var topConstraint: NSLayoutConstraint!
    var botConstraint: NSLayoutConstraint!

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() {
        
        [topColorView, botColorView, roundedCornerView].forEach { v in
            v.translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview(v)
        }

        theStack.translatesAutoresizingMaskIntoConstraints = false
        roundedCornerView.addSubview(theStack)
        
        let g = contentView.layoutMarginsGuide
        
        topConstraint = theStack.topAnchor.constraint(equalTo: roundedCornerView.topAnchor, constant: 12.0)
        botConstraint = theStack.bottomAnchor.constraint(equalTo: roundedCornerView.bottomAnchor, constant: -12.0)
        
        NSLayoutConstraint.activate([

            topColorView.topAnchor.constraint(equalTo: contentView.topAnchor),
            topColorView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            topColorView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),

            botColorView.topAnchor.constraint(equalTo: topColorView.bottomAnchor),
            botColorView.heightAnchor.constraint(equalTo: topColorView.heightAnchor),
            
            botColorView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            botColorView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            botColorView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),

            roundedCornerView.topAnchor.constraint(equalTo: g.topAnchor),
            roundedCornerView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            roundedCornerView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            roundedCornerView.bottomAnchor.constraint(equalTo: g.bottomAnchor),

            theStack.leadingAnchor.constraint(equalTo: roundedCornerView.leadingAnchor),
            theStack.trailingAnchor.constraint(equalTo: roundedCornerView.trailingAnchor),

            topConstraint, botConstraint,
            
        ])
        
        self.backgroundColor = .clear
        contentView.backgroundColor = .clear
    }

}

class TopCell: MyBaseCell {
    override func commonInit() {
        super.commonInit()
        
        // let's add 1 tall label
        let v = UILabel()
        v.textAlignment = .center
        v.text = "Top Cell"
        v.textColor = .white
        v.font = .systemFont(ofSize: 24.0, weight: .bold)
        theStack.addArrangedSubview(v)

        // avoid auot-layout complaints
        let c = v.heightAnchor.constraint(equalToConstant: 80.0)
        c.priority = .required - 1
        c.isActive = true
    }
}

class CatsCell: MyBaseCell {
    override func commonInit() {
        super.commonInit()
        
        // let's add a few labels
        for i in 1...4 {
            let v = UILabel()
            v.textAlignment = .center
            v.text = "Categories Label \(i)"
            theStack.addArrangedSubview(v)
        }
        
        roundedCornerView.backgroundColor = .white
        roundedCornerView.layer.cornerRadius = 24
    }
}

class TopProdsCell: MyBaseCell {
    override func commonInit() {
        super.commonInit()
        
        // let's add a few labels
        for i in 1...3 {
            let v = UILabel()
            v.textAlignment = .center
            v.text = "Top Prods Label \(i)"
            v.textColor = .white
            theStack.addArrangedSubview(v)
        }

        roundedCornerView.backgroundColor = .clear
        
        // increase top/bottom "spacing"
        topConstraint.constant = 24.0
        botConstraint.constant = -24.0
    }
}

class SuggestionsCell: MyBaseCell {
    override func commonInit() {
        super.commonInit()
        
        // let's add a few labels
        for i in 1...6 {
            let v = UILabel()
            v.textAlignment = .center
            v.text = "Suggested Label \(i)"
            theStack.addArrangedSubview(v)
        }

        roundedCornerView.backgroundColor = .white
        roundedCornerView.layer.cornerRadius = 24
    }
}

class SampleTableVC: UIViewController, UITableViewDataSource, UITableViewDelegate {

    let tableView = UITableView()
    
    let myGray: UIColor = .gray
    let myBlue: UIColor = UIColor(red: 0.25, green: 0.30, blue: 0.65, alpha: 1.0)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
            tableView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
            tableView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
            tableView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
        ])
        
        tableView.register(TopCell.self, forCellReuseIdentifier: "topCell")
        tableView.register(CatsCell.self, forCellReuseIdentifier: "catCell")
        tableView.register(TopProdsCell.self, forCellReuseIdentifier: "prodCell")
        tableView.register(SuggestionsCell.self, forCellReuseIdentifier: "suggCell")
        
        tableView.dataSource = self
        tableView.delegate = self
        
        let bkv = UIView()
        bkv.backgroundColor = myGray
        tableView.backgroundView = bkv
        
        tableView.separatorStyle = .none
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let c = tableView.dequeueReusableCell(withIdentifier: "topCell", for: indexPath) as! TopCell
            c.topBotColors = [myGray, myGray]
            return c
        }
        if indexPath.row == 1 {
            let c = tableView.dequeueReusableCell(withIdentifier: "catCell", for: indexPath) as! CatsCell
            c.topBotColors = [myGray, myBlue]
            return c
        }
        if indexPath.row == 2 {
            let c = tableView.dequeueReusableCell(withIdentifier: "prodCell", for: indexPath) as! TopProdsCell
            c.topBotColors = [myBlue, myBlue]
            return c
        }
        let c = tableView.dequeueReusableCell(withIdentifier: "suggCell", for: indexPath) as! SuggestionsCell
        c.topBotColors = [myBlue, myGray]
        return c
    }
    
}

標籤：迅速代码合适的视图uicollectionviewuikit

上一篇：Swift：@Binding將區域系結到MKMapView并呼叫setRegion()時出現問題。setRegion()沒有做任何事情

下一篇：如何使用SVG路徑繪制矩形云？