Question

我想实现这个结果：

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

我找不到任何关于＆＃34;分隔符＆＃34; （划分所有框的行）。我喜欢它不会水平触摸屏幕边框。它是以编程方式完成的吗？
要在所有设备中平均分配空间（水平3个方框/按钮），我找到了这个答案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
}

我可以这样做吗？

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

Answer 1

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

在viewDidLoad你设置背景颜色如下：

self.collectionView.backgroundColor = UIColor.orangeColor()

我猜您可以设置这样的背景图片：

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

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

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

更新

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

创建一个来自UICollectionViewCell的子类的cocoa-touch类，然后将此代码添加到其中：

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中，更改以下代码行：

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

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

Answer 2

结果：

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

此设置会为您提供贴近您发布的图片的内容，您可以稍后根据需要进行编辑：

在故事板上，转到您的UICollectionView的尺寸检查员 Min Spacing-＆gt;对于Cells = 2，对于Lines = 2 Section Insets-＆gt;左= 7，右= 7。

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

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

Answer 3

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

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

flowLayout有minimumLineSpacingForSectionAtIndex和minimumInteritemSpacingForSectionAtIndex用于给出单元格之间的间距（水平和垂直）。
它不是cellForItemAtIndexPath中提供单元格框架的好方法（就像你提交答案链接一样）。为此，flowLayout提供了一个用于调整单元格sizeForItemAtIndexPath。
关于第三个问题，是的，您可以使用UIVisualEffectView进行bluring目的但仅在iOS 8之后兼容并且我认为iPad2有问题。但是对于你的问题，我会模糊每个单元而不是collectionView本身（因为单元格间距不模糊）。

Answer 4

我找不到任何关于“分隔符”（划分所有框的行）的内容。我喜欢它不会水平触摸屏幕边框。是以编程方式完成的吗？

是的，它似乎呈现在layer上。您应该阅读Quartz 2D Programming Guide以了解绘图和使用图层。

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

这是一个选项，但是不会从屏幕截图中看出你喜欢的分隔符。

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

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

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

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

Answer 5

我为自定义布局创建了这个meethod。您可以根据您的要求进行修改。

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
}

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

5 个答案:

更新