Unable to set background image for UICollectionView

Question

I have been trying to add custom background image to my app. I used the methods introduced here: How to fill background image of an UIView

These codes succeeded in both normal UIViewController and UITableViewController, but failed in UICollectionViewController. It is just all black.

As far as I understand, UITableViewController has the similar structure as UICollectionViewController. I compared the setting for these two controllers and they are all same (in the view section). How come the code works on one but not on the other one?

score 10 · Answer 1 · answered May 11 '16 at 15:40

The best way to implement this is to implement through code inside your viewDidLoad for the CollectionView

    let bgImage = UIImageView();
    bgImage.image = UIImage(named: "bg4");
    bgImage.contentMode = .ScaleToFill


    self.collectionView?.backgroundView = bgImage

score 4 · Answer 2 · answered Jul 22 '15 at 15:35

4

It is working on uicollectionview

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

answered Jul 22 '15 at 15:35

HaZe

53
2
4

score 1 · Answer 3 · answered Jul 05 '15 at 20:22

A friend of mine has given me the solution.

The trick is to set collection view background to clear instead of default. I have set all views to default so I thought it should be the same in collection view.

But how come only in collection view the default background is black while in others the default is clear? It confuses me.

score 1 · Answer 4 · edited Jul 26 '19 at 05:00

try this for set background image for UICollectionView Swift 4 or later

1. Add This extension in your code out of main class

extension UICollectionView {

    func setEmptyMessage(_ message: String,_ img:UIImage) {

        let image = UIImageView()
        image.contentMode = .scaleAspectFit
        image.image = img


        let messageLabel = UILabel()
        messageLabel.text = message
        messageLabel.font = UIFont.boldSystemFont(ofSize: 20)
        messageLabel.textColor = .gray
        messageLabel.numberOfLines = 0
        messageLabel.textAlignment = .center
        messageLabel.sizeToFit()

        let mainView = UIView()
        mainView.addSubview(image)
        mainView.addSubview(messageLabel)

        //Auto Layout
        image.translatesAutoresizingMaskIntoConstraints = false
        image.centerXAnchor.constraint(equalTo: mainView.centerXAnchor).isActive = true
        image.centerYAnchor.constraint(equalTo: mainView.centerYAnchor , constant: -40).isActive = true

        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.topAnchor.constraint(equalTo: image.bottomAnchor, constant: 20).isActive = true
        messageLabel.leadingAnchor.constraint(equalTo: mainView.leadingAnchor, constant: 10).isActive = true
        messageLabel.trailingAnchor.constraint(equalTo: mainView.trailingAnchor, constant: 10).isActive = true

        self.backgroundView = mainView
    }

    func restoreBackgroundView() {
        self.backgroundView = nil
    }
}

2. How to use

if Data.count == 0 {
  self.collectionView.setEmptyMessage("set the message", UIImage(named: "imageName"))
} else {
  self.collectionView.restoreBackgroundView()
}

score 0 · Answer 5 · answered Jul 05 '15 at 20:14

0

If you're assigning the background color to self.view, try assigning it to self.collectionView.

answered Jul 05 '15 at 20:14

rounak

9,217
3
42
59

Thank you for your response! A friend has given me a solution. – Clarke Xun Gong Jul 05 '15 at 20:20

score 0 · Answer 6 · edited Feb 19 '16 at 07:13

// Create a Programmatically UICollectionview in iOS And Set a UICollectionView Background Image


 self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];
    [_collectionView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"tiger"]]];
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];

    [self.view addSubview:_collectionView];

score 0 · Answer 7 · answered May 17 '18 at 09:39

0

This will work perfectly than the background color.

- (void)viewDidLoad
    {
     [super viewDidLoad];    
    self.collectionView.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"imageName"]];
    }

answered May 17 '18 at 09:39

Pranit

892
12
20

Unable to set background image for UICollectionView

7 Answers7