UICollectionView celda personalizada con forma ovalada

Cómo generar celdas con forma de óvalo en UICollectionView utilizando una celda personalizada. A continuación se muestra la image que estoy tratando de lograr.

introduzca la descripción de la imagen aquí

No tengo idea de cómo lograr esto, he pasado por varios enlaces pero no tengo. Guía por favor Gracias

Actualización: Lo que probé es

 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { return CGSize(width: collectionView.frame.size.width/3.0 - 8, height: collectionView.frame.size.width/2.5[![enter image description here][2]][2] ) } 

Para este layout, pero no funciona según se requiera, se convierte en introduzca la descripción de la imagen aquí

TL; DR: (El ejemplo se puede encontrar aquí: https://github.com/JakubMazur/SO39160339 )


Uf, tendrás 3 problemas con esta vista:

  1. UICollectionView celdas UICollectionView que toman un text como una celda de longitud
  2. Alinear las celdas de la colecciónView al centro no de izquierda a derecha
  3. Esquinas networkingondeadas en subvista

Entonces empecemos:

1}

Esto es un poco complicado y no tan directo. Lo primero que debes hacer es dejar que el layout automático sea el mejor para ti. Así que diseñe la celda y la colecciónView en su storyboard y en el file xib y luego en su class de controller a esto:

 if let flowLayout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout { flowLayout.estimatedItemSize = CGSizeMake(1, 1) } 

La forma correcta de hacerlo es, por ejemplo, viewDidLoad func. Por supuesto, si anulará un layout, más tarde recordará sobre esto if .

Luego, para una label que desee tamaño de sí mismo, necesitará establecer:

 cell.titleLabel.prefernetworkingMaxLayoutWidth = 50 

El valor que usa en esos dos ejemplos no importa mucho. Si configura estimatedItemSize bajo, básicamente solicita el tamaño propio.

2)

Para hacer esto necesitarás anular la class de layout. Recomiendo utilizar esta solución https://stackoverflow.com/a/38254368/1317394 de la respuesta de @Alex Koshy.

3)

Esa parte es fácil. Simplemente agregue la subvista en la parte inferior de la celda personalizada y establezca el color de background de la vista de celda en transparente. Y agrega radio de esquina en la celda como esta:

 override func prepareForReuse() { self.roundedView.layer.cornerRadius = self.frame.size.height/2 } 

Aquí hay un efecto de salida: introduzca la descripción de la imagen aquí

Y aquí está el enlace al repository con este ejemplo:

https://github.com/JakubMazur/SO39160339

¡Disfrutar!

agregue el button imageview / (su elección) a su celda de vista de colección con un marco tan grande como toda la celda, haga que el background de la celda quede claro, agregue el color que desea al button y establezca la capa.cornerradius de su button exactamente como desea ( ex 1/2 de la altura del button es el círculo exacto).

si estás intentando hacer una celda en UIcollectionview, las esquinas networkingondean

entonces puedes probar esto

 func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell:CellCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath)as! CellCollectionViewCell cell.backgroundColor=UIColor.blueColor() cell.layer.cornerRadius=26 //try with different values untill u get the rounded corners cell.layer.masksToBounds=true cell.cellLabel.text=label[indexPath.row] return cell } 

Obtener un object celular

agregar subvista (vista de contenedor) en contentView

Establezca el radio del borde del contenedor (por ejemplo, 2)

Agregue otros elementos de interfaz de usuario dentro del contenedor.