SwiftScrollView
在iOS应用程序中,有时,无涯教程可能需要在屏幕上显示不适合的内容。为了显示这种类型的内容,无涯教程在应用程序中使用ScrollView。 ScrollView允许用户拖动内容区域。它是UIScrollView类的实例,该类继承了UIView。
class UIScrollView : UIView
ScrollView允许滚动和缩放其包含的视图。 tableview和collectionview是UIScrollView的子类,因此,这些类提供了一种显示比屏幕大的内容的好方法。在iOS应用程序中,无涯教程使用tableview显示垂直可滚动的内容,使用collectionview显示水平可滚动的内容。
请按照以下步骤使用界面构建器(main.storyboard)将滚动视图添加到界面。
- 在main.storyboard上搜索ScrollView并将结果拖动到ViewController。

- 定义ScrollView的自动布局规则(约束),如下图所示。

- 将ContentView添加到ScrollView并为内容视图定义自动布局规则。

给ScrollView的contentView约束余量0。无涯教程还需要使它们的高度和宽度相等。

如下图所示,将ContentView的优先级降低。这是此设置中最重要的步骤。否则,scrollview不会滚动。

无涯教程将在storyboard上使用ScrollView和ContentView。由于ScrollView可以在内容大小不适合iPhone屏幕的整个屏幕时工作。无涯教程在XCode的大小检查器中定义ViewController屏幕的大小。默认情况下,ViewController的模拟大小是固定的。但是,无涯教程需要使其自由变形,并使其高度大于下图所示的当前屏幕高度。

将UILabel添加到ScrollView的顶部,中心和底部,并在它们之间提供垂直间距,以测试ScrollView是否正常工作。

上面的设置将使滚动视图滚动以显示屏幕上的整个内容。

