ios - UICollectionView x3 在标题 Collection View 中彼此创建 Collection View slider

Question

我想知道是否有人可以展示/帮助我。正如您在图 2 中看到的，我正在尝试在顶部的 UICOLLECTIONVIEW 中创建一个卡片 slider 。

我知道要创建 UICollectionView slider ，您需要首先创建 CollectionView 来容纳 slider ，然后再创建其中的另一个 slider 。所以我总共有 3 个 UICOLLECTIONVIEWS。

我一直在遵循教程才能走到这一步，但我无法弄清楚这一点。图一是我现在所在的位置。但目前，我似乎所做的只是覆盖当前的 UICollection，而不是使其进入其中，如图 1 所示。

[

import UIKit

class MyFeedsHeader: UICollectionViewCell, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    private let cellId = "appCellId"

    let profileImageView: UIImageView = {

        let iv = UIImageView()
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
        iv.backgroundColor = .lightGray
        return iv

    }()

    let feedsTitle: UILabel = {
        let title = UILabel()
        title.text = "Feeds"
        title.font = UIFont.boldSystemFont(ofSize: 30)
       return title
    }()


    let followingLabel: UILabel = {
        let title = UILabel()
        title.text = "00 Following"
        title.font = UIFont.boldSystemFont(ofSize: 16)
        title.textColor = .lightGray
        return title
    }()


    // --------------------

    let appsCollectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
//        layout.scrollDirection = .horizontal
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)

        collectionView.backgroundColor = UIColor.clear
        collectionView.translatesAutoresizingMaskIntoConstraints = false

        return collectionView
    }()


    //--------------------


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

        addSubview(profileImageView)
        profileImageView.anchor(top: self.topAnchor, left: nil, bottom: nil, right: self.rightAnchor, paddingTop: 16, paddingLeft: 0, paddingBottom: 0, paddingRight: 20, width: 50, height: 50)

        profileImageView.layer.cornerRadius = 5 / 1

        addSubview(feedsTitle)
        feedsTitle.anchor(top: self.topAnchor, left: self.leftAnchor, bottom: nil, right: nil, paddingTop: 20, paddingLeft: 20, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)

        addSubview(followingLabel)
        followingLabel.anchor(top: feedsTitle.bottomAnchor, left: self.leftAnchor, bottom: nil, right: nil, paddingTop: 20, paddingLeft: 20, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)

       setupViews()

        self.backgroundColor = .white
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // ---------------------------------- remove below if can't figure out


    func setupViews() {
        // --------

        appsCollectionView.dataSource = self
        appsCollectionView.delegate = self

        appsCollectionView.register(AppCell.self, forCellWithReuseIdentifier: cellId)

        addSubview(appsCollectionView)


        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[v0]-8-|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": appsCollectionView]))

        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": appsCollectionView]))


        //--------
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 5
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        return collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
    }

 class AppCell: UICollectionViewCell {

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

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        func setupViews() {
            backgroundColor = UIColor.red
        }

    }

}

Answer 1

我建议首先从最外层的 UICollectionView 开始，当您让每个 View 正常工作时，您可以继续进行下一个。

要获取有关应用程序当前运行情况的更多详细信息，您可以使用 View Debugger查看所有内容是否正确嵌套以及任何约束是否正在执行其应做的事情。

要获得您正在寻找的效果，您的第一站应该实现来自 UICollectionViewDelegateFlowLayout 的方法，例如 sizeForItemAt、insetForSectionAt 和 minimumLineSpacingForSectionAt。这些将定义单元格交互的间距和布局。

这些委托(delegate)方法都是协议(protocol) UICollectionViewDelegateFlowLayout 的一部分，这意味着您的 Collection View (您将委托(delegate)设置为 self 又名 MyFeedsHeader)如果 MyFeedsHeader 具有函数，则会向您的类 MyFeedsHeader 询问有关如何布局单元格的信息。这与您对 func collectionView:numberOfItemsInSection 所做的事情相同。

希望能为您指明正确的方向!祝你好运!