Question

我正在尝试创建类似于Apple的快捷方式应用程序的集合视图。我能够自己创建单元格，但是很难创建一个单独的数据单元格（如果可以的话）。我的目标是让每个单元格显示一个标题，副标题以及可能的播放按钮。现在，我很难确定我的约束或可能的数据结构出了什么问题（它崩溃在背景上，并且文本未显示在彩色单元格上。）

struct customData {

    var title: String
    var subtitle: String
}

class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
    
    
    //Mark : All Cards
    fileprivate let data = [
        
        customData (title: "iOS", subtitle: "12 Tips"),
        customData (title: "iPadOS", subtitle: "11 Tips"),
        customData (title: "macOS", subtitle: "10 Tips"),
        customData (title: "tvOS", subtitle: "19 Tips"),
        customData (title: "watchOS", subtitle: "18 Tips"),
        customData (title: "Accessories", subtitle: "17 Tips"),
        
    ]
    
    //MARK : Properites
    let cellId = "Cell"

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        setupCollectionView()
        setupNavigationBarController()
    }
    
    //MARK : Setup Methods
    fileprivate func setupNavigationBarController() {
        self.navigationController?.navigationBar.shadowImage = UIImage()
        navigationItem.title = "Lists"

        if #available(iOS 13.0, *) {
            self.navigationController?.navigationBar.prefersLargeTitles = true
        }

    }
    
    fileprivate func setupCollectionView() {
        collectionView?.backgroundColor = .red
        collectionView.register(customCell.self, forCellWithReuseIdentifier: cellId)
        collectionView.alwaysBounceVertical = true
    }
    
    //MARK : CollectionView Delegate Methods
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 6
        return data.count
    }
    
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! customCell
        cell.data = self.data[indexPath.item]
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: (view.frame.width / 2) - 20, height: 110)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    }

}

class customCell: UICollectionViewCell {
    
    
    var data: customData? {
        didSet {
            guard let data = data else { return }
            listName.text = data.title
            subName.text = data.subtitle
        }
    }
    
    fileprivate let listName: UILabel = {
        let iv = UILabel ()
        iv.textColor = .white
        iv.font = UIFont(name: "Times" , size: 12)
        return iv
        
    }()
    
    fileprivate let subName: UILabel = {
        let iv = UILabel ()
        return iv
        
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupCell()
        
        contentView.addSubview(listName)

        listName.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
       listName.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 30).isActive = true
        listName.widthAnchor.constraint(equalTo: contentView.widthAnchor, constant: 12).isActive = true
       listName.heightAnchor.constraint(equalTo: contentView.heightAnchor, constant: 80).isActive = true
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    // MARK: Setup Cell
    fileprivate func setupCell() {
        roundCorner()
        gradientBackgroundColor()
        setCellShadow()
    }
    
    // MARK: Methods
    func setCellShadow() {
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 0, height: 1)
        self.layer.shadowOpacity = 0.2
        self.layer.shadowRadius = 1.0
        self.layer.masksToBounds = false
        self.layer.cornerRadius = 3
        self.clipsToBounds = false
    }
    
    func cellRandomBackgroundColors() -> [UIColor] {
        //Colors
        let red = [#colorLiteral(red: 0.9654200673, green: 0.1590853035, blue: 0.2688751221, alpha: 1),#colorLiteral(red: 0.7559037805, green: 0.1139892414, blue: 0.1577021778, alpha: 1)]
        let orangeRed = [#colorLiteral(red: 0.9338900447, green: 0.4315618277, blue: 0.2564975619, alpha: 1),#colorLiteral(red: 0.8518816233, green: 0.1738803983, blue: 0.01849062555, alpha: 1)]
        let orange = [#colorLiteral(red: 0.9953531623, green: 0.54947716, blue: 0.1281470656, alpha: 1),#colorLiteral(red: 0.9409626126, green: 0.7209432721, blue: 0.1315650344, alpha: 1)]
        let yellow = [#colorLiteral(red: 0.9409626126, green: 0.7209432721, blue: 0.1315650344, alpha: 1),#colorLiteral(red: 0.8931249976, green: 0.5340107679, blue: 0.08877573162, alpha: 1)]
        let green = [#colorLiteral(red: 0.3796315193, green: 0.7958304286, blue: 0.2592983842, alpha: 1),#colorLiteral(red: 0.2060100436, green: 0.6006633639, blue: 0.09944178909, alpha: 1)]
        let greenBlue = [#colorLiteral(red: 0.2761503458, green: 0.824685812, blue: 0.7065336704, alpha: 1),#colorLiteral(red: 0, green: 0.6422213912, blue: 0.568986237, alpha: 1)]
        let kindaBlue = [#colorLiteral(red: 0.2494148612, green: 0.8105323911, blue: 0.8425348401, alpha: 1),#colorLiteral(red: 0, green: 0.6073564887, blue: 0.7661359906, alpha: 1)]
        let skyBlue = [#colorLiteral(red: 0.3045541644, green: 0.6749247313, blue: 0.9517192245, alpha: 1),#colorLiteral(red: 0.008423916064, green: 0.4699558616, blue: 0.882807076, alpha: 1)]
        let blue = [#colorLiteral(red: 0.1774400771, green: 0.466574192, blue: 0.8732826114, alpha: 1),#colorLiteral(red: 0.00491155684, green: 0.287129879, blue: 0.7411141396, alpha: 1)]
        let bluePurple = [#colorLiteral(red: 0.4613699913, green: 0.3118675947, blue: 0.8906354308, alpha: 1),#colorLiteral(red: 0.3018293083, green: 0.1458326578, blue: 0.7334778905, alpha: 1)]
        let purple = [#colorLiteral(red: 0.7080290914, green: 0.3073516488, blue: 0.8653779626, alpha: 1),#colorLiteral(red: 0.5031493902, green: 0.1100070402, blue: 0.6790940762, alpha: 1)]
        let pink = [#colorLiteral(red: 0.9495453238, green: 0.4185881019, blue: 0.6859942079, alpha: 1),#colorLiteral(red: 0.8123683333, green: 0.1657164991, blue: 0.5003474355, alpha: 1)]
        
        let colorsTable: [Int: [UIColor]] = [0: red, 1: orangeRed, 2: orange, 3: yellow, 4: green, 5: greenBlue, 6: kindaBlue, 7: skyBlue, 8: blue, 9: bluePurple, 10: bluePurple, 11: purple, 12: pink]
        
        let randomColors = colorsTable.values.randomElement()
        return randomColors!
    }
    func gradientBackgroundColor() {
        let colors = cellRandomBackgroundColors()
        self.contentView.setGradientBackgroundColor(colorOne: colors[0], colorTow: colors[1])
    }
    func roundCorner() {
        self.contentView.layer.cornerRadius = 12.0
        self.contentView.layer.masksToBounds = true
        self.contentView.layer.borderWidth = 1.0
        self.contentView.layer.borderColor = UIColor.clear.cgColor
    }
}

这是我看到的：

Answer 1

要解决无法满足约束条件的警告，应将translatesAutoresizingMaskIntoConstraints中的listName设置为false。

override init(frame: CGRect) {
    super.init(frame: frame)
    setupCell()

    contentView.addSubview(listName)
    listName.translatesAutoresizingMaskIntoConstraints = false // Add this
    listName.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
    listName.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 30).isActive = true
    listName.widthAnchor.constraint(equalTo: contentView.widthAnchor, constant: 12).isActive = true
    listName.heightAnchor.constraint(equalTo: contentView.heightAnchor, constant: 80).isActive = true
}

具有自定义数据结构的UICollectionView

1 个答案: