UIScrollView带有居中的UIImageView,就像Photos app一样

Question

我想要一个带有图像内容视图的滚动视图.图像实际上是比屏幕大得多的地图.地图应该最初位于滚动视图的中心,就像将iPhone转为横向时照片应用程序中的照片一样.

我没有设法将地图放在中心,同时正确缩放和滚动.如果地图图像从屏幕顶部开始(纵向),则代码如下所示:

- (void)loadView {
    mapView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"map.jpg"]];
    CGFloat mapHeight = MAP_HEIGHT * SCREEN_WIDTH / MAP_WIDTH;
    mapView.frame = CGRectMake(0, 0, SCREEN_WIDTH, mapHeight);
    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    scrollView.delegate = self;
    scrollView.contentSize = mapView.frame.size;
    scrollView.maximumZoomScale = MAP_WIDTH / SCREEN_WIDTH;
    scrollView.minimumZoomScale = 1;
    [scrollView addSubview:mapView];
    self.view = scrollView;
}

当我将图像帧移动到中心时,图像仅从其帧的顶部向下生长.我尝试使用mapView变换,动态更改imageView的帧.到目前为止,对我来说没什么用.

Answer 1

此代码应适用于大多数iOS版本(并且已经过测试,可以在3.1版本上运行).

它基于Jonah的答案中提到的Apple 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;
}

Answer 2

这是我考虑的问题,因为它的解决方案就像苹果的照片应用程序一样.我一直在使用以下解决方案:

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

重新定位,但我不喜欢这个解决方案,因为在缩放完成后,它会反弹然后快速'跳'到中心,这是非常不性感的.如果你几乎完全相同的逻辑,但在这个委托函数中,结果证明:

-(void)scrollViewDidZoom:(UIScrollView *)pScrollView

它都从中心开始,当你缩小时它保持居中:

-(void)scrollViewDidZoom:(UIScrollView *)pScrollView {
CGRect innerFrame = imageView.frame;
CGRect scrollerBounds = pScrollView.bounds;

if ( ( innerFrame.size.width < scrollerBounds.size.width ) || ( innerFrame.size.height < scrollerBounds.size.height ) )
{
    CGFloat tempx = imageView.center.x - ( scrollerBounds.size.width / 2 );
    CGFloat tempy = imageView.center.y - ( scrollerBounds.size.height / 2 );
    CGPoint myScrollViewOffset = CGPointMake( tempx, tempy);

    pScrollView.contentOffset = myScrollViewOffset;

}

UIEdgeInsets anEdgeInset = { 0, 0, 0, 0};
if ( scrollerBounds.size.width > innerFrame.size.width )
{
    anEdgeInset.left = (scrollerBounds.size.width - innerFrame.size.width) / 2;
    anEdgeInset.right = -anEdgeInset.left;  // I don't know why this needs to be negative, but that's what works
}
if ( scrollerBounds.size.height > innerFrame.size.height )
{
    anEdgeInset.top = (scrollerBounds.size.height - innerFrame.size.height) / 2;
    anEdgeInset.bottom = -anEdgeInset.top;  // I don't know why this needs to be negative, but that's what works
}
pScrollView.contentInset = anEdgeInset;
}

UIImageView你正在使用'imageView'的地方.

Answer 3

Apple已向iphone开发者计划的所有成员发布了2010 WWDC会话视频.讨论的主题之一是他们如何创建照片应用程序!他们逐步构建一个非常相似的应用程序,并使所有代码免费提供.

它也不使用私有api.由于非公开协议,我不能在此处放置任何代码,但这里是示例代码下载的链接.您可能需要登录才能获得访问权限.

http://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?code=y&source=x&bundleID=20645

并且,这是iTunes WWDC页面的链接:

http://insideapple.apple.com/redir/cbx-cgi.do?v=2&la=en&lc=&a=kGSol9sgPHP%2BtlWtLp%2BEP%2FnxnZarjWJglPBZRHd3oDbACudP51JNGS8KlsFgxZto9X%2BTsnqSbeUSWX0doe%2Fzv%2FN5XV55%2FomsyfRgFBysOnIVggO%2Fn2p%2BiweDK%2F%2FmsIXj

Answer 4

我怀疑你需要设置UIScrollView的contentOffset。