ios 使用 Interface Builder 创建 UIScrollView 的步骤

steps for creating UIScrollView with Interface Builder

提问by steve8918

I'm in the midst of trying to use a UIScrollView and there appears to be some fundamental thing that I'm just not understanding.

我正在尝试使用 UIScrollView 并且似乎有一些我不理解的基本事情。

Let's say I want to use a UIScrollView in my iphone app. I have a View filled with buttons that is 320x700. Obviously, this is too big for the iPhone which is 320x480. So I know I have to use a UIScrollView. However, is this the order that I should be creating the objects

假设我想在我的 iphone 应用程序中使用 UIScrollView。我有一个充满 320x700 按钮的视图。显然，这对于 320x480 的 iPhone 来说太大了。所以我知道我必须使用 UIScrollView。但是，这是我应该创建对象的顺序吗

1. Create a UIScrollView that is 320x700 as the dimensions in "View"
2. Place all my buttons, etc, on this scroll view
3. In the viewDidLoad set the contentSize to 320x700
4. Set the delegate of the UIScrollView to the File Owner, and the view of the FileOwner to the UIScrollView
5. Reset the size of the View back to 320x480.

1. 创建一个 320x700 的 UIScrollView 作为“视图”中的尺寸
2. 将我所有的按钮等放在此滚动视图上
3. 在 viewDidLoad 中将 contentSize 设置为 320x700
4. 将 UIScrollView 的委托设置为 File Owner，将 FileOwner 的视图设置为 UIScrollView
5. 将视图的大小重置回 320x480。

Is this right?

这是正确的吗？

This works, but it doesn't make sense to me. I get that the View is supposed to be the canvas, where I add all the UI elements. I want the "canvas" of the iPhone app to be 320x700, and I want to be able to put my buttons, etc on this 320x700 canvas. But if I don't change the size of the UIScrollView back to 320x480, it won't scroll, because I need to set the content size of the UIScrollView larger than its size.

这有效，但对我来说没有意义。我知道 View 应该是画布，我在其中添加了所有 UI 元素。我希望 iPhone 应用程序的“画布”为 320x700，并且我希望能够将我的按钮等放在这个 320x700 的画布上。但是如果我不将 UIScrollView 的大小改回 320x480，它就不会滚动，因为我需要将 UIScrollView 的内容大小设置为大于其大小。

But if I set the size of the UIScrollView to 320x480, then I don't see the screen and the buttons between 480 and 700 in Interface Builder! So it seems like I'm supposed to make all my edits and add all my UI elements to the UIScrollView, and then set it back to the 320x480!

但是如果我将 UIScrollView 的大小设置为 320x480，那么我在 Interface Builder 中看不到屏幕和 480 到 700 之间的按钮！所以看起来我应该进行所有编辑并将所有 UI 元素添加到 UIScrollView，然后将其设置回 320x480！

Is there some other way to do this that makes more sense? What am I missing in my understanding of how this should work?

有没有其他更有意义的方法来做到这一点？我在理解这应该如何工作时缺少什么？

回答by rob mayoff

UPDATE

更新

I have posted another solution herewhich I think is simpler and better.

我在这里发布了另一个我认为更简单更好的解决方案。

ORIGINAL

原来的

Here's another way to do this that you might like better:

这是您可能更喜欢的另一种方法：

1. Set the File's Owner placeholder's custom class to your view controller subclass.
2. Create the UIScrollViewas a top-level object in your nib. Set its size to the screen size (320x460) or just turn on a status bar under "Simulated Metrics".
3. Connect the scroll view's delegateoutlet to File's Owner.
4. Set the File's Owner's viewoutlet to the scroll view.
5. Create a UIViewas anothertop-level object in your nib. This will be your content view.
6. Set the content view's size to 320x700.
7. Create a strong (or retain, if not using ARC) outlet named contentViewin your view controller (File's Owner) and connect it to the content view.
8. Put your buttons in the content view.

9. In your view controller's viewDidLoad, do this:

   - (void)viewDidLoad {
       [super viewDidLoad];
       [self.view addSubview:self.contentView];
       ((UIScrollView *)self.view).contentSize = self.contentView.frame.size;
   }
   

10. In your view controller's viewDidUnload, do this:

    - (void)viewDidUnload {
        self.contentView = nil;
        [super viewDidUnload];
    }
    

1. 将 File's Owner 占位符的自定义类设置为您的视图控制器子类。
2. UIScrollView在你的笔尖中创建一个顶级对象。将其大小设置为屏幕大小 (320x460) 或只需打开“模拟指标”下的状态栏。
3. 将滚动视图的delegate出口连接到文件所有者。
4. 将文件所有者的view出口设置为滚动视图。
5. 在你的笔尖中创建一个UIView作为另一个顶级对象。这将是您的内容视图。
6. 将内容视图的大小设置为 320x700。
7. 创建一个contentView在您的视图控制器（文件所有者）中命名的强（或保留，如果不使用 ARC）插座并将其连接到内容视图。
8. 将您的按钮放在内容视图中。

9. 在您的视图控制器中viewDidLoad，执行以下操作：

   - (void)viewDidLoad {
       [super viewDidLoad];
       [self.view addSubview:self.contentView];
       ((UIScrollView *)self.view).contentSize = self.contentView.frame.size;
   }
   

10. 在您的视图控制器中viewDidUnload，执行以下操作：

    - (void)viewDidUnload {
        self.contentView = nil;
        [super viewDidUnload];
    }
    

Full size

全尺寸

回答by Alex Stanciu

You are right, the View is the canvas where you add all the UI elements. Interface builder is kind of weird at first but you will get used to it, that is just the way it works.

您是对的，视图是您添加所有 UI 元素的画布。界面构建器起初有点奇怪，但你会习惯它，这就是它的工作方式。

You are getting stuck on the fact that you have to resize the ScrollView. You should think of it like this: The ScrollView has a frame size and a content size. The way it's built is that if the content size is larger than the frame size then it will scroll. You have to make the frame as big as you need to in the interface builder so you can position the elements that go inside. When you run the application you should resize the frame of the scroll to fit inside the iPhone's screen resolution. It doesn't make sense for your controls to have a frame bigger than the screen.

您遇到了必须调整 ScrollView 大小的事实。你应该这样想： ScrollView 有一个框架大小和一个内容大小。它的构建方式是，如果内容大小大于框架大小，那么它将滚动。您必须在界面构建器中使框架尽可能大，以便您可以放置​​里面的元素。当您运行应用程序时，您应该调整滚动框的大小以适应 iPhone 的屏幕分辨率。控件的边框大于屏幕是没有意义的。

--------------------------------------------
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         |                      |<------------------ iPhone Screen frame
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         |                      |         |<------- ScrollView Content size
|         |                      |         |
|         |                      |         |
|         |                      |<----------------- ScrollView Frame Size
|         |                      |         |
|         |                      |         |      
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         ------------------------         |
|                                          |
|                                          |
|                                          |
--------------------------------------------

I hope this representation will make it clearer how things should suppose to work.To put it some other way, the scroll frame is the hole trough you can see the content, if the whole is as big as the content then you have no need to scroll cos you can see it all.

我希望这种表示能让事情应该如何运作更清楚。换句话说，滚动框架是你可以看到内容的洞，如果整体和内容一样大，那么你就没有必要滚动cos你可以看到这一切。

I would suggest also trying to write the components in code without using IB to get a better understanding.

我还建议尝试在代码中编写组件而不使用 IB 以获得更好的理解。