Сетка сетки с CollectionView в Swift

Ответ 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

Ответ 2

Результат:

1) Прежде всего, я думаю, вам нужно изменить, как вы смотрите на этот макет. Нет разделителей. Просто ячейки UICollectionView с интервалом между ячейками, пониженная непрозрачность и некоторое размытие.

Эти настройки дадут вам что-то близкое к вашему изображению, вы можете отредактировать его для своих нужд позже:

В раскадровке перейдите к вашему инспектору размера UICollectionView.
Min Spacing- > For Cells = 2, для линий = 2.
Секционные вставки- > Влево = 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. Эти изображения должны иметь одинаковую непрозрачность/фон с ячейками. Это сделает его похожим на изображение, которое вы хотите.
Надеюсь, мой ответ будет работать для вас. Удачи.

Ответ 3

Первое, что я хотел бы сказать, - это ваш все вышеизложенный результат, достигнутый UICollectionViewFlowLayout, который является макетом по умолчанию для UICollectionView.

UICollectionViewDelegateFlowLayout имеет все методы, которые могут выполнять ваши требования.

• FlowLayout имеет minimumLineSpacingForSectionAtIndex и minimumInteritemSpacingForSectionAtIndex для задания расстояния между ячейками (как по горизонтали, так и по вертикали).

• Не очень хороший способ предоставить ячейку в cellForItemAtIndexPath (например, вы отправляете ссылку ответа). Для этого flowLayout предоставляет делегат для калибровки ячейки sizeForItemAtIndexPath.

• О третьем вопросе, да, вы можете использовать UIVisualEffectView для цели размытия, но совместимы только после iOS 8 и, как я думаю, проблема с iPad2. Но для вашей проблемы я бы размыл каждую ячейку, а не сам collectionView (поскольку интервал между ячейками не размывается).

Ответ 4

Я ничего не могу найти о "разделителях" (линия, делящая все поля). Мне нравится, что он не касается границ экрана по горизонтали. Это сделано программно?

Да, похоже, что он отображается на layer. Вы должны прочитать Руководство по программированию 2D кварца, чтобы получить ручку рисования и работы со слоями.

Чтобы разделить пространство одинаково на всех устройствах (3 окна/кнопки по горизонтали), я нашел ответ на этот ответ. Это правильный подход?

Это был бы вариант, но не дал бы вам, чтобы разделители выглядели вам как на снимке экрана.

Я бы посмотрел на мою ячейку backgroundColor на clearColor, а затем установил UICollectionView свойство backgroundView в представление, содержащее ваши разделители и размытие эффект. Убедитесь, что для свойства UICollectionView backgroundColor установлено значение clearColor.

О третьем вопросе, да, вы можете использовать UIVisualEffectView для цели размытия, но совместимы только после iOS 8 и, по-моему, проблема с iPad2. Но для вашей проблемы я бы размыл каждую ячейку, а не сам collectionView (поскольку интервал между ячейками не размывается).

Если вы используете свойство backgroundView UICollectionView для обработки ваших разделителей и размытия, тогда ваши ячейки должны будут иметь свой набор backgroundColor для clearColor.

Вы должны отметить, что существует несколько способов сделать это, каждый из которых будет иметь свои собственные недостатки, выберите то, что работает для вас лучше всего.