วิธีการตั้งค่าความกว้างและความสูง UICollectionViewCell โดยทางโปรแกรม

Question 1

ฉันกำลังพยายามใช้ไฟล์CollectionView. เมื่อฉันใช้ Autolayout เซลล์ของฉันจะไม่เปลี่ยนขนาด แต่จะอยู่ในแนวเดียวกัน

ตอนนี้ฉันอยากจะเปลี่ยนขนาดเป็นเช่น

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

ฉันลองตั้งค่าในไฟล์ CellForItemAtIndexPath

collectionCell.size = size

มันไม่ได้ผล

มีวิธีที่จะบรรลุนี้หรือไม่?

แก้ไข :

ดูเหมือนว่าคำตอบจะเปลี่ยนความกว้างและความสูง CollectionView ของฉันเท่านั้นเอง มีความขัดแย้งในข้อ จำกัด หรือไม่? มีความคิดเกี่ยวกับเรื่องนี้ไหม

Question 2

ใช้วิธีนี้เพื่อตั้งค่าความกว้างของความสูงของเซลล์แบบกำหนดเอง

อย่าลืมเพิ่มโปรโตคอลนี้

UICollectionViewDelegate

UICollectionViewDataSource

UICollectionViewDelegateFlowLayout

หากคุณใช้swift 5หรือxcode 11 ขึ้นไปคุณต้องตั้งค่าEstimate Sizeเป็นnoneใช้สตอรี่บอร์ดเพื่อให้ทำงานได้อย่างถูกต้อง หากคุณไม่ตั้งค่าให้โค้ดต่ำกว่านั้นจะไม่ทำงานตามที่คาดไว้

Swift 4 หรือใหม่กว่า

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)
    }
}

วัตถุประสงค์ -C

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

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

Question 3

อย่าลืมเพิ่มโปรโตคอลUICollectionViewDelegateFlowLayoutใน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)
    }
}

Question 4

หากมีคนใช้สตอรีบอร์ดและแทนที่UICollectionViewDelegateFlowLayoutจากนั้นใน swift 5 และ Xcode 11 จะตั้งค่าEstimate size เป็น None

Question 5

ในที่สุดก็ได้คำตอบ คุณควรขยายUICollectionViewDelegateFlowLayout
สิ่งนี้ควรใช้กับคำตอบด้านบน

Question 6

รวดเร็ว 4.1

คุณมี 2 วิธีในการเปลี่ยนขนาดของ CollectionView
วิธีแรก -> เพิ่มโปรโตคอลนี้UICollectionViewDelegateFlowLayout
สำหรับในกรณีของฉันฉันต้องการแบ่งเซลล์ออกเป็น 3 ส่วนในหนึ่งบรรทัด ฉันทำโค้ดด้านล่างนี้

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
    }
}

วิธีที่สอง -> คุณไม่ต้องเพิ่มUICollectionViewDelegateFlowLayoutแต่คุณต้องเขียนโค้ดในฟังก์ชัน viewDidloadแทนเป็นโค้ดด้านล่าง

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
    }
}

ไม่ว่าคุณจะเขียนโค้ดเป็นวิธีแรกหรือวิธีที่สองคุณจะได้ผลลัพธ์เช่นเดียวกับด้านบน ฉันเขียนมัน มันได้ผลสำหรับฉัน

Question 7

อัตราส่วนขนาดตามขนาด iPhone:

นี่คือสิ่งที่คุณสามารถทำได้เพื่อให้เซลล์มีความกว้างและความสูงแตกต่างกันตามขนาด 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)
}

และบางทีคุณควรปิดใช้งานข้อ จำกัด AutoLayout บนเซลล์เพื่อให้คำตอบนี้ใช้งานได้

Question 8

มุมมองคอลเลกชันมีวัตถุโครงร่าง ในกรณีของคุณอาจเป็นเค้าโครงโฟลว์ ( UICollectionViewFlowLayout ) ตั้งค่าitemSizeคุณสมบัติของเค้าโครงโฟลว์

Question 9

