【问题标题】:Using interface builder to layout a scrolling view with images and text使用界面生成器来布局带有图像和文本的滚动视图
【发布时间】:2014-02-28 02:53:40
【问题描述】:

我的应用要求显示一堆信息,包括文本和图像。它会很长,因此需要可滚动才能访问所有内容。

我知道我可以通过以编程方式将不同的 UILabel、UIImage 等添加到 UIScrollView 来实现这一点。但这是一个概念证明,所以我正在寻找比必须计算出所需的所有定位和代码更快的东西。无论如何,信息都是静态的,不需要与代码交互。

有没有办法使用界面生成器来做到这一点(故事板或 xib 都可以)?

【问题讨论】:

  • 对文本使用 UITextView 和 UIImageView ?如果您希望图像也滚动,也可以使用带有静态单元格的 UITableView。

标签: ios objective-c uiscrollview interface-builder uistoryboard


【解决方案1】:

如果你只是想要一个快速的界面,你绝对可以这样做

1.>您可能需要知道滚动视图的长度,例如在我的情况下,我将其设置为 1568

2.> 然后我将所有适合第一个 568 像素视图的控件拖到滚动视图上并定位它们。

3.> 然后将该滚动视图的 Y 值更改为 - 500,这样您就可以看到滚动视图的其余部分,并将所需的所有内容放在那里。

4.> 完成所有控件后,记得将帧设置回 0,0,320,568

5.> 最后一步,在您的代码中设置 SCROLLVIEW.contentSize = CGSizeMake(320, 1568);

我仍然建议不要对所有这些值进行硬编码,但如果您正在寻找一种快速的方式来制作您的界面,希望能给您一些想法。

【讨论】:

    【解决方案2】:
    • 只需使用单个视图启动一个新项目,它将为其单个 ViewController 附带一个 xib 或故事板。

    • 通过将 UIView 拖入工作区并放置任意数量的标签、图像和 UI 元素来创建 UIView。

    • 打开 xib / storyboard 并将 UIScrollView 作为根 VC 的根视图拖入。将包含您的布局的视图拖到滚动视图中,使其成为仅滚动视图的子视图。

    完成(几乎)!

    如果此时启动应用,您会发现无法滚动。那是因为滚动视图“太愚蠢了”,无法自行调整其 contentSize 属性的大小。

    这里需要一些代码,但它只是一个很小的 ​​sn-p,你不需要再次触摸它:

    在 UIScrollView 上创建一个新类别。

    在您的类别实施中,执行以下操作:

    @implementation UIScrollView (MyHandyCategory)
    
    -(void)awakeFromNib {
    
       NSArray *subViews = [self subviews];
       UIView *contentView = [subViews objectAtIndex:0];
       [self setContentSize:contentView.frame.size];
    
    }
    
    @end
    

    完成(这次是真的)!这将检查您的滚动视图包含的视图的大小,并在初始化后调整 contentSize。您可以根据需要更改内容视图的大小,无需使用硬编码值甚至 Interface Builder 值!

    【讨论】:

      【解决方案3】:

      如果它只是概念验证,我将有一个 WebView 和一个您加载的本地 HTML 页面。简单易懂。

      【讨论】:

      • 概念验证被运送到另一个地方(附带硬件原型),并且在测试时可能没有连接到互联网。
      • 本地 HTML。就在应用程序包装器中。本地图片。
      【解决方案4】:

      我会建议 UICollectionView。这很简单。这里有一个很好的教程:

      http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-08-12
        • 2011-10-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多