UICollectionView oval shaped custom cell

Question

How to generate oval shaped cells in UICollectionView using custom cell. Below is the image that I am trying to achieve.

Have no idea about this how to achieve this, gone through several links but doesn't got. Please guide. Thanks

Update: What i tried is

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

For this design but it's not working as required, it becomes

so what is your problem exactly, just the size of the items ? — Wain, Aug 31 '16 at 13:57

score 16 · Answer 1 · edited May 23 '17 at 10:30

16

TL;DR: (Example can be found here: https://github.com/JakubMazur/SO39160339)

Phew, you will hit 3 problems with this view:

Self sizing UICollectionView cells that take a text as a cell lenght
Align collectionView cells to center not left-right
Rounded corners in subview

So let's start:

1)

This is a little bit tricky and not that much straightforward. The first thing you should do it let auto-layout do the trick for you. So design cell and collectionView in your storyboard and xib file and then in your controller class to this:

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

The right way to do is for example viewDidLoad func. Of course if you'll override an layout later remeber about this if.

Then for a label you want to self size you'll need to set:

cell.titleLabel.preferredMaxLayoutWidth = 50

The value you use in that two examples doesn't matter that much. If you set estimatedItemSize low, you basically asking for self sizing.

2)

For doing this you'll need to override the layout class. I highly recommend use this solution https://stackoverflow.com/a/38254368/1317394 from @Alex Koshy answer.

3)

That part is easy.Just add subview on the bottom on custom cell and set cell view background color to transparent. And add corner radius in cell like this:

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

}

Here is an output effect:

And here is the link to repository with this example:

https://github.com/JakubMazur/SO39160339

Enjoy!

edited May 23 '17 at 10:30

Community

1
1

answered Aug 31 '16 at 14:11

Jakub

12,851
13
75
130

It helped me a lot thanks but yet some issues not exactly what required, working on them. – iPhone 7 Sep 01 '16 at 13:41
Can you tell how to chnage the color of roundedView on selecting cell, i tried but doesn't work for me in didselectmethod – iPhone 7 Sep 01 '16 at 14:19
Just override `setSelected:` method in cell – Jakub Sep 01 '16 at 14:22
didn't got you and another issue is the spacing between cells setting it to 10 but not want to show three cells in a row.On 6 and 6+three rows are showing but much spacing than 10 and on 5 only two cells in a row. – iPhone 7 Sep 01 '16 at 14:38
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets { let marginStaticValue : CGFloat = 10 return UIEdgeInsetsMake(0, marginStaticValue, 0, marginStaticValue) } – iPhone 7 Sep 01 '16 at 14:39
Ok you need to figure out what you try to accomplish. They cannot auto fit to text and has always 3 cells in a row. What will happen if you put 3 very long words in the same line? Should they shrink with dot in the middle? Or leave two words in the line and move third to next line? Note that words will have different length – Jakub Sep 01 '16 at 14:43
that's ok i am talking about he space in between cells that is not reducing as i fixed it to 10. – iPhone 7 Sep 01 '16 at 14:54
can i set fixed space between cells irrespective of cell width. What's happening with me is cell width height fixed but space between cells is increasable but not decreasable – iPhone 7 Sep 01 '16 at 14:55
Yes, that's flowLayout fault. Implement second point from above list and this will do the trick. Flow layout align things to left and right. You need center alignment and then insets from storyboards will apply to center. – Jakub Sep 01 '16 at 14:57

score 1 · Answer 2 · answered Aug 26 '16 at 07:15

add imageview / button (your choice) to your collection view cell with frame as big as the whole cell, make the cell background clear add the color you want to the button and set layer.cornerradius of your button to exactly how oval u want (e.x 1/2 of button height is exact circle).

score 1 · Answer 3 · answered Aug 26 '16 at 08:32

1

if u are trying to make a cell in UIcollectionview, corners round

then u can try this

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
}

answered Aug 26 '16 at 08:32

Padamavthi

11
3

26 is ok for proper oval shape, but not getting 3 cells in a row – iPhone 7 Aug 26 '16 at 09:13
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath; In this method return collectionview.width/3...it will give you 3 cells in one row. Do this only if the label text size is fixed, what if the text size increases much more. – Arpit Dhamane Aug 26 '16 at 09:54
if u want three cells in a row go to our main.storyboard select collectionView in the viewController after selecting collectionView,go to size Inspector in the properties pane in size inspector set min cell spacing for calls and lines. adjust the value according to your requirement hope this might solve ur problem – Padamavthi Aug 26 '16 at 11:34

score -1 · Answer 4 · answered Aug 26 '16 at 07:20

-1

Get a cell object

add subview(container view) on contentView

Set border radius of container(e.g. 2)

Add other UI elements inside container.

answered Aug 26 '16 at 07:20

toofani

1,442
12
16

UICollectionView oval shaped custom cell

4 Answers4