ios 在 Swift 中使用 CollectionView 进行网格布局

Grid layout with CollectionView in Swift

提问by Mat

I would like to achieve this result:

我想达到这个结果：

Searching around I found out that probably the way to do it is using UICollectionView, so no problem with that since there are many tutorials and questions on Stack Overflow. I have 3 questions:

四处搜索我发现可能的方法是使用UICollectionView，所以没问题，因为有很多关于 Stack Overflow 的教程和问题。我有3个问题：

1. I cannot find anything about the "separators" (the line that divides all the boxes). I like that it doesn't touch the screen borders horizontally. Is it done programmatically?

2. To divide the space equally in all devices (3 boxes/buttons horizontally) I found this answer answer. Is this the right approach?

3. For the Blur effect I found this answer: How to implement UIVisualEffectView in UITableView with adaptive segues

1. 我找不到有关“分隔符”（分隔所有框的线）的任何信息。我喜欢它不会水平接触屏幕边框。它是以编程方式完成的吗？

2. 为了在所有设备中平均分配空间（水平 3 个框/按钮），我找到了这个答案answer。这是正确的方法吗？

3. 对于模糊效果，我找到了这个答案： How to implement UIVisualEffectView in UITableView withAdaptive segues

For a TableViewit would be:

对于 aTableView它将是：

if (!UIAccessibilityIsReduceTransparencyEnabled()) {
tableView.backgroundColor = UIColor.clearColor()
let blurEffect = UIBlurEffect(style: .Light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
tableView.backgroundView = blurEffectView
}

Can I do something like this?

我可以做这样的事情吗？

     @IBOutlet var collectionView: UICollectionView!
    if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    collectionView.backgroundColor = UIColor.clearColor()
    let blurEffect = UIBlurEffect(style: .Light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    collectionView.backgroundView = blurEffectView
    }

采纳答案by Caleb Kleveter

Create the UICollectionViewControllerlike this in a file that sub-classes from UICollectionViewController:

UICollectionViewController在子类的文件中创建这样的UICollectionViewController：

convenience override init() {
    var layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.itemSize = CGSizeMake(<width>, <height>)
    // Setting the space between cells
    layout.minimumInteritemSpacing = <Space between columns>
    layout.minimumLineSpacing = <Space between rows>
    return (self.init(collectionViewLayout: layout))
}

In the viewDidLoadyou an set the background color like this:

在viewDidLoad你设置背景颜色是这样的：

self.collectionView.backgroundColor = UIColor.orangeColor()

My guess is you can set a background image like this:

我的猜测是您可以像这样设置背景图像：

self.collectionView?.backgroundColor = UIColor(patternImage: UIImage(named: "image.png")!)

The blur effect that you found looks good. I am having trouble figuring out how it would work though. Probably set it using the backgroundViewproperty.

您发现的模糊效果看起来不错。我无法弄清楚它是如何工作的。可能使用backgroundView属性设置它。

I'll update if I find the answer.

如果我找到答案，我会更新。

Update:

更新：

Here is an idea of something that might work for blurring the cells.

这是一个可能有助于模糊细胞的想法。

Create a cocoa-touch class that sub-classes from UICollectionViewCell, then add this code to it:

创建一个 cocoa-touch 类，它是从 的子类UICollectionViewCell，然后将以下代码添加到其中：

convenience override init(frame: CGRect) {
    self.init(frame: frame)
    var blurEffect: UIVisualEffect
    blurEffect = UIBlurEffect(style: .Light)
    var visualEffectView: UIVisualEffectView
    visualEffectView = UIVisualEffectView(effect: blurEffect)
    visualEffectView.frame = self.maskView!.bounds
    self.addSubview(visualEffectView)
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.maskView!.frame = self.contentView.bounds
}

Then in the CollectionViewControllerfile, in the viewDidLoad, change this line of code:

然后在CollectionViewController文件中viewDidLoad，更改这行代码：

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

Change UICollectionViewCell.selfto <Name of CollectionViewCell file>.self

更改UICollectionViewCell.self为<Name of CollectionViewCell file>.self

回答by enoktate

Result:

结果：

1) First of all, I think you need to change how you look at that layout. There are no separators. Just UICollectionView Cells with spacing between cells, lowered opacity and some blur.

1) 首先，我认为你需要改变你对布局的看法。没有分隔符。只是 UICollectionView 单元格，单元格之间有间距，降低了不透明度和一些模糊。

This settings will give you something close to image you posted, you can edit it for your needs later:

此设置将为您提供接近您发布的图像的内容，您可以稍后根据需要对其进行编辑：

On storyboard go to your UICollectionView's size inspector.
Min Spacing-> For Cells = 2, For Lines = 2.
Section Insets-> Left = 7, Right = 7.

在情节提要上转到 UICollectionView 的大小检查器。
最小间距 -> 对于单元格 = 2，对于线条 = 2。
截面插入 -> 左 = 7，右 = 7。

2) I'm using this on my app to divide space equally for 3 cells. Changed it for your settings. Just copy/paste and you are good to go.

2）我在我的应用程序上使用它来为 3 个单元格平均划分空间。为您的设置更改了它。只需复制/粘贴即可。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let screenSize: CGRect = UIScreen.mainScreen().bounds
        let screenWidth = screenSize.width
        return CGSize(width: (screenWidth/3)-6, height: (screenWidth/3)-6);
        }
    }

