ios 将 ScrollView 添加到现有视图

Add a ScrollView to existing View

提问by Giovanni Grano

I'm developing a little app in Swift 2.0. I have a View with the following hierarchy:

我正在 Swift 2.0 中开发一个小应用程序。我有一个具有以下层次结构的视图：

Now, the elements placed in this view can't be displayed entirely in it, so I would like to use a ScrollViewin order to be able to scroll all the content.

现在，放置在此视图中的元素无法完全显示在其中，因此我想使用 aScrollView以便能够滚动所有内容。

How I can embed all the content of my Viewto a new ScrollView? Can I do this programmatically by code?

如何将我的所有内容嵌入View到一个新的ScrollView？我可以通过代码以编程方式执行此操作吗？

回答by ebby94

UPDATE: There's an easier way to do this which I didn't know when I posted this answer

更新：有一种更简单的方法可以做到这一点，我在发布此答案时不知道

1) Go to the viewcontroller on the storyboard and click on something in it and press Command + A. This will select all the elements in the view.

1) 转到情节提要上的视图控制器并单击其中的某些内容并按Command + A。这将选择视图中的所有元素。

2) Go to Editor -> Embed In -> Scroll View. This will embed all the labels, views, etc into a scrollView.

2) 前往Editor -> Embed In -> Scroll View。这会将所有标签、视图等嵌入到滚动视图中。

3) Select the scrollviewthat you just embedded. Press Controland drag it to the respective class file of the viewcontroller and create an outlet scrollView.

3）选择scrollview您刚刚嵌入的。按下Control并将其拖到 viewcontroller 的相应类文件中并创建一个 outlet scrollView。

4) Add this to your viewDidLoad()

4）将此添加到您的 viewDidLoad()

scrollView.contentSize = CGSizeMake(self.view.frame.width, self.view.frame.height+100)

Make sure the height for the contentSize is more than the size of your view.

确保contentSize的高度大于视图的大小。

ADDING SCROLLVIEW MANUALLY

手动添加滚动视图

1) Drag and drop a scrollviewfrom the Object Library onto your viewcontrollerin the storyboard and create an outlet to your program as 'scrollView'.

1) 将scrollview对象库中的a 拖放到您viewcontroller的故事板中，并为您的程序创建一个出口作为“滚动视图”。

2) Click on your viewcontrollerand go to the size inspector and note down the width and height.

2）单击您的viewcontroller并转到尺寸检查器并记下宽度和高度。

3) Click on your scrollviewand set the widthand heightthe same as the viewcontroller. and set the Xand Yvalues to 0

3）点击你的scrollview并设置width和height一样viewcontroller。并将X和Y值设置为 0

4) Click on the scrollViewand drag it a little bit to the side

4) 单击scrollView并将其拖到一边

5) Press Command+Ato select all the elements including scrollView. Press Commandand click on the scrollViewto deselect the ScrollView

5) 按Command+A选择包括 在内的所有元素scrollView。按下Command并单击scrollView取消选择ScrollView

6)You will have all the elements except the scrollViewselected now. Now click and drag them into the scrollView.

6）您将拥有除scrollView所选元素之外的所有元素。现在单击并将它们拖动到滚动视图中。

7) Now click on the scrollViewand set the Xand Yvalues to 0 from the Size Inspector.

7) 现在单击大小检查器中scrollView的X和 并将Y值设置为 0。

8) Add this to your viewDidLoad()

8) 将此添加到您的 viewDidLoad()

scrollView.contentSize = CGSizeMake(self.view.frame.width, self.view.frame.height+100)

Make sure the height for the contentSize is more than the size of your view.

确保 contentSize 的高度大于视图的大小。

That should create a scrollView for your view. Some of the elements might be in a slightly different position. You can easily fix them by moving them on your storyBoard.

这应该为您的视图创建一个滚动视图。某些元素的位置可能略有不同。您可以通过在故事板上移动它们来轻松修复它们。

回答by FredFlinstone

It can be done even simpeler than ebby94's answer.

它可以比ebby94的答案更简单。

1) Go to the viewcontroller on the storyboard and click on something in it and press Command + A. This will select all the elements in the view.

1) 转到情节提要上的视图控制器并单击其中的某些内容并按 Command + A。这将选择视图中的所有元素。

2) Go to Editor -> Embed In -> Scroll View. This will embed all the labels, views, etc into a scrollView.

2) 转到编辑器 -> 嵌入 -> 滚动视图。这会将所有标签、视图等嵌入到滚动视图中。

3) Set the constraints of the Scroll View to the View's edges.

3）将滚动视图的约束设置为视图的边缘。

And you're good to go! No need for an outlet.

一切顺利！不需要插座。

回答by SHISHIR

I had the same issue. I needed to add scrollview to the existing view.But my main container view has a lots of view inside it. And they were connected to each other. So i was afraid. Finally i did it. the process given below.