ScrollView属性
| SN | Property | Type | Description |
|---|---|---|---|
| 1 | Delegate | UIScrollViewDelegate | 它是ScrollView对象的委托。 |
| 2 | contentSize | CGSize | 它表示内容视图的大小。 |
| 3 | contentOffset | CGPoint | 它表示contentview的原点与ScrollView的原点之间的偏移点。 |
| 4 | adjustedContentOffset | UIEdgeInsets | 它表示内容插图和滚动视图的安全区域中的插图。 |
| 5 | frameLayoutGuide | UILayoutGuide | 基于frame布局。 |
| 6 | contentLayoutGuide | UILayoutGuide | 基于contentLayout布局。 |
| 7 | isScrollEnabled | Bool | 它表示一个布尔值,该值指示是否启用了滚动视图。 |
| 8 | isDirectionLockEnabled | Bool | 它表示布尔值,该布尔值指示滚动视图是否可以沿特定方向滚动。 |
| 9 | isPagingEnabled | Bool | 它是一个布尔值,表示是否随后在特定方向上启用了分页。 |
| 10 | scrollsToTop | Bool | 它是一个布尔值,它控制是否启用滚动到顶部的手势。 |
| 11 | bounces | Bool | 它是一个布尔值,表示滚动视图是否在内容边缘上反弹。 |
| 12 | alwaysBounceVertical | Bool | 它是一个布尔值,表示垂直滚动到达内容结尾时是否总是发生跳动。 |
| 13 | alwaysBounceHorizontal | Bool | 它是一个布尔值,表示在水平滚动到达内容结尾时是否总是发生跳动。 |
| 14 | isTracking | Bool | 这是一个布尔值,表示用户是否触摸内容以启动滚动 |
| 15 | isDragging | Bool | 它是一个布尔值,表示用户是否已开始滚动内容。 |
| 16 | isDecelerating | Bool | 这是一个布尔值,当用户停止拖动或抬起手指时,内容是否在滚动视图中移动。 |
| 17 | decelerationRate | UIScrollView.DelcelerationRate | 它是一个浮点值,用于确定用户抬起手指后的减速率。 |
| 18 | indicatorStyle | UIScrollView.IndicatorStyle | 它代表滚动指示器的样式。 |
| 19 | showsHorizontalScrollsIndicator | Bool | 它是一个布尔值,表示水平滚动指示器是否可见。 |
| 20 | showsVerticalScrollIndicator | Bool | 这是一个布尔值,表示垂直滚动指示器是否可见。 |
| 21 | refreshControl | UIRefreshControl | 它表示与滚动视图关联的刷新控件。 |
| 22 | canCancelContentTouches | Bool | 它是一个布尔值,可以控制。 |
| 23 | delayContentTouches | Bool | 这是一个布尔值,表示滚动视图是否延迟了触地手势的处理。 |
| 24 | directionPressGestureRecognizer | UIGestureRecognizer | 用于方向按钮按下的基础手势识别器。 |
| 25 | panGestureRecognizer | UIPanGestureRecongnizer | 平移手势的基础手势识别器。 |
| 26 | pinchGestureRecognizer | UIPinchGestureRecognizer | 捏手势的基础手势识别器。 |
| 27 | zoomScale | CGFloat | 它是一个浮点值,用于缩放滚动视图内容的缩放比例。 |
| 28 | maximumZoomScale | CGFloat | 它是最大浮点值,可以应用于滚动视图内容的缩放。 |
| 29 | minimumZoomScale | CGFloat | 它是最小的浮点值,可以应用于滚动视图内容的缩放。 |
| 30 | isZoomBouncing | Bool | 它是一个布尔值,表示缩放是否已超过关联的缩放限制。 |
| 31 | isZooming | Bool | 这是一个布尔值,表示内容视图当前是否正在缩放。 |
| 32 | bouncesZoom | Bool | 它是一个布尔值,表示当缩放比例超过最大或最小限制时,滚动视图是对内容缩放比例进行动画处理。 |
这是一个简单的示例,无涯教程将创建一个滚动视图和contentView。无涯教程将在滚动视图中创建两个UIViews以显示实际内容。要使滚动视图,可滚动,无涯教程需要将ViewController大小从固定更改为FreeForm,并在视图之间定义一些垂直间隔。
设置ScrollView,ContentView,UIViews和提交按钮的自动布局规则。
ScrollView的Autolayout规则

ContentView的Autolayout规则

ContentView的Autolayout规则

UserDetailView的Autolayout规则

main.storyboard

ViewController.swift
import UIKit class ViewController: UIViewController { @IBOutlet weak var adminDetailView: UIView! @IBOutlet weak var userDetailView: UIView! @IBOutlet weak var submitBtn: UIButton! override func viewDidLoad() { super.viewDidLoad() //加载视图后进行任何其他设置。 adminDetailView.layer.cornerRadius = 10 adminDetailView.layer.borderColor = UIColor.black.cgColor adminDetailView.layer.borderWidth = 1 adminDetailView.layer.shadowOffset = CGSize(width: 2, height: 2) adminDetailView.layer.shadowColor = UIColor.black.cgColor adminDetailView.layer.shadowRadius = 5 userDetailView.layer.cornerRadius = 10 userDetailView.layer.borderColor = UIColor.black.cgColor userDetailView.layer.borderWidth = 1 userDetailView.layer.shadowOffset = CGSize(width: 2, height: 2) userDetailView.layer.shadowColor = UIColor.black.cgColor userDetailView.layer.shadowRadius = 5 submitBtn.layer.cornerRadius = 10 submitBtn.layer.borderColor = UIColor.black.cgColor submitBtn.layer.shadowColor = UIColor.black.cgColor } }
输出:
祝学习愉快! (发现内容有误?请选中要编辑的内容 -> 右键 -> 修改 -> 提交!帮助我们改进教程质量)
精选教程推荐
👇 以下精选教程可能对您有帮助,拓展您的技术视野
暂无学习笔记,成为第一个分享的人吧!
您的笔记将帮助成千上万的学习者