【问题标题】:Center UIImageView inside UIScrollView without contentInset?在没有 contentInset 的 UIScrollView 中居中 UIImageView?
【发布时间】:2010-11-29 13:13:57
【问题描述】:

我一直无法找到我遇到的这个问题的答案。

我在 UIScrollView 中有一个 UIImageView,我希望它的内容垂直居中。

目前,我能够做到这一点的唯一方法是根据 UIImageView 大小的高度设置滚动视图的 contentInset,但这不是一个完美的解决方案;它只是增加了 UIImageView 的大小,使 UIScrollView “认为”其内容更大,并将这些黑条添加到顶部。

我试图从以下方面寻求帮助:

UIScrollView with centered UIImageView, like Photos app

Center content of UIScrollView when smaller

但无法使用这些答案解决它。

【问题讨论】:

  • 我也在努力寻找解决这个问题的方法。似乎没有简单的方法可以使 scrollView 的内容居中。

标签: iphone uiscrollview uiimageview


【解决方案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;
}

【讨论】:

  • 我正在开发一个 iPad 应用程序,并希望将 DetailView 中显示的图像居中。我没有继承 UIScrollView,而是将此代码添加到 shouldAutorotateToInterfaceOrientation 中,现在它在横向和纵向模式下都能正常工作。感谢分享。
【解决方案2】:

您可以通过调用scrollRectToVisible:animated: 告诉 UIScrollView 滚动到特定视图

例子:

[myScrollView scrollRectToVisible:imageView.frame animated:YES];

要垂直居中,试试这个:

1) 向滚动视图添加一个与 contentSize 高度相同的空视图。

2) 将你的 UIImageView 添加到 emptyView 的中心

2) scrollRectToVisible 在这个 empty 视图上。

【讨论】:

    【解决方案3】:

    创建一个单独的uiview并添加居中的UIImageView,然后将视图添加到scrollview中

    UIView *view = [[UIVIew alloc] initWithFrame:<frame that will fill your scrollview>];
    CGRect frame = CGRectMake((view.size.width - IMAGE_WIDTH)/2, (view.size.height - IMAGE_HEIGHT)/2, IMAGE_WIDTH, IMAGE_HEIGHT);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
    imageView.image = [UIImage imageNamed:@"imageSized_IMAGE_WIDTH_by_IMAGE_HEIGHT.png"];
    [view addSubview:imageView];
    [imageView release];
    
    [scrollView addSubview:view];
    [view release];
    

    请注意,您需要将视图框架设置为滚动视图中所需的尺寸和位置。需要注意的重要部分是通过使用视图框架尺寸作为变量来使视图框架内的图像视图居中。

    【讨论】:

    • 这会起作用。问题是如果图像比 UIView 小,它将部分滚动到屏幕外。照片应用程序不允许这样做,它看起来好多了。
    • 是的,我在某些应用程序中看到了 Jonah 所说的问题。我见过的唯一能够正确执行我们想要的应用程序是 Apple 的 Photos.app :( 到目前为止,我只是将我的图像居中在 UIView 中,然后是图像大小+我需要让它居中的任何插图UIScroolView。不是最佳的,因为它在顶部和底部添加了黑条。如果我删除滚动条(如 Photos.app)看起来会更好
    【解决方案4】:

    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

    【讨论】:

      【解决方案5】:

      这会有所帮助

      myImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
      

      http://developer.apple.com/iPhone/library/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/autoresizingMask

      基本上你可以用 autoresizingMask 做的就是你可以在它的父视图中控制那个视图的“锚点”,就像你在使用 Interface Builder 一样

      【讨论】:

        【解决方案6】:

        contentInset 不应该改变 contentSize,它应该改变 contentOffset。

        尝试设置 contentSize,然后设置 contentInset。还要查看 UIScrollView 的背景颜色以及它背后可能显示的内容。我可以使用 setContentSize、setContentInset 和 addSubview 在 UIScrollView 中将 UIImageView 居中。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-01-06
          • 2010-10-22
          • 2012-03-02
          • 2010-10-12
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多