Показать только 7 uicollectionview ячеек

Question

У меня есть UIcollectionview, который позволяет прокручивать контент только по горизонтали.Каждый UIcollectionviewCell - это пользовательское представление, отображающее две метки, расположенные одна под другой.Я установил ограничения в пользовательской ячейке для размещения этих меток.Независимо от ширины экрана я всегда хочу показать 7 ячеек UICollection.Возможно ли это?

Answer 1

Вам нужно изменить itemSize, рассчитав по ширине устройства

let itemSpacing: CGFloat = 5
let itemsInOneLine: CGFloat = 7
let flow = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
flow.sectionInset = UIEdgeInsets(top: itemSpacing, left: itemSpacing, bottom: itemSpacing, right: itemSpacing)
flow.minimumInteritemSpacing = itemSpacing
flow.minimumLineSpacing = itemSpacing
let cellWidth = (UIScreen.main.bounds.width - (itemSpacing * 2) - ((itemsInOneLine - 1) * itemSpacing)) / itemsInOneLine
flow.itemSize = CGSize(width: cellWidth, height: 120)

Answer 2

Надеюсь, это то, что вы хотите,

Вот код для этого.

//
//  ViewController.swift
//  AssignmentSO
//
//  Created by Anuradh Caldera on 4/24/19.
//  Copyright © 2019 personal. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    private var mycollectionview: UICollectionView!
    private let cellidentifier = "cellIdentifier"
    private let minimuminterspace: CGFloat = 2

    override func viewDidLoad() {
        super.viewDidLoad()

        setCollectionView()
    }
}

extension ViewController {
    fileprivate func setCollectionView() {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = minimuminterspace
        layout.minimumInteritemSpacing = minimuminterspace

        mycollectionview = UICollectionView(frame: .zero, collectionViewLayout: layout)
        mycollectionview.translatesAutoresizingMaskIntoConstraints = false
        mycollectionview.register(MyCell.self, forCellWithReuseIdentifier: cellidentifier)
        mycollectionview.dataSource = self
        mycollectionview.delegate = self
        mycollectionview.backgroundColor = .white
        mycollectionview.isPagingEnabled = true
        //        mycollectionview.contentInset = UIEdgeInsets(top: 0, left: minimuminterspace, bottom: 0, right: minimuminterspace)
        view.addSubview(mycollectionview)
        let collectionviewConstraints = [mycollectionview.leftAnchor.constraint(equalTo: view.leftAnchor, constant: minimuminterspace),
                                         mycollectionview.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
                                         mycollectionview.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -minimuminterspace),
                                         mycollectionview.heightAnchor.constraint(equalToConstant: UIScreen.main.bounds.height/4)]
        NSLayoutConstraint.activate(collectionviewConstraints)
    }
}

extension ViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellidentifier, for: indexPath) as! MyCell
        cell.index = indexPath.item
        cell.backgroundColor = .purple
        return cell
    }
}

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cellwidth = mycollectionview.frame.width/7 - minimuminterspace
        let cellheight = mycollectionview.frame.height
        return CGSize(width: cellwidth, height: cellheight)
    }
}



class MyCell: UICollectionViewCell {

    private var mainlabel: UILabel!
    override init(frame: CGRect) {
        super.init(frame: frame)
        setLabel()
    }

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

    var index: Int! {
        didSet {
            mainlabel.text = "\(index+1)"
        }
    }
}

extension MyCell {
    fileprivate func setLabel() {
        mainlabel = UILabel()
        mainlabel.translatesAutoresizingMaskIntoConstraints = false
        mainlabel.textColor = .white
        mainlabel.textAlignment = .center
        addSubview(mainlabel)

        let mainlabelConstraints = [mainlabel.centerXAnchor.constraint(equalTo: centerXAnchor),
                                    mainlabel.centerYAnchor.constraint(equalTo: centerYAnchor)]
        NSLayoutConstraint.activate(mainlabelConstraints)
    }
}

Примечание: если вы хотите показать 7 ячеек, то лучше включить pagination. Вы можете изменить высоту, как вам нужно. надеюсь, это кому-нибудь поможет. ура!

Answer 3

Реализация делегата макета collectionView.

И разделите ширину экрана на 7 частей, как показано ниже.

обратите внимание, что следующий код относится к ширине collectionView, учитывая, что для автоматического макета ширины collectionView задано значение поля экрана.

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
 return CGSize(width: collectionView.bounds.width/7, height:collectionView.bounds.height)
 }

Хотя этого будет достаточно для вашей потребности, вам также потребуется обработать подпредставления ячейки, чтобы они поместились в ячейке и правильно отобразили содержимое.

Answer 4

Шаг 1. Реализация делегата UICollectionViewDelegateFlowLayout

Шаг 2 - Добавить метод ниже

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {


return CGSize(width: (collectionViewSize/7) , height: 50  )
}

Шаг 3 - передать размер согласно вашему требованию