ในSwift3และSwift4คุณสามารถเปลี่ยนขนาดเซลล์ได้โดยเพิ่มUICollectionViewDelegateFlowLayoutและใช้งานได้ดังนี้:

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

หรือหากสร้าง UICollectionView โดยทางโปรแกรมคุณสามารถทำได้ดังนี้:

    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)

Question 10

swift4 swift 4 ios collection view collectionview ตัวอย่าง xcode โค้ดล่าสุดตัวอย่างการทำงาน

เพิ่มสิ่งนี้ในส่วน Delegate ที่ด้านบน

UICollectionViewDelegateFlowLayout

และใช้ฟังก์ชันนี้

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)
}

///// ตัวอย่างโค้ดที่สมบูรณ์

สร้างในมุมมองคอลเลกชันและเซลล์มุมมองคอลเลกชันในกระดานเรื่องราวให้การอ้างอิงถึงคอลเลกชันเป็น
@IBOutlet อ่อนแอ var cvContent: UICollectionView!

วางสิ่งนี้ใน View controller

 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
    }
}

Question 11

ลองใช้วิธีการด้านล่าง

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

Question 12

Swift 5 แบบเป็นโปรแกรม

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)
    }()

Question 13

**Swift 5**
To make this work you have to do the following.

Add these protocols

 - UICollectionViewDelegate


 - UICollectionViewDataSource


 - UICollectionViewDelegateFlowLayout

Your code will then look like this

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)
    }
}

Now the final and crucial step to see this take effect is to go to your viedDidLoad function inside your Viewcontroller.

    override func viewDidLoad() {
        super.viewDidLoad()
        collection.dataSource = self // Add this
        collection.delegate = self // Add this

        // Do any additional setup after loading the view.
    }

Without telling your view which class the delegate is it won't work.

Question 14

# วิธีง่ายๆอย่างแน่นอน:

