Prince Agrawal Prince Agrawal - 1 year ago 103
iOS Question

UICollectionViewCell in Circular shape

Is it possible to create custom UICollectionViewCell in circular shape?

Why I need this?

I am trying to create custom color picker. I want to put some default color in each CollectionViewCell. These color are dynamic. That means I will be changing colors filled in cells.

What I have tried

1. I kept circle shaped png images in cells. But will have to change images if i want to change colors.

2. I kept circle shaped image transparent inside (in circle area). Then I changed Background color of cell. Failed as I will be changing Background image of collectionView.

3. I kept circle shaped image completely transparent except the boundary. Then I changed Background color of cell. Failed...

Help me..

Answer Source

Don't use a circular image. You can make any square view circular by adjusting the layer's cornerRadius property to half of the edge. So, if your cell is 100x100, set its corner radius to 50.

You can do this in your collection view data source (cellForItem...) or in the applyLayoutAttributes: method of your cell subclass.

For more flexibility use a CAShapeLayer added to the background view of the cell and change its fill colour. This way the coloured area can be any shape you like, and you can add shadow effects and animations to it.