iOS UIScrollView和缩放

In this tutorial, we’ll be implementing the UIScrollView along with the Zoom feature in our iOS Application.

在本教程中，我们将在iOS应用程序中实现UIScrollView以及Zoom功能。

iOS UIScrollView (iOS UIScrollView)

UIScrollView is used to show more content on the screen than it can be actually visible by having a virtual screen size which is larger than the current screen size.

通过使虚拟屏幕尺寸大于当前屏幕尺寸，UIScrollView用于在屏幕上显示的内容超出实际可见的内容。

UITableView is a subclass of UIScrollView and contains the scrollbars by default.

UITableView是UIScrollView的子类，默认情况下包含滚动条。

A UIScrollView can have only one single root child similar to Android.

一个UIScrollView只能有一个类似于Android的单个根子级。

Let’s get started with our XCode Single View Application project and learn UIScrollView through implementation.

让我们开始我们的XCode Single View Application项目，并通过实现学习UIScrollView。

配置项目 (Configuring Project)

添加UIScrollView (Adding the UIScrollView)

Open up the Main.storyboard and add a UIScrollView inside the ViewController and pin it to all the edges of the Parent View.

打开Main.storyboard，然后在ViewController中添加一个UIScrollView并将其固定到父视图的所有边缘。

So we’ve added the UIScrollView to the ViewController and set it to cover the edges excluding the Safe Area.

因此，我们已将UIScrollView添加到ViewController并将其设置为覆盖除安全区域以外的边缘。

添加内部视图 (Adding an Inner View)

We’ll add a View inside the ScrollView which would act as the root child. We will pin this to the edges and also set the equal height and equal widths constraint of the View to the parent view above.

我们将在ScrollView内添加一个View，它将作为根子级。 我们将其固定到边缘，还将View的等高和等宽约束设置为上方的父视图。

Next, we’ll change the priority of equal heights to LOW so that when we change the view height to something greater than the current screen, the new height would be taken and the screen would scroll.

接下来，我们将等高的优先级更改为LOW，以便当我们将视图高度更改为大于当前屏幕的高度时，将采用新的高度，并且屏幕将滚动。

Notice that changing the priority displays a dotted line for the height of the view.

请注意，更改优先级会在视图的高度上显示一条虚线。

Now let’s add elements inside this View.

现在，让我们在该视图中添加元素。

在内部视图中添加元素 (Adding Elements inside the Inner View)

Make sure you add the elements to the inner view and NOT on the ScrollView or Parent View directly.

确保将元素添加到内部视图，而不是直接在ScrollView或Parent View上。

We’ve added two rectangular views of fixed height. Now the ScrollView is ready with custom elements added.

我们添加了两个固定高度的矩形视图。 现在，ScrollView准备就绪，并添加了自定义元素。

Do you think that it would scroll?

您认为它会滚动吗？

NO!

没有！

Because the height of the inner view is still fit to the screen. We need to change the height of the inner view to a bigger value.

因为内部视图的高度仍适合屏幕。 我们需要将内部视图的高度更改为更大的值。

Let’s add a new constraint for the height as 1000.

让我们为高度添加一个新的约束，即1000。

We’ve added a few more View elements using the same techniques we’d used before.

我们使用以前使用的相同技术添加了一些View元素。

We’ve changed the height constraint of the Content View which is the root view inside the UIScrollView.

我们更改了内容视图的高度约束，该视图是UIScrollView内部的根视图。

Notice how the Content View height goes beyond the screen. We’ve moved a view to the below part as well by modifying the vertical spacing.

请注意“内容视图”高度如何超出屏幕。 我们还通过修改垂直间距将视图移至了下面的部分。

Let’s see how this looks in the simulator:

让我们看看它在模拟器中的外观：

Wow, we are able to scroll! Notice that the background color of the UIScrollView is white. We can change that and will do in the next section. In the following section, we shall use a UIImageView as the root child of the UIScrollView and see how it scrolls horizontally and vertically to showcase a large image.

哇，我们可以滚动！ 请注意，UIScrollView的背景颜色是白色。 我们可以更改它，并将在下一部分中进行。 在以下部分中，我们将使用UIImageView作为UIScrollView的根子级，并查看其如何水平和垂直滚动以展示大图像。

UIImageView上的UIScrollView (UIScrollView on UIImageView)

We will create a new ViewController for this part and connect it to the previous one using a Segue.

我们将为此部分创建一个新的ViewController，并使用Segue将其连接到上一个。

Create a new swift file to connect to this view controller. Following is our empty ImageViewController.swift.

创建一个新的swift文件以连接到该视图控制器。 以下是我们的空ImageViewController.swift。

import UIKit

class ImageViewController : ViewController{
    
    override func viewDidLoad() {
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        
    }
    
    override func didReceiveMemoryWarning() {
        
    }
    
}

Let’s add a UIScrollView inside this new ViewController and add a UIImageView inside the UIScrollView.

让我们在这个新的ViewController中添加一个UIScrollView，并在UIScrollView中添加一个UIImageView。

We set the UIImageView image dimensions to values beyond the screen dimensions.

我们将UIImageView图像尺寸设置为超出屏幕尺寸的值。

The ImageViewController.swift file is linked in the storyboard.

ImageViewController.swift文件在情节提要中链接。

Now in the ImageViewController.swift, we can change the background of the scrollView in the following way:

现在，在ImageViewController.swift中，我们可以通过以下方式更改scrollView的背景：

class ImageViewController : ViewController{
    
    @IBOutlet weak var scrollView: UIScrollView!
    override func viewDidLoad() {
        scrollView.backgroundColor = UIColor.black
    }
    
    override func viewDidAppear(_ animated: Bool) {
        
    }
    
    override func didReceiveMemoryWarning() {
        
    }
    
}

Note: You must connect the UIScrollView from storyboard to the ViewController using the IBOutlet drag and drop from the assistant editor.

注意：必须使用助手编辑器中的IBOutlet拖放将UIScrollView从情节提要板连接到ViewController。

Let’s look at the output in the simulator.

让我们看一下模拟器中的输出。

The scrollView background color is now black.

现在，scrollView背景色为黑色。

缩放和关闭 (Zoom and Offest)

We can change the contentOffset property in order to show a different part of the image in the scrollView when the image is first loaded.
Also to set the zoom we use the zoomScale, minimumZoomScale, maximumZoomScale properties.

我们可以更改contentOffset属性，以便在首次加载图像时在scrollView中显示图像的不同部分。
另外，要设置缩放比例，我们使用zoomScale，minimumZoomScale，maximumZoomScale属性。

import UIKit

class ImageViewController : ViewController, UIScrollViewDelegate{
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var scrollView: UIScrollView!
    override func viewDidLoad() {
        scrollView.backgroundColor = UIColor.black
        scrollView.delegate = self
        scrollView.contentOffset = CGPoint(x: 500, y: 200)
        
        scrollView.delegate = self
        scrollView.minimumZoomScale = 0.1
        scrollView.maximumZoomScale = 4.0
        scrollView.zoomScale = 1.0
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }
    
}

To zoom in the simulator press the option key and click and drag the mouse controls.

要放大模拟器，请按选项键，然后单击并拖动鼠标控件。

This brings an end to this tutorial. You can download the project files from the link below:

本教程到此结束。 您可以从下面的链接下载项目文件：

iOSUIScrollViewZoom iOSUIScrollViewZoom

翻译自: https://www.journaldev.com/22040/ios-uiscrollview-zoom