class YourCollection: UIViewController,
     UICollectionViewDelegate,
     UICollectionViewDataSource {

# คุณต้องเพิ่ม "UICollectionViewDelegateFlowLayout" หรือไม่มีการเติมข้อความอัตโนมัติ:

class YourCollection: UIViewController,
     UICollectionViewDelegate,
     UICollectionViewDataSource,
     UICollectionViewDelegateFlowLayout {

# พิมพ์ "sizeForItemAt ... ". เสร็จแล้ว!

class YourCollection: UIViewController,
     UICollectionViewDelegate,
     UICollectionViewDataSource,
     UICollectionViewDelegateFlowLayout {
 
     func collectionView(_ collectionView: UICollectionView,
      layout collectionViewLayout: UICollectionViewLayout,
      sizeForItemAt indexPath: IndexPath) -> CGSize {
     
     return CGSize(width: 37, height: 63)
}

แค่นั้นแหละ.

ตัวอย่างเช่นหากคุณต้องการให้ "แต่ละเซลล์เติมมุมมองคอลเลคชันทั้งหมด":

     guard let b = view.superview?.bounds else { .. }
     return CGSize(width: b.width, height: b.height)

Question 15

อีกวิธีหนึ่งคือการตั้งค่าโดยตรงในเค้าโครงโฟลว์

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

Question 16

ดังนั้นคุณต้องตั้งค่าจากสตอรีบอร์ดสำหรับแอตทริบิวต์สำหรับ collectionView ในส่วนของเซลล์โดยประมาณขนาดเป็นไม่มีและใน ViewController ของคุณคุณต้องมีวิธีการมอบหมายเพื่อใช้วิธีนี้: optional func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize

Question 17

ลองใช้วิธี UICollectionViewDelegateFlowLayout ใน Xcode 11 หรือใหม่กว่าคุณต้องตั้งค่าขนาดโดยประมาณเป็นไม่มีจากสตอรีบอร์ด

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: 
UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let padding: CGFloat =  170
    let collectionViewSize = advertCollectionView.frame.size.width - padding
    return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}

Question 18

วิธีง่ายๆ:

หากคุณต้องการขนาดคงที่ง่ายๆ :

class SizedCollectionView: UIICollectionView {
    override func common() {
        super.common()
        let l = UICollectionViewFlowLayout()
        l.itemSize = CGSize(width: 42, height: 42)
        collectionViewLayout = l
    }
}

นั่นคือทั้งหมดที่มีให้

ในกระดานเรื่องราวเพียงแค่เปลี่ยนคลาสจาก UICollectionView เป็น SizedCollectionView

แต่ !!!

สังเกตว่าคลาสพื้นฐานจะมี "UI" I "CollectionView" 'I' สำหรับ Initializer

การเพิ่ม initializer ลงในมุมมองคอลเลคชันไม่ใช่เรื่องง่าย นี่เป็นแนวทางทั่วไป:

มุมมองคอลเลกชัน ... ด้วยตัวเริ่มต้น:

import UIKit

class UIICollectionView: UICollectionView {
    private var commoned: Bool = false
    
    override func didMoveToWindow() {
        super.didMoveToWindow()
        if window != nil && !commoned {
            commoned = true
            common()
        }
    }
    
    internal func common() {
    }
}

ในโปรเจ็กต์ส่วนใหญ่คุณต้องมี "มุมมองคอลเลกชันที่มีตัวเริ่มต้น" ดังนั้นคุณอาจมีUIICollectionView(โปรดสังเกต I พิเศษสำหรับ Initializer!) ในโครงการของคุณ

Question 19

Swift 5, UICollectionView แบบเป็นโปรแกรมการตั้งค่าความกว้างและความสูงของเซลล์

// MARK: MyViewController

final class MyViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    private lazy var collectionViewLayout: UICollectionViewFlowLayout = {
        let layout = UICollectionViewFlowLayout()
        let spacing: CGFloat = 1
        let numOfColumns: CGFloat = 3
        let itemSize: CGFloat = (UIScreen.main.bounds.width - (numOfColumns - spacing) - 2) / 3
        layout.itemSize = CGSize(width: itemSize, height: itemSize)
        layout.minimumInteritemSpacing = spacing
        layout.minimumLineSpacing = spacing
        layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
        return layout
    }()
    
    private lazy var collectionView: UICollectionView = {
        let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: collectionViewLayout)
        collectionView.backgroundColor = .white
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        return collectionView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureCollectionView()
    }
    
    private func configureCollectionView() {
        view.addSubview(collectionView)
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
        ])
        collectionView.register(PhotoCell.self, forCellWithReuseIdentifier: "PhotoCell")
    }
    
    // MARK: UICollectionViewDataSource

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
        cell.backgroundColor = .red
        return cell
    }
    
}

// MARK: PhotoCell

final class PhotoCell: UICollectionViewCell {
    
    lazy var imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.masksToBounds = true
        return imageView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init?(coder:) not implemented")
    }
    
    func setupViews() {
        addSubview(imageView)
        NSLayoutConstraint.activate([
            topAnchor.constraint(equalTo: topAnchor),
            bottomAnchor.constraint(equalTo: bottomAnchor),
            leadingAnchor.constraint(equalTo: leadingAnchor),
            trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }
    
}

Question 20

ถ้าเช่นฉันคุณจะต้องให้รูปแบบการไหลของคุณเองได้itemSizeแบบไดนามิกปรับปรุงขึ้นอยู่กับมุมมองกว้างคอลเลกชันของคุณคุณควรแทนที่ของคุณUICollectionViewFlowLayout's prepare()วิธี นี่คือวิดีโอ WWDC ที่สาธิตเทคนิคนี้

class MyLayout: UICollectionViewFlowLayout {
    
    override func prepare() {
        super.prepare()
        
        guard let collectionView = collectionView else { return }
        
        itemSize = CGSize(width: ..., height: ...)
    }
    
}

Question 21

นี่คือเวอร์ชันของฉันค้นหาอัตราส่วนที่เหมาะสมของคุณเพื่อให้ได้ขนาดเซลล์ตามความต้องการของคุณ

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