Skip to content

Each box when tapped has to be expanded from the same position #20

Description

@ambili

I wanted 3 boxes in a single row with the same size. When user taps on any box, it must get enlarged & the other items have to get aligned accordingly.

I am using the same code given in RFQuiltLayout, but made a few changes as given below.

- (void)viewDidLoad {
    .....
    RFQuiltLayout* layout = (id)[self.collectionView collectionViewLayout];
    layout.direction = UICollectionViewScrollDirectionVertical;
    layout.blockPixels = CGSizeMake(97,97);
    [self.collectionView reloadData];
}


- (void) setNumberArrays {

    [self.numbers removeAllObjects];
    [self.numberWidths removeAllObjects];
    [self.numberHeights removeAllObjects];

    for (NSInteger i = 0; i< [[self.entries objectAtIndex:0] count]; i++) {

        [self.numbers addObject:@(i)];
        if (i == AppDelegateObj.bigBoxIndex) {
            [self.numberWidths addObject:@(2)];
            [self.numberHeights addObject:@(2)];
        }
        else {
            [self.numberWidths addObject:@(1)];
            [self.numberHeights addObject:@(1)];
        }
    }
}


- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (AppDelegateObj.bigBoxIndex == -1) {
        AppDelegateObj.bigBoxIndex = indexPath.row;
    }
    else {
        AppDelegateObj.bigBoxIndex = -1;
    }
    [self setNumberArrays];
    if(!self.numbers.count || indexPath.row > self.numbers.count) return;
    if(isAnimating) return;
    isAnimating = YES;
    [self.collectionView performBatchUpdates:^{
        [self.collectionView reloadData];
    } completion:^(BOOL done) {
        isAnimating = NO;
    }];
}

screen shot 2014-04-29 at 4 37 53 pm

When user taps on a box, I am just reassigning the arrays 'self.numbers', 'self.numberWidths', 'self.numberHeights' & reloading the UICollectionView.

Suppose user taps on 2, as per the current code the below is happening,

screen shot 2014-04-29 at 4 38 10 pm

But I want the output to look like,

screen shot 2014-04-29 at 4 54 34 pm

Please suggest what is the change to be made on code. I tried a lot to change. But failed :(

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions