xcode 模拟一个像元在两个像元之间和两个像元之下

vlurs2pr  于 2022-11-18  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在使用tableview和collection view创建这个屏幕。
如果你在设计中仔细看...我将不得不创建一个效果的细胞去上面下面或顶部细胞与圆角半径...这模拟像细胞是下面和两个细胞之间...
具有加铺转角的顶部区域也是如此。
请指导通过一个正确的方式来设计这个整个屏幕。
(我只使用故事板和UIKit ...我不想使用swiftUI)

qlfbtfca

qlfbtfca1#

有很多方法可以解决这个问题,这里有一个
四种细胞类型:

  • “顶部”单元格
  • “类别”单元格
  • “热门产品”单元格
  • “建议”单元格

在每个单元格类中,添加一个带圆角的UIView--这将保存每个单元格的“内容”。

在圆角视图后面,添加“顶部颜色”UIView和“底部颜色”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
    }
    
}

相关问题