UIScrollView paging with animation

2
votes

I have achieved the following using UIScrollView and enabled paging. enter image description here

I want the centre element of the scrollview to show little bigger than other elements. Need to increase/decrease the font of the text label as the scroll view is scrolling depending on its location.

I tried using transform but hard luck.

Code for adding the label's:

array = [[NSMutableArray alloc] init];

for(int i=0;i<10;i++){
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(x, 0, 150, 50)];
    label.text = [NSString stringWithFormat:@"ID - %d",i];
    label.textAlignment = UITextAlignmentCenter;
    x +=150;
    [self.scrollView addSubview:label];
    [array addObject:label];
}

[self.scrollView setContentSize:CGSizeMake(x, 50)];

Animation which I performed in ScollViewDidScroll

float position = label.center.x - scrollView.contentOffset.x;
float offset = 2.0 - (fabs(scrollView.center.x - position) * 1.0) / scrollView.center.x;
label.transform = CGAffineTransformIdentity;
label.transform = CGAffineTransformScale(label.transform,offset, offset);

CODE: What I have achieved till now:

https://www.dropbox.com/s/h2q4qvg3n4fi34f/ScrollViewPagingPeeking.zip?dl=0

2
iosobjective-cuiscrollviewscroll-paging
Doing an affine transform is the way to do this. Apply it to the label based on the cell position which you update the transform in scrollViewDidScroll: in your UIScrollViewDelegate. What was the problem you were having with that? - TheBasicMind
It used to animate from going big to small and not from small to big. It appeared like a pop immediately. I edited the answer. - Jugal Desai

2 Answers

0
votes

Don't use scrollview, used UICollectionView and Make collectionView cell bigger as screen size.

And Enable it's paging property than used it's delegate methods.

It's more preferable and efficient way of paging.

0
votes

It will work using a collection view. Return layout attributes where the transform scale is calculated according to the position. Subclass the UICollectionViewLayout you are using (probably UICollectionViewFlowLayout). To get the resizing based on position to work you should override a few of its methods thusly:

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *array = [super layoutAttributesForElementsInRect:rect];

    for (UICollectionViewLayoutAttributes *attributes in array)
    {
        [self updateLayoutAttributesForItemAtIndexPath:layoutAttributes];
    }

    return array;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *layoutAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];
    [self updateLayoutAttributesForItemAtIndexPath:layoutAttributes]; 
}

- (UICollectionViewLayoutAttributes *)updateLayoutAttributesScaleForPosition:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    // NOTE: Your code assigning an updated transform scale based on the cell position here

    return layoutAttributes;
}

Probably the main thing you were missing was the override to the shouldInvalidateLayoutForBoundsChange: method