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

Question

我想实现这个结果:

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

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

2. 为了在所有设备中平均分配空间(水平3个盒子/按钮),我找到了这个答案答案.这是正确的方法吗？

3. 对于模糊效果,我找到了这个答案: 如何在UITableView中使用自适应segue实现UIVisualEffectView

对于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属性设置它.

如果我找到答案,我会更新.

更新:

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

创建一个子类来自的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
}

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

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

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

Answer 2

结果:

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

此设置将为您提供贴近您发布的图像的内容,您可以在以后编辑它以满足您的需求:

在故事板上转到您的UICollectionView的大小检查器.
Min Spacing-> For Cells = 2,For Lines = 2.
Section Insets-> Left = 7,Right = 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.这些图像应与细胞具有相同的不透明度/背景.这将使它看起来像你想要的图像.
我希望我的回答对你有用.祝好运.