ios - source - uicollectionviewcell swift

Diseño de cuadrícula con CollectionView en Swift

Question

Me gustaría lograr este resultado:

Buscando alrededor descubrí que probablemente la forma de hacerlo es usando UICollectionView , así que no hay problema con eso, ya que hay muchos tutoriales y preguntas sobre Stack Overflow. Tengo 3 preguntas:

1. No puedo encontrar nada sobre los "separadores" (la línea que divide todas las casillas). Me gusta que no toque los bordes de la pantalla horizontalmente. ¿Se hace programáticamente?

2. Para dividir el espacio por igual en todos los dispositivos (3 cuadros / botones horizontalmente) encontré esta respuesta answer . ¿Es este el enfoque correcto?

3. Para el efecto Desenfoque encontré esta respuesta: Cómo implementar UIVisualEffectView en UITableView con segues adaptativos

Para un TableView sería:

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

¿Puedo hacer algo como esto?

     @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

Cree el UICollectionViewController como este en un archivo que subclases de 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))
}

En viewDidLoad puedes establecer el color de fondo de esta manera:

self.collectionView.backgroundColor = UIColor.orangeColor()

Supongo que puedes establecer una imagen de fondo como esta:

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

El efecto de desenfoque que encuentras se ve bien. Sin embargo, tengo problemas para descubrir cómo funcionaría. Probablemente lo configure usando la propiedad backgroundView .

Actualizaré si encuentro la respuesta.

Actualizar:

Aquí hay una idea de algo que podría funcionar para difuminar las celdas.

Cree una clase de toque de cocoa que subclases de UICollectionViewCell , luego agregue este código:

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
}

Luego, en el archivo CollectionViewController , en viewDidLoad , cambie esta línea de código:

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

Cambie UICollectionViewCell.self a <Name of CollectionViewCell file>.self

Answer 2

He creado este seminario para el diseño personalizado. Puede usar modificando según su solicitud.

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
}

Answer 3

Lo primero que me gustaría decir es que su resultado anterior se puede lograr desde UICollectionViewFlowLayout , que es el diseño predeterminado para UICollectionView.

UICollectionViewDelegateFlowLayout tiene todos los métodos que pueden cumplir sus requisitos.

1. El flowLayout tiene minimumLineSpacingForSectionAtIndex y minimumInteritemSpacingForSectionAtIndex para dar el espacio entre las celdas (tanto horizontal como verticalmente).

2. No es una buena forma de dar un marco de celda en cellForItemAtIndexPath (como cuando cellForItemAtIndexPath el enlace de respuesta). Para ese flujo, Layout proporciona un delegado para dimensionar el tamaño de la celda sizeForItemAtIndexPath .

3. Sobre la tercera pregunta, sí, puede usar UIVisualEffectView para fines aburridos, pero compatible solo después de iOS 8 y tiene problemas con iPad2, supongo. Pero para su problema, desenfocaría cada celda en lugar de collectionView (ya que el espacio entre celdas no es borroso).

Answer 4

Resultado:

1) Antes que nada, creo que debes cambiar la forma en que miras ese diseño. No hay separadores Solo UICollectionView Cells con espaciado entre celdas, opacidad reducida y algo de desenfoque.

Esta configuración le dará algo parecido a la imagen que publicó, puede editarla para sus necesidades más adelante:

En el guión gráfico vaya al inspector de tamaño de su UICollectionView.
Espaciado mínimo-> Para celdas = 2, para líneas = 2.
Sección Insets-> Left = 7, Right = 7.

2) Estoy usando esto en mi aplicación para dividir el espacio en partes iguales para 3 celdas. Cambiado para su configuración. Solo copie / pegue y estará listo para comenzar.

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

Y como último paso, coloque dos imágenes encima de CollectionView, a la izquierda y derecha de la vista, y haga anchuras iguales a 7 y alturas iguales a UICollectionView. Estas imágenes deben tener la misma opacidad / fondo con las celdas. Esto hará que se vea como la imagen que desea.
Espero que mi respuesta funcione para ti. Buena suerte.

Answer 5

No puedo encontrar nada sobre los "separadores" (la línea que divide todas las casillas). Me gusta que no toque los bordes de la pantalla horizontalmente. ¿Se hace programáticamente?

Sí, parece que se procesa en una layer . Debería leer la Guía de programación en 2D de Quartz para obtener una idea de cómo dibujar y trabajar con capas.

Para dividir el espacio por igual en todos los dispositivos (3 cuadros / botones horizontalmente) encontré esta respuesta respuesta. ¿Es este el enfoque correcto?

Esta sería una opción, pero no le daría el aspecto de separadores que desea de su captura de pantalla.

Me gustaría que BackgroundColor de mi vista de celda se establezca en clearColor y luego establezca la propiedad backgroundView de UICollectionView en una vista que contenga los separadores y el efecto de desenfoque. Asegúrese de que la propiedad backgroundColor de UICollectionView esté establecida en clearColor.

Sobre la tercera pregunta, sí, puede usar UIVisualEffectView para fines aburridos, pero compatible solo después de iOS 8 y tiene problemas con iPad2, supongo. Pero para su problema, desenfocaría cada celda en lugar de collectionView (ya que el espacio entre celdas no es borroso).

Si usa la propiedad backgroundView de UICollectionView para manejar sus separadores y desenfocar, sus celdas solo necesitarán tener su backgroundColor configurado en clearColor.

Debe tener en cuenta que hay más de una forma de hacerlo, cada forma tendrá sus propios inconvenientes, elija lo que mejor funcione para usted.