CODEWITHSUNDEEP
customizationuicollectionview
Raz
Raz

Reputation: 2643

UICollectionView cell starting margin

I'm using a UICollectionView to display lottery numbers. I want the cells of the collectionView to start after a custom spacing, and in that spacing i would like to display a Header, or a custom UIView of some kind.

now my collection view looks like this: 123 456 789

i would like it to look like this:

view12 345678 9.....

i'm thinking about using a custom layout, but the UICollectionViewFlowLayout serves my purpose.

is there any solution for this problem?

Upvotes: 2

Views: 280

Answers (1)

Raz
Raz

Reputation: 2643

Solved.

since i only had to tweak the layout, just for a little bit, i decided to use a subclass of UICollectionViewFlowLayout. this way, i can "play" with the layout as i wish, change the frame of headers/footers etc.

my solution works like this:

.h

@interface MyUICollectionViewFlowLayout : UICollectionViewFlowLayout

@end

.m

#define HEADER_VIEW_WIDTH 132
#define HEADER_VIEW_HEIGHT 44

@interface MyUICollectionViewFlowLayout ()

@end

@implementation MyUICollectionViewFlowLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *allAttributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

    for (UICollectionViewLayoutAttributes *attribute in allAttributes) {

// if it's a cell, change it's layout to be right after the Header, and in the same line.
        if (attribute.representedElementCategory == UICollectionElementCategoryCell) {

            switch (attribute.indexPath.row) {
                case 0:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH, 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
                case 1:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH + attribute.frame.size.width , 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
                case 2:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH + attribute.frame.size.width * 2 , 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
                case 3:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH + attribute.frame.size.width * 3 , 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
                case 4:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH + attribute.frame.size.width * 4 , 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
                case 5:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH + attribute.frame.size.width * 5 , 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
                case 6:
                    attribute.frame = CGRectMake(HEADER_VIEW_WIDTH + attribute.frame.size.width * 6 , 0, attribute.frame.size.width, attribute.frame.size.height);
                    break;
            // if it's a header view, move it to the same line as all the cells.
        } else if (attribute.representedElementCategory == UICollectionElementCategorySupplementaryView){

            attribute.frame = CGRectMake(0, 0 , HEADER_VIEW_WIDTH, HEADER_VIEW_HEIGHT);
        }
    }
    return allAttributes;
}



@end

i guess that instead of switch/case, i could have written some algorithm, but i prefer to leave optimization issues for later.

Upvotes: 2

Related Questions