And as the last step put two images on top of CollectionView, to the left and right of the view and make widths equal to 7 and heights equal to UICollectionView. These images should have same opacity/background with cells. This will make it look like the image you want.
I hope my answer works for you. Good luck.

最后一步将两个图像放在 CollectionView 的顶部，在视图的左侧和右侧，并使宽度等于 7，高度等于 UICollectionView。这些图像应该与单元格具有相同的不透明度/背景。这将使它看起来像你想要的图像。
我希望我的回答对你有用。祝你好运。

回答by Kusal Shrestha

The first thing I would like to say is, your all above result can be achieved from UICollectionViewFlowLayout, Which is the default layout for UICollectionView.

我想说的第一件事是，上述所有结果都可以通过UICollectionViewFlowLayout实现，这是UICollectionView的默认布局。

UICollectionViewDelegateFlowLayouthas all of the methods that can fulfill your requirements.

UICollectionViewDelegateFlowLayout拥有可以满足您要求的所有方法。

1. The flowLayout has minimumLineSpacingForSectionAtIndexand minimumInteritemSpacingForSectionAtIndexfor giving the spacing between the cells(both horizontally and vertically).

2. Its not a good way of giving cell frame in cellForItemAtIndexPath(like you submit the answer link). For that flowLayout provides a delegate for sizing cell sizeForItemAtIndexPath.

3. About the third question, yes you can use UIVisualEffectViewfor bluring purpose but compatible for only after iOS 8 and has issue with iPad2 I guess. But for your problem I would blur each cell rather than collectionView itself(since cell spacing is not blur).

1. flowLayout 具有minimumLineSpacingForSectionAtIndex和minimumInteritemSpacingForSectionAtIndex用于给出单元格之间的间距（水平和垂直）。

2. 这不是提供单元格框架的好方法cellForItemAtIndexPath（就像您提交答案链接一样）。为此， flowLayout 提供了一个用于调整 cell 大小的委托sizeForItemAtIndexPath。

3. 关于第三个问题，是的，您可以UIVisualEffectView用于模糊目的，但仅在 iOS 8 之后兼容并且我猜 iPad2 有问题。但是对于您的问题，我会模糊每个单元格而不是 collectionView 本身（因为单元格间距不模糊）。

回答by Pete Hornsby

I cannot find anything about the "separators" (the line that divides all the boxes). I like that it doesn't touch the screen borders horizontally. Is it done programmatically?

我找不到有关“分隔符”（分隔所有框的线）的任何信息。我喜欢它不会水平接触屏幕边框。它是以编程方式完成的吗？

Yes, it looks like it is rendered on to a layer. You should read the Quartz 2D Programming Guide to get a handle on drawing and working with layers.

是的，它看起来像是渲染到一个层上。您应该阅读 Quartz 2D 编程指南以掌握绘制和使用图层的方法。

To divide the space equally in all devices (3 boxes/buttons horizontally) I found this answer answer. Is this the right approach?

为了在所有设备中平均分配空间（水平 3 个框/按钮），我找到了这个答案答案。这是正确的方法吗？

This would be an option, but would not give you the separators look you like from your screen shot.

这将是一个选项，但不会从屏幕截图中为您提供您喜欢的分隔符。

I would have my cell view's backgroundColor is set to clearColor, and then set the UICollectionView's backgroundView propertyto a view containing your separators and the blur effect. Make sure the UICollectionView's backgroundColor property is set to clearColor.

我会将我的单元格视图的 backgroundColor 设置为 clearColor，然后将 UICollectionView 的backgroundView 属性设置为包含分隔符和模糊效果的视图。确保 UICollectionView 的 backgroundColor 属性设置为 clearColor。

About the third question, yes you can use UIVisualEffectView for bluring purpose but compatible for only after iOS 8 and has issue with iPad2 I guess. But for your problem I would blur each cell rather than collectionView itself(since cell spacing is not blur).

关于第三个问题，是的，您可以将 UIVisualEffectView 用于模糊目的，但仅在 iOS 8 之后兼容，并且我猜 iPad2 有问题。但是对于您的问题，我会模糊每个单元格而不是 collectionView 本身（因为单元格间距不模糊）。

If you use the backgroundView property of the UICollectionView to handle your separators and blur then your cells would only need to have their backgroundColor set to clearColor.

如果您使用 UICollectionView 的 backgroundView 属性来处理分隔符和模糊，那么您的单元格只需要将它们的 backgroundColor 设置为 clearColor。

You should note that there is more than one way to do this, each way will have it's own drawbacks choose what works for you best.

您应该注意，有不止一种方法可以做到这一点，每种方法都有其自身的缺点，选择最适合您的方法。

回答by Manish Mahajan

I have created this meethod for custom layout. You can use by modifying according to your request.

我为自定义布局创建了这个方法。您可以根据您的要求修改使用。

func setCollectionLayout() {
    let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top:0,left:0,bottom:0,right:0)
    layout.itemSize = CGSize(width: UIScreen.main.bounds.size.width/2 - 1, height: 136)
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 1
    collectionView.collectionViewLayout = layout
}