UICollectionViewCell Border / Shadow

Question

When building an iPad App, how can you draw a border around a UICollectionViewCell?

More details: I implemented a class ProductCell which extends UICollectionViewCell. Now, I would like to assign some fancy details, e.g. a border, shadow, etc. However, when trying to use something like this here, Xcode tells me that the receiver type 'CALayer' is a forward declaration.

score 76 · Accepted Answer · edited Jul 26 '16 at 20:36

Just for a bit more implementation:

#import <QuartzCore/QuartzCore.h>

in your.m

Make sure your class implements

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;

as this is where the cell is setup.

You can then change cell.layer.background (only available once quartz is imported)

See below

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"pressieCell" forIndexPath:indexPath];
    //other cell setup here

    cell.layer.borderWidth=1.0f;
    cell.layer.borderColor=[UIColor blueColor].CGColor;

    return cell;
}

score 24 · Answer 2 · edited Jun 20 '20 at 09:12

Swift

Updated for Swift 3

Assuming you have your Collection View set up with the required methods, you can just write a few lines of code to add the border.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
    cell.myLabel.text = self.items[indexPath.item]
    cell.backgroundColor = UIColor.cyan 
    
    // add a border
    cell.layer.borderColor = UIColor.black.cgColor
    cell.layer.borderWidth = 1
    cell.layer.cornerRadius = 8 // optional
    
    return cell
}

Notes

It is not necessary to import QuartzCore in Swift if you have already imported UIKit.
If you also want to add shadow, then see this answer.

score 7 · Answer 3 · answered Oct 29 '12 at 12:16

7

You need to include the framework QuartzCore and import the header into your class:

#import <QuartzCore/QuartzCore.h>

answered Oct 29 '12 at 12:16

Mundi

78,879
17
112
137

score 2 · Answer 4 · answered Aug 10 '18 at 05:06

Swift 4

cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1

Add it in datasource method, after creating the cell

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath)
     cell.layer.borderColor = UIColor.black.cgColor
     cell.layer.borderWidth = 1
}

score 0 · Answer 5 · answered Jan 03 '20 at 07:42

0

I think it is better to add this config into your custom cell implementation, not in datasource delegate method.

cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8 // optional

answered Jan 03 '20 at 07:42

Victor Choy

3,730
23
32

UICollectionViewCell Border / Shadow

5 Answers5

Swift