CODEWITHSUNDEEP
iosobjective-ciphoneuicollectionview
Jassi
Jassi

Reputation: 557

Create a view using collection view in ios

I am trying to create a view similar to the attached image below. there is a variable sized width. I have marked text as black as there is a copyright issue.

Can anyone please look into the same and put some code so that it can help me somewhere.

Do I need to implement Custom Collection View Layout?

Please help me. CollectionView

Upvotes: 0

Views: 149

Answers (3)

Zahid
Zahid

Reputation: 562

This is response to your comment you need to add 3 extra lines of code in SGSStaggeredFlowLayout

NSArray* arr = [super layoutAttributesForElementsInRect:rect];

// THIS CODE SEPARATES INTO ROWS
NSMutableArray* rows = [NSMutableArray array];
NSMutableArray* currentRow = nil;
NSInteger currentIndex = 0;
BOOL nextIsNewRow = YES;
for (UICollectionViewLayoutAttributes* atts in arr) {
    if (nextIsNewRow) {
        nextIsNewRow = NO;
        if (currentRow) {
            [rows addObject:currentRow];
        }
        currentRow = [NSMutableArray array];
    }

    if (arr.count > currentIndex+1) {
        UICollectionViewLayoutAttributes* nextAtts = arr[currentIndex+1];
        if (nextAtts.frame.origin.y > atts.frame.origin.y) {
            nextIsNewRow = YES;
        }
    }

    [currentRow addObject:atts];
    currentIndex++;
}
if (![rows containsObject:currentRow]) {
    [rows addObject:currentRow];
}

It works like charm :)

Upvotes: 1

m_____ilk
m_____ilk

Reputation: 173

if you are trying to do this without any framework, you need to develop your own algroithm to calculate the width of each cell.

first, you need to calculate the width of text plus margin maybe border as well.

Second, calculate how many items are gonna be placed in given row. try to add 3 togther , if the total width excess the uicollection width, it means the third text should go to the next cell. if it is less than the collection width,it means you can add try to the 4th text.

third, caculate the width of each cell in each line base on how many cells are gonna placed on that line and their own width.

changing the uicollectionview width should not be diffculty since collectionviewcells are darw from left to right then top to bottom.

Upvotes: 0

Zahid
Zahid

Reputation: 562

You can set size for every item by impelmenting

UICollectionViewDelegateFlowLayout protocol, and calculate item width using even/odd formula. 

-(CGSize)collectionView:(UICollectionView *)collectionView
             layout:(UICollectionViewLayout *)collectionViewLayout
 sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *)collectionView.collectionViewLayout;

    NSInteger itemsPerRow = 0;
    NSInteger contentSizeWidth = 0;
    NSInteger num = indexPath.row;
    if (num % 2)
    {// odd
        itemsPerRow = 2;
    }
    else {
    // even
        itemsPerRow = 3;
    }

    contentSizeWidth = collectionView.frame.size.width-   (flowLayout.minimumInteritemSpacing*(itemsPerRow-1))-flowLayout.sectionInset.left-flowLayout.sectionInset.right;

    return CGSizeMake(contentSizeWidth/itemsPerRow, 100);
}

Upvotes: 1

Related Questions