在Swift中使用CollectionView进行网格布局 [英] Grid layout with CollectionView in Swift

问题描述

我想获得以下结果:

I would like to achieve this result:

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

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:

1. 我找不到关于分隔符"(分隔所有框的行)的任何内容.我喜欢它不会水平触摸屏幕边框.它是以编程方式完成的吗?

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?

要在所有设备中平均划分空间(水平3个框/按钮)，我找到了这个答案

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

对于模糊效果，我找到了以下答案:如何通过自适应选择在UITableView中实现UIVisualEffectView

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

对于TableView，它将是:

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
    }

推荐答案

在一个从UICollectionViewController子类化的文件中，像这样创建UICollectionViewController:

Create the UICollectionViewController like this in a file that sub-classes from 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))
}

在viewDidLoad中，您可以像这样设置背景颜色:

In the viewDidLoad you an set the background color like this:

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")!)

您发现的模糊效果看起来不错.我在弄清楚它如何工作方面遇到了麻烦.可能使用 backgroundView 属性.

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

如果找到答案，我会进行更新.

I'll update if I find the answer.

这里是一些可能会使单元格模糊的想法.

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

创建一个从UICollectionViewCell子类化的可可触摸类，然后将以下代码添加到其中:

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

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
}

然后在CollectionViewController文件的viewDidLoad中，更改以下代码行:

Then in the CollectionViewController file, in the viewDidLoad, change this line of code:

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

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

这篇关于在Swift中使用CollectionView进行网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！