在 UITableView 中滚动时缩放图像

Posted 2023-03-04

【中文标题】在 UITableView 中滚动时缩放图像

【英文标题】：Scaling of image on scroll in a UITableView

【发布时间】：2014-12-17 17:03:39

【问题描述】：

我正在尝试重现这种效果 -

在 UITableView 的 header 部分中有一个 UIImageView。当用户向下滚动时，图像的大小会减小并在导航栏下方滚动，而当用户向上滚动时，UIImageView 会展开并返回到原来的位置。

ios 版 Twitter 会对你的个人资料产生这种影响。

到目前为止，这就是我所知道的 - 代码将位于 scrollViewDidScroll 方法下，我将不得不使用 2 张图像，一张大一张小。我需要帮助弄清楚如何在方法内的这两个图像之间进行转换。

【问题讨论】：

我将图像放在 tableview 后面并在滚动时调整它的大小。 contentInset 和 contentOffset 都非常适合以最少的努力使这种效果发挥作用。

【参考方案1】：

如果你想实现 Twitter 滚动扩展 UIImageView，Yari D'areglia 的教程概述了如何做到这一点。你可能会发现它很有用。该链接包含一个演示所需效果的视频。

http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/

Alternative Source Code

#define IMAGE_VIEW_TAG 100
#define IMAGE_SCROLL_VIEW_TAG 101

    #pragma mark - ScrollView Delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView

        if(scrollView.tag == IMAGE_SCROLL_VIEW_TAG) return;

    UITableView * tv = (UITableView*) scrollView;
    UITableViewCell * cell = [tv cellForRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]];
    UIScrollView * svImage = (UIScrollView*)[cell viewWithTag:IMAGE_SCROLL_VIEW_TAG];
    CGRect frame = svImage.frame;
    frame.size.height =  MAX((_imageHeaderHeight-tv.contentOffset.y),0);
    frame.origin.y = tv.contentOffset.y;
    svImage.frame = frame;
    svImage.zoomScale = 1 + (abs(MIN(tv.contentOffset.y,0))/320.0f);


- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

        return [scrollView viewWithTag:IMAGE_VIEW_TAG];


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

        UITableViewCell * cell;

        NSLog(@"Row %@", indexPath);
        if(indexPath.row == 0)
                static NSString * headerId = @"headerCell";
                cell = [tableView dequeueReusableCellWithIdentifier:headerId];
                if(!cell) 

// create cell as it doesn't exist
                            cell = [[UITableViewCell alloc]initWithFrame:CGRectMake(0.0, 0.0, self.view.frame.size.width, _imageHeaderHeight)];
                            cell.backgroundColor = [UIColor clearColor];
                            cell.selectionStyle = UITableViewCellSelectionStyleNone;

                        // image view
                        UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0.0f, 0.0f, cell.contentView.frame.size.width, _imageHeaderHeight)];
                        imageView.contentMode = UIViewContentModeScaleAspectFill;
                        imageView.tag = IMAGE_VIEW_TAG;
                        imageView.clipsToBounds = YES;
                        imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

                        UIScrollView * svImage = [[UIScrollView alloc]initWithFrame:imageView.frame];
                        svImage.delegate = self;
                        svImage.userInteractionEnabled = NO;

                        [svImage addSubview:imageView];

                        // image
                        svImage.tag = IMAGE_SCROLL_VIEW_TAG;
                        svImage.backgroundColor = [UIColor blackColor];
                        svImage.zoomScale = 1.0f;
                        svImage.minimumZoomScale = 1.0f;
                        svImage.maximumZoomScale = 2.0f;
                        [cell.contentView addSubview:svImage];
                        UIImageView * headerInfo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];

                    [cell.contentView addSubview:headerInfo];

                    CGRect headerFrame = headerInfo.frame;
                    headerFrame.size.height = 149.0f;
                    headerFrame.origin.y = _imageHeaderHeight - 149.0f;
                    headerInfo.frame = headerFrame;

// cell exists - grab a reference to the image it displays
            UIImageView *imageView = (UIImageView*)[cell viewWithTag:IMAGE_VIEW_TAG];

// maybe change the imageView
return cell;

取自迈克尔·亨利：https://github.com/michaelhenry/MHYahooParallaxView