swift - section - Cómo configurar UICollectionViewCell Width y Height mediante programación

uicollectionview supplementary view

Question

Estoy tratando de implementar un CollectionView . Cuando uso Autolayout, mis celdas no cambiarán el tamaño, sino su alineación.

Ahora preferiría cambiar sus tamaños a, p. Ej.

//var size = CGSize(width: self.view.frame.width/10, height: self.view.frame.width/10)

Traté de configurar en mi CellForItemAtIndexPath

collectionCell.size = size

aunque no funcionó.

¿Hay una manera de lograr esto?

editar :

Parece que las respuestas solo cambiarán el ancho y la altura de mi CollectionView. ¿Hay conflicto en las restricciones posibles? ¿Alguna idea sobre eso?

Answer 1

rápido 4.1

Tiene 2 formas de cambiar el tamaño de CollectionView.
Primera forma -> agregue este protocolo UICollectionViewDelegateFlowLayout
En mi caso, quiero dividir la celda en 3 partes en una línea. Hice este código a continuación

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource ,UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
            // In this function is the code you must implement to your code project if you want to change size of Collection view
            let width  = (view.frame.width-20)/3
            return CGSize(width: width, height: width)
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath)
        if let label = cell.viewWithTag(100) as? UILabel {
            label.text = collectionData[indexPath.row]
        }
        return cell
    }
}

Segunda forma -> no tiene que agregar UICollectionViewDelegateFlowLayout pero debe escribir algún código en la función viewDidload en su lugar como el código a continuación

class ViewController: UIViewController {
@IBOutlet weak var collectionView1: UICollectionView!
        var collectionData = ["1.", "2.", "3.", "4.", "5.", "6.", "7.", "8.", "9.", "10.", "11.", "12."]

    override func viewDidLoad() {
        super.viewDidLoad()
        let width = (view.frame.width-20)/3
        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.itemSize = CGSize(width: width, height: width) 
    }
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {


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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath)
        if let label = cell.viewWithTag(100) as? UILabel {
            label.text = collectionData[indexPath.row]
        }

        return cell
    }
}

Independientemente de lo que escriba un código como la primera o la segunda, obtendrá el mismo resultado que el anterior. Yo lo escribi. Funciono para mi

Answer 2

Swift 5 programáticamente

lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal

        //Provide Width and Height According to your need
        let cellWidth = UIScreen.main.bounds.width / 10
        let cellHeight = UIScreen.main.bounds.height / 10
        layout.itemSize = CGSize(width: cellWidth, height: cellHeight)

        //You can also provide estimated Height and Width
        layout.estimatedItemSize = CGSize(width: cellWidth, height: cellHeight)

        //For Setting the Spacing between cells
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0

        return UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    }()

Answer 3

Asegúrese de agregar el protocolo UICollectionViewDelegateFlowLayout en su declaración de class

class MyCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout
{
    //MARK: - UICollectionViewDelegateFlowLayout

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

Answer 4

Esta es mi versión, encuentre su proporción adecuada para obtener el tamaño de celda según sus requisitos.

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
return CGSizeMake(CGRectGetWidth(collectionView.frame)/4, CGRectGetHeight(collectionView.frame)/4); 
} 

Answer 5

Finalmente obtuve la respuesta. Debe extender UICollectionViewDelegateFlowLayout
Esto debería funcionar con las respuestas anteriores.

Answer 6

La vista de colección tiene un objeto de diseño . En su caso, probablemente sea un diseño de flujo ( UICollectionViewFlowLayout ). Establezca la propiedad itemSize del diseño de itemSize .

Answer 7

Otra forma es establecer el valor directamente en el diseño del flujo

    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = CGSize(width: size, height: size)

Answer 8

Prueba el siguiente método

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: 100.0, height: 100.0)
}

Answer 9

Use este método para establecer el ancho de altura de celda personalizado.

Asegúrese de agregar estos protocolos

UICollectionViewDelegate

UICollectionViewDataSource

UICollectionViewDelegateFlowLayout

C objetivo

@interface YourViewController : UIViewController<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(CGRectGetWidth(collectionView.frame), (CGRectGetHeight(collectionView.frame)));
}

Swift 4 o posterior

extension YourViewController: UICollectionViewDelegate {
    //Write Delegate Code Here
}

extension YourViewController: UICollectionViewDataSource {
    //Write DataSource Code Here
}

extension YourViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: screenWidth, height: screenWidth)
    }
}

Answer 10

en Swift3 y Swift4 puede cambiar el tamaño de celda agregando UICollectionViewDelegateFlowLayout e implementando así:

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

o si crea UICollectionView mediante programación, puede hacerlo así:

    let layout = UICollectionViewFlowLayout()
                    layout.scrollDirection = .horizontal //this is for direction
                    layout.minimumInteritemSpacing = 0 // this is for spacing between cells
                    layout.itemSize = CGSize(width: view.frame.width, height: view.frame.height) //this is for cell size
let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)

Answer 11

swift4 swift 4 ios vista de colección ejemplo de viewview xcode último código muestra de trabajo

Agregue esto en la sección Delegado de la parte superior

UICollectionViewDelegateFlowLayout

y usa esta función

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = (self.view.frame.size.width - 20) / 3 //some width
    let height = width * 1.5 //ratio
    return CGSize(width: width, height: height)
}

///// código completo de muestra

crear en la vista de colección y la celda de vista de colección en el guión gráfico dan referencia a la colección como
@IBOutlet débil var cvContent: UICollectionView!

pegue esto en el controlador de vista

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

var arrVeg = [String]()
var arrFruits = [String]()
var arrCurrent = [String]()

@IBOutlet weak var cvContent: UICollectionView!



override func viewDidLoad() {
    super.viewDidLoad()
    arrVeg = ["Carrot","Potato", "Tomato","Carrot","Potato", "Tomato","Carrot","Potato", "Tomato","Carrot","Potato", "Tomato"]

    arrVeg = ["Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange","Mango","Papaya","Orange"]


    arrCurrent = arrVeg
}
//MARK: - CollectionView



func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = (self.view.frame.size.width - 20) / 3 //some width
    let height = width * 1.5 //ratio
    return CGSize(width: width, height: height)
}

func numberOfSections(in collectionView: UICollectionView) -> Int {

    return 1
}

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


    return arrCurrent.count
}



func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ContentCollectionViewCell
    cell.backgroundColor =  UIColor.green
    return cell
}

}

Answer 12

Relación de tamaño según el tamaño del iPhone:

Esto es lo que puede hacer para tener un ancho y una altura diferentes para las celdas con respecto al tamaño del iPhone:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let width = (self.view.frame.size.width - 12 * 3) / 3 //some width
    let height = width * 1.5 //ratio
    return CGSize(width: width, height: height)
}

Y tal vez también debería deshabilitar sus restricciones de AutoLayout en la celda para que esta respuesta funcione.