ios 使用情节提要在 CollectionView 中仅显示两列和多行

Display just two columns, with multiple rows in a CollectionView using storyboard

提问by rajesh s

I want to display only two cells in a row, no matter what the iPhone screen size is. Like,

无论 iPhone 屏幕大小如何，我只想连续显示两个单元格。喜欢，

My storyboard contains a UICollectionView,connected by constraints.

我的故事板包含一个UICollectionView, 由约束连接。

The storyboard settings for the UICollectionViewis,

的故事板设置UICollectionView是，

Now, when I run this in 6, 5s or below, only one cell appears in a row. The code I'd used is,

现在，当我在 6、5 秒或更短的时间内运行它时，只有一个单元格出现在一行中。我使用的代码是，

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [categoryImages count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    homePageCells *cell = (homePageCells *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cells" forIndexPath:indexPath];
    cell.categoryName.text = [categoryNames objectAtIndex:indexPath.row];

    return cell;
}

I tried detecting the screen size and assigning appropriate cell size programmatically using the code,

我尝试使用代码以编程方式检测屏幕大小并分配适当的单元格大小，

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


    CGSize result = [[UIScreen mainScreen] bounds].size;
    NSLog(@"%f",result.height);
    if(result.height == 480)
    {
        //Load 3.5 inch xib
        sizes =CGSizeMake(170.f, 170.f);
        NSLog(@"3gs");
    }
    else if(result.height == 568)
    {
        //Load 4 inch xib
        sizes =CGSizeMake(130.f, 130.f);
        NSLog(@"5s");

    }
    else if(result.height == 667.000000)
    {
        //Load 4.7 inch xib
        sizes =CGSizeMake(160.f, 160.f);
        NSLog(@"6");

    }
    else
    {
        NSLog(@"else");

        sizes =CGSizeMake(170.f, 165.f);

    }
    return sizes;
}

But I also know that this isn't the right way, so please give me a right way to handle this.

但我也知道这不是正确的方法，所以请给我一个正确的方法来处理这个问题。

回答by Rohit Pradhan

You need not check the device size because we can use the collectionViewwidth to calculate the width of the cell. Using the cell width you can calculate the height as per your need.

您不需要检查设备大小，因为我们可以使用collectionView宽度来计算单元格的宽度。使用单元格宽度，您可以根据需要计算高度。

One more thing: You need to use UICollectionViewDelegateFlowLayout& confirm the delegate & implement method below

还有一件事：你需要使用UICollectionViewDelegateFlowLayout&确认下面的委托&实现方法

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

   let padding: CGFloat =  50
   let collectionViewSize = collectionView.frame.size.width - padding

   return CGSizeMake(collectionViewSize/2, collectionViewSize/2)

}

Update: Swift 4.0

更新：Swift 4.0

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let padding: CGFloat =  50
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
    }

Note: I have answered the question considering the cells are square sized

注意：考虑到单元格是方形的，我已经回答了这个问题

回答by RubberDucky4444

Xcode 8: Swift 3

Xcode 8：斯威夫特 3

I know this is an older question, but I found a few issues with accepted answer.

我知道这是一个较旧的问题，但我发现了一些已接受答案的问题。

I had to use UICollectionViewDelegateFlowLayoutwhich is not CollectionViewFlowLayout

我不得不使用UICollectionViewDelegateFlowLayout这不是CollectionViewFlowLayout

Then

然后

In it 'Padding' is of type Int and when you try to subtract it from the variable collectionViewSize it throws an error because they are different types. Very easy to fix however.

其中 'Padding' 是 Int 类型，当您尝试从变量 collectionViewSize 中减去它时，它会抛出错误，因为它们是不同的类型。但是很容易修复。

I just added : CGFloat to the line

我刚刚添加： CGFloat 到该行

Finally, while there is probably a better way to do it, I had to match the padding by adjusting the collectionView leading and trailing constraints.

最后，虽然可能有更好的方法来做到这一点，但我必须通过调整 collectionView 前导和尾随约束来匹配填充。

So all in all this is what my code ended up looking like

总而言之，这就是我的代码最终的样子

extension LandingPageViewController: UICollectionViewDelegateFlowLayout {

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

    let padding: CGFloat = 25
    let collectionCellSize = collectionView.frame.size.width - padding

  return CGSize(width: collectionCellSize/2, height: collectionCellSize/2)

   }

}

回答by sanjeet

- (CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat padding = 50;
CGFloat cellSize = collectionView.frame.size.width - padding;
return CGSizeMake(cellSize / 2, cellSize / 2);
}