是否可以像 Apple 的照片应用程序一样将 UIScrollView 中的内容居中？

Question

我已经被这个问题困扰了一段时间，似乎没有明确的答案。如果有人解决了这个问题，请告诉我。

我想在 a 中显示照片 UIScrollView 位于屏幕中央（图像可以是纵向或横向）。

我希望能够像照片应用程序中那样将图像缩放和平移到图像的边缘。

我尝试过改变 contentInset 在里面 viewDidEndZooming 方法，这样就可以解决问题，但是有一些小问题。

我也尝试过制作 imageView 大小相同 scrollView 并将图像居中。问题是当你缩放时，你可以滚动整个 imageView 并且部分图像可能会滚动到视图之外。

我在这里找到了类似的帖子并给出了最好的解决方法，但没有找到真正的答案：

UIScrollView 与居中的 UIImageView，如照片应用程序

Answer 1

下面是我能想出这个问题的最佳解决方案。诀窍是不断调整的的ImageView框架。我觉得这个作品比不断调整contentInsets或contentOffSets好得多。我不得不添加一些额外的代码，以适应纵向和横向的图像。

如果任何人都可以想出一个更好的办法来做到这一点，我很乐意听到这种说法。

下面的代码：

- (void) scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale {

CGSize screenSize = [[self view] bounds].size;

if (myScrollView.zoomScale <= initialZoom +0.01) //This resolves a problem with the code not working correctly when zooming all the way out.
{
    imageView.frame = [[self view] bounds];
    [myScrollView setZoomScale:myScrollView.zoomScale +0.01];
}

if (myScrollView.zoomScale > initialZoom)
{
    if (CGImageGetWidth(temporaryImage.CGImage) > CGImageGetHeight(temporaryImage.CGImage)) //If the image is wider than tall, do the following...
    {
            if (screenSize.height >= CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale]) //If the height of the screen is greater than the zoomed height of the image do the following...
            {
                    imageView.frame = CGRectMake(0, 0, 320*(myScrollView.zoomScale), 368);
            }
            if (screenSize.height < CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale]) //If the height of the screen is less than the zoomed height of the image do the following...
            {
                    imageView.frame = CGRectMake(0, 0, 320*(myScrollView.zoomScale), CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale]);
            }
    }
    if (CGImageGetWidth(temporaryImage.CGImage) < CGImageGetHeight(temporaryImage.CGImage)) //If the image is taller than wide, do the following...
    {
            CGFloat portraitHeight;
            if (CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale] < 368)
            { portraitHeight = 368;}
            else {portraitHeight = CGImageGetHeight(temporaryImage.CGImage) * [myScrollView zoomScale];}

            if (screenSize.width >= CGImageGetWidth(temporaryImage.CGImage) * [myScrollView zoomScale]) //If the width of the screen is greater than the zoomed width of the image do the following...
            {
                    imageView.frame = CGRectMake(0, 0, 320, portraitHeight);
            }
            if (screenSize.width < CGImageGetWidth (temporaryImage.CGImage) * [myScrollView zoomScale]) //If the width of the screen is less than the zoomed width of the image do the following...
            {
                    imageView.frame = CGRectMake(0, 0, CGImageGetWidth(temporaryImage.CGImage) * [myScrollView zoomScale], portraitHeight);
            }
    }
    [myScrollView setZoomScale:myScrollView.zoomScale -0.01];
}

下面是如何我计算最小缩放比例在viewDidLoad方法。

CGSize photoSize = [temporaryImage size];
CGSize screenSize = [[self view] bounds].size;

CGFloat widthRatio = screenSize.width / photoSize.width;
CGFloat heightRatio = screenSize.height / photoSize.height;
initialZoom = (widthRatio > heightRatio) ? heightRatio : widthRatio;
[myScrollView setMinimumZoomScale:initialZoom];
[myScrollView setZoomScale:initialZoom];
[myScrollView setMaximumZoomScale:3.0];

Answer 2

一种将内容居中的优雅方式 UISCrollView 这是。

添加一名观察员 内容大小 你的 UIScrollView, ，所以每次内容改变时都会调用这个方法......

[myScrollView addObserver:delegate 
               forKeyPath:@"contentSize"
                  options:(NSKeyValueObservingOptionNew) 
                  context:NULL];

现在在你的观察者方法上：

- (void)observeValueForKeyPath:(NSString *)keyPath   ofObject:(id)object   change:(NSDictionary *)change   context:(void *)context { 

    // Correct Object Class.
    UIScrollView *pointer = object;

    // Calculate Center.
    CGFloat topCorrect = ([pointer bounds].size.height - [pointer viewWithTag:100].bounds.size.height * [pointer zoomScale])  / 2.0 ;
            topCorrect = ( topCorrect < 0.0 ? 0.0 : topCorrect );

    topCorrect = topCorrect - (  pointer.frame.origin.y - imageGallery.frame.origin.y );

    // Apply Correct Center.
    pointer.center = CGPointMake(pointer.center.x,
                                 pointer.center.y + topCorrect ); }

• 你应该改变 [pointer viewWithTag:100]. 。替换您的内容视图 UIView.

  • 也改变 imageGallery 指向您的窗口大小。

每次尺寸改变时，这都会纠正内容的中心。

笔记： 该内容不能很好地工作的唯一方法是使用标准缩放功能 UIScrollView.

Answer 3

此代码应在iOS的大多数版本工作（和已经过测试对3.1工作向上）。

它基于用于PhotoScroll应用苹果WWDC代码。

添加的下面到您的UIScrollView的子类，并且与视图含有取代tileContainerView图像或砖：

- (void)layoutSubviews {
    [super layoutSubviews];

    // center the image as it becomes smaller than the size of the screen
    CGSize boundsSize = self.bounds.size;
    CGRect frameToCenter = tileContainerView.frame;

    // center horizontally
    if (frameToCenter.size.width < boundsSize.width)
        frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
    else
        frameToCenter.origin.x = 0;

    // center vertically
    if (frameToCenter.size.height < boundsSize.height)
        frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
    else
        frameToCenter.origin.y = 0;

    tileContainerView.frame = frameToCenter;
}