ios 如何根据设备屏幕大小调整集合视图单元格的大小？

How to resize the collection view cells according to device screen size?

提问by Chris Mikkelsen

I noticed that the cells would always follow the definition in size inspector. Even if I have already applied UICollectionViewDelegateFlowLayout.

我注意到单元格将始终遵循尺寸检查器中的定义。即使我已经应用了 UICollectionViewDelegateFlowLayout。

So that's how it looks. But I want the cells to rather look like how it was on a smaller iphone screen.

所以这就是它的样子。但我希望这些单元格看起来更像是在较小的 iphone 屏幕上的样子。

回答by Marat Ibragimov

Implement sizeForItemAtmethod according to the view's frame size

sizeForItemAt根据view的frame size实现方法

Swift

迅速

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

    let height = view.frame.size.height
    let width = view.frame.size.width
    // in case you you want the cell to be 40% of your controllers view
    return CGSize(width: width * 0.4, height: height * 0.4)
}

Objective C

目标 C

- (CGSize)collectionView:(UICollectionView *)collectionView 
              layout:(UICollectionViewLayout *)collectionViewLayout 
   sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

   CGFloat height = self.view.frame.size.height;
   CGFloat width  = self.view.frame.size.width;
   // in case you you want the cell to be 40% of your controllers view
   return CGSizeMake(width * 0.4, height * 0.4);
 }

回答by Βασ?λη? Δ.

Swift 4

斯威夫特 4

Multiply the collectionView's frame width/height in an implementation of the sizeForItemAtmethod.

在该sizeForItemAt方法的实现中乘以 collectionView 的框架宽度/高度。

class yourClassName: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {


    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: self.myCollectionView.frame.height / 6 * 5, height: self.myCollectionView.frame.height / 6 * 5)

        }


}

self.myCollectionViewis the reference from you collection view Item
it's important to implement UICollectionViewDelegateFlowLayout

self.myCollectionView是来自您的集合视图项的参考
，实现这一点很重要UICollectionViewDelegateFlowLayout

And because it will not fit another cell you will have only one row.

而且因为它不适合另一个单元格，所以您将只有一行。

回答by Daniel Dramond

You should try using a simple equation when setting your cell size instead of number like so:

在设置单元格大小而不是数字时，您应该尝试使用一个简单的公式，如下所示：

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

dividing it by 2 will mean that the cell always be half of the screens size, taking away and kind of minimumLineSpacing functions and/or and UIEdgeInset methods you have called. Hope this helps.

除以 2 意味着单元格总是屏幕大小的一半，带走和类型的 minimumLineSpacing 函数和/或和 UIEdgeInset 方法你已经调用。希望这可以帮助。

回答by Rohit Parsana

In swift 3, You can resize collection view cell as per the screen using collectionViewLayoutproperty.

在 swift 3 中，您可以使用collectionViewLayout属性根据屏幕调整集合视图单元格的大小。

I.e.

IE

   let numberOfCell = 3
   let cellSpecing = 10
   if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.itemSize = CGSize(width: (screenSize.width - (cellSpecing * (numberOfCell + 1))) / numberOfCell, height: cellHeight)
        layout.invalidateLayout()
    }

回答by SafoineMoncefAmine

in Swift 4.2

You can just extend your view controller from UICollectionViewDelegateFlowLayoutand implement this method:

在 Swift 4.2 中，

您只需扩展您的视图控制器UICollectionViewDelegateFlowLayout并实现此方法：

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

in this example I make the width of cells equal to the width of the CollectionViewyou can adapt it depends on your need.

在这个例子中，我将单元格的宽度设置为CollectionView您可以根据需要调整的宽度。

回答by CodeChanger

As per my experience you have to use UICollectionViewmethods to get device specific collection view cell size as per below methods you can get dynamic width & height of collection view cell.

根据我的经验，您必须UICollectionView按照以下方法使用方法来获取特定于设备的集合视图单元格大小，您可以获得集合视图单元格的动态宽度和高度。

// Dynamic width & height
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    float cellSize = collectionView.frame.size.width/values.count;
    return CGSizeMake(cellSize - 10, collectionView.frame.size.height);
}

//For top/bottom/left/right padding method
- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0, 0, 0, 1);
}



- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    float width = collectionView.frame.size.width;
    float spacing = [self collectionView:collectionView layout:collectionViewLayout minimumInteritemSpacingForSectionAtIndex:section];
    int numberOfCells = (width + spacing) / (cellSize + spacing);
    int inset = (width + spacing - numberOfCells * (cellSize + spacing) ) / 2;

    return UIEdgeInsetsMake(0, inset, 0, inset);
}
- (CGFloat)collectionView:(UICollectionView *) collectionView layout:(UICollectionViewLayout *)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger) section
{
    return 1.0;
}

Hope this will help you to design your cell based on device size.

希望这将帮助您根据设备尺寸设计您的手机。

回答by Karanveer Singh

Some of you might need to do this too: In the Storyboard, go to the collectionviewFlowLayout (yellow cube) inside the Collection View, then go to the Size Inspector, make sure the "Estimated Size" is set to "None".

有些人可能也需要这样做：在 Storyboard 中，转到 Collection View 中的 collectionviewFlowLayout（黄色立方体），然后转到 Size Inspector，确保“估计大小”设置为“无”。

回答by jignesh Vadadoriya

 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    let theWidth = (_screenSize.width - (15*3))/2    // it will generate 2 column 
    let theHeight = (_screenSize.height - (10*2))/3   // it will generate 3 Row 
    return CGSize(width: theWidth ,height: theHeight)
}