如何全屏显示图像的滚动视图？

Posted 2023-03-16

【中文标题】如何全屏显示图像的滚动视图？

【英文标题】：How to display a scrollview of images in fullscreen?

【发布时间】：2014-05-28 15:18:47

【问题描述】：

我实现了一种方法来显示具有黑色背景的全屏图像。我想将其调整为图像的滚动视图。当处于全屏模式时，用户应该能够滚动并转到下一个图像。我该怎么做？

这是全屏显示 UIImageView 的代码。它正在工作。

- (void)setUserPictImageViewZoomed:(BOOL)zoom animated:(BOOL)animated 

UIView *blackView = [self.view viewWithTag:128];
BOOL isZoomed = blackView != nil;

// if our current state (isZoomed) matches the desired state (zoomed), then we're done
if (isZoomed == zoom) return;
NSTimeInterval duration = (animated)? 0.3 : 0.0;

if (zoom) 
    blackView = [[UIView alloc] initWithFrame:self.view.frame];
    blackView.backgroundColor = [UIColor blackColor];
    blackView.tag = 128;
    blackView.alpha = 0.0;
    [self.view addSubview:blackView];

    UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(unzoom:)];
    [blackView addGestureRecognizer:tapGR];

    UIImageView *zoomImageView = [[UIImageView alloc] initWithImage:self.userPictImageView.image];
    zoomImageView.contentMode = UIViewContentModeScaleAspectFit;
    zoomImageView.tag = 129;
    zoomImageView.frame = [self.userPictImageView convertRect:self.userPictImageView.frame toView:blackView];
    [blackView addSubview:zoomImageView];
    [UIView animateWithDuration:duration animations:^
        zoomImageView.frame = blackView.bounds;
        blackView.alpha = 1.0;
    ];
 else 
    UIImageView *zoomImageView = (UIImageView *)[blackView viewWithTag:129];
    [UIView animateWithDuration:duration animations:^
        zoomImageView.frame = self.userPictImageView.frame;
        blackView.alpha = 0.0;
     completion:^(BOOL finished) 
        [blackView removeFromSuperview];
        ];
    
    

- (void)unzoom:(UIGestureRecognizer *)gr 
    [self setUserPictImageViewZoomed:NO animated:YES];

这是我的图像滚动视图

  //PageControl: as many pages as images
int numberOfPicts = [prize.pictures count];

if (numberOfPicts >1)
    [pageControl setNumberOfPages:numberOfPicts];
else
    pageControl.hidden = YES;

//Load images in the scrollview
for (int i = 0; i < numberOfPicts; i++) 
    //Create an imageView object in every 'page' of the scrollView.
    CGRect frame;
    frame.origin.x = self.imagesScrollView.frame.size.width * i;
    frame.origin.y = 0;
    frame.size = self.imagesScrollView.frame.size;

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
    imageView.contentMode = UIViewContentModeScaleAspectFit;

    imageView.image = [prize.pictures objectAtIndex:i];

    [self.imagesScrollView addSubview:imageView];


//Set the content size of the scrollview according to the total width of imageView objects.
self.imagesScrollView.contentSize = CGSizeMake(self.imagesScrollView.frame.size.width * numberOfPicts, self.imagesScrollView.frame.size.height);

【问题讨论】：

您面临的具体问题是什么？

我可以显示单个图像，但它不适用于图像的滚动视图。我正在寻找如何做到这一点的线索。

确保你在图片浏览上setUserInteraction:NO。除此之外，您的代码对我来说看起来不错。

【参考方案1】：

我猜你可以使用 UICollectionView，它会更有效。

【参考方案2】：

这样怎么样，添加一个选中的图片属性：

@property (strong, nonatomic) UIImageView *selected;

给滚动视图中的每个 imageView 一个点击 gr：

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapToZoom:)];
    [imageView addGestureRecognizer:tap];  // in a loop for each imageView in the scrollview

点击放大就可以了：

- (void)taptozoom:(UITapGestureRecognizer *)gr 
    self.selected = (UIImageView *)gr.view;
    [self setImageView:self.selected zoomed:YES animated:YES];

修改posted方法获取图片视图参数：

- (void)setImageView:(UIImageView *)imageView zoomed:(BOOL)zoom animated:(BOOL)animated 

    UIView *blackView = [self.view viewWithTag:128];
    BOOL isZoomed = blackView != nil;

    // if our current state (isZoomed) matches the desired state (zoomed), then we're done
    if (isZoomed == zoom) return;
    NSTimeInterval duration = (animated)? 0.3 : 0.0;
    CGRect unzoomedFrame = [imageView.superview convertRect:imageView.frame toView:blackView];

    if (zoom) 
        blackView = [[UIView alloc] initWithFrame:self.view.frame];
        blackView.backgroundColor = [UIColor blackColor];
        blackView.tag = 128;
        blackView.alpha = 0.0;
        [self.view addSubview:blackView];

        UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(unzoom:)];
        [blackView addGestureRecognizer:tapGR];

        UIImageView *zoomImageView = [[UIImageView alloc] initWithImage:imageView.image];
        zoomImageView.contentMode = UIViewContentModeScaleAspectFit;
        zoomImageView.tag = 129;
        zoomImageView.frame = unzoomedFrame;
        [blackView addSubview:zoomImageView];
        [UIView animateWithDuration:duration animations:^
            zoomImageView.frame = blackView.bounds;
            blackView.alpha = 1.0;
        ];
     else 
        UIImageView *zoomImageView = (UIImageView *)[blackView viewWithTag:129];
        [UIView animateWithDuration:duration animations:^
            zoomImageView.frame = unzoomedFrame;
            blackView.alpha = 0.0;
         completion:^(BOOL finished) 
            [blackView removeFromSuperview];
        ];
    

取消缩放点击可以通过选择的图像视图：

- (void)unzoom:(UIGestureRecognizer *)gr 
    [self setImageView:self.selected zoomed:NO animated:YES];

【讨论】：

我给每个 imageView 一个 tap gr，但是当我点击它们时，tapToZoom 方法永远不会被调用。我应该更改每个图像的 setUserInteraction 吗？ imagesScrollview 在一个垂直滚动视图中，里面有一个 uiView，都启用了用户交互。

是的。滚动视图默认设置了用户交互（因为手柄触摸），但图像视图需要 userInteraction = YES;

全屏时如何启用滚动？我想让用户滚动并全屏查看下一张图片。

缩放是否有效？至于滚动，这里同样的想法可以应用于缩放整个scrollView。这有点棘手，因为其中的图像需要重做布局。另一种方法是在 blackView 上构建一个新的滚动条，但我认为更好的方法可能是前者。

是的，缩放工作正常。我将尝试实现滚动。重做布局是什么意思？