我遇到过同样的问题。我需要将滚动视图添加到现有视图中。但是我的主容器视图里面有很多视图。他们彼此相连。所以我很害怕。最后我做到了。下面给出的过程。

1. Duplicate your View (root View). For this first select the root view then press Command + D

2. Now delete all the child view view inside the root view

3. Now add a scroll view to the root view and set constraint to 0,0,0,0

4. Now add the duplicate(That you duplicated) view to the scroll view and set constraints to 0,0,0,,0 also set the height that you want.

5. Set width of the duplicate view by equal width with the root view.

6. Now select the viewController, go the size inspector, select free form size. Then set the height that you entered with duplicate view.

7. You have almost done. Now you have to connect the child view with outlet or action that you gave in the viewController class.

1. 复制您的视图（根视图）。为此，首先选择根视图，然后按 Command + D

2. 现在删除根视图中的所有子视图视图

3. 现在向根视图添加滚动视图并将约束设置为 0,0,0,0

4. 现在将副本（您复制的）视图添加到滚动视图并将约束设置为 0,0,0,,0 并设置您想要的高度。

5. 将复制视图的宽度设置为与根视图相等的宽度。

6. 现在选择 viewController，进入尺寸检查器，选择自由形式尺寸。然后设置您使用重复视图输入的高度。

7. 你已经快完成了。现在您必须将子视图与您在 viewController 类中提供的插座或动作连接起来。

Thats all.

就这样。

回答by Shanu Singh

If you are using Snapkit or creating programmatically.

如果您正在使用 Snapkit 或以编程方式创建。

class ScrollViewController: UIViewController {

lazy var contentViewSize = CGSize(width: self.view.frame.width, height: self.view.frame.height + 320) //Step One

lazy var scrollView : UIScrollView = {
    let view = UIScrollView(frame : .zero)
    view.frame = self.view.bounds
    view.contentInsetAdjustmentBehavior = .never
    view.contentSize = contentViewSize
    view.backgroundColor = .white
    return view
}()

lazy var containerView : UIView = {
    let view = UIView()
    view.frame.size = contentViewSize
    view.backgroundColor = .white
    return view
}()

override func viewDidLoad() {

    self.view.addSubview(scrollView)
    self.scrollView.addSubview(containerView)

    //Now Set Add your Constraints in the container View.

}
}

Above accepted answer explanation is enough to achieve the scroll view but I would prefer to create my complete application programatically and I don't use storyboards in my project. This code is for the folks who don't prefer to use storyboards.

以上接受的答案解释足以实现滚动视图，但我更愿意以编程方式创建我的完整应用程序，并且我不在我的项目中使用故事板。此代码适用于不喜欢使用故事板的人。

Explanation

解释

Step One:Determine your content Size. Here I am taking Exact width and adding 320 more to the height of the screen.

第一步：确定您的内容大小。在这里，我采用精确宽度并将屏幕高度增加 320。

Step Two:Create a scroll view and add desire behaviour of the scroll view. Now, the contentSize of the scroll view should be same as the contentSize you've created above at step one.

第二步：创建一个滚动视图并添加滚动视图的期望行为。现在，滚动视图的 contentSize 应该与您在第一步中创建的 contentSize 相同。

By Following Step one and Step Two. You Will be able to set a scroll view on the top of the view. But If you want to add a stretching behaviour then You should follow Step Three

遵循第一步和第二步。您将能够在视图顶部设置滚动视图。但是如果你想添加一个拉伸行为，那么你应该遵循第三步

Step Three:Create a container view of the same size of the contentView which you've calculated in step one and set it to the frame of the containerView. By doing this you'll be able to achieve stretching header and footer behaviour in your screen.

第三步：创建一个与第一步计算的 contentView 大小相同的容器视图，并将其设置为 containerView 的框架。通过这样做，您将能够在屏幕中实现拉伸页眉和页脚行为。

Please read make sure to add constraints in the same order as it is set.

请阅读确保以与设置相同的顺序添加约束。

Answer Edits are welcome.

回答 编辑欢迎。

回答by Meera Raveendran

Selecting all elements and embedding scroll view (editor->embed in->scrollView) works fine.

选择所有元素并嵌入滚动视图（editor->embed in->scrollView）工作正常。

Adding constraint is much more easy by selecting the constraint warning (Add Missing Constraints).

通过选择约束警告（添加缺少的约束），添加约束要容易得多。

回答by Ranjeet Raushan

It's simple. Command A and Command X to specific view controller in StoryBoard. After that take scroll view. On scroll view, just take one view with view controller view height and width equal to scroll View width. Again do Command V and rearrange the constraints. Your problem will be solved.

这很简单。命令 A 和命令 X 到 StoryBoard 中的特定视图控制器。之后采取滚动视图。在滚动视图上，只需取一个视图控制器视图高度和宽度等于滚动视图宽度的视图。再次执行命令 V 并重新排列约束。您的问题将得到解决。