UIScrollView －滚动视图

最新推荐文章于 2024-04-06 09:47:57 发布

go_fishing

最新推荐文章于 2024-04-06 09:47:57 发布

阅读量545

点赞数

CC 4.0 BY-SA版权

分类专栏： IOS-UI 基础

本文链接：https://blog.youkuaiyun.com/go_fishing/article/details/50932694

IOS-UI 基础专栏收录该内容

9 篇文章

订阅专栏

UIScrollView(滚动视图)用于显示内容尺寸大于屏幕尺寸的视图。本文详细介绍了UIScrollView的主要功能，包括通过拖拽手势查看内容、通过捏合手势放大或缩小内容、滚动原理及内部处理机制。此外，还介绍了UIScrollView的相关属性和方法，以及如何实现缩放和平移手势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

UIScrollView(滚动视图)用于显示内容尺寸大于屏幕尺寸的视图。滚动视图有两个主要作用：

让用户通过拖拽手势来查看想看到的内容
通过捏合手势来放大或缩小查看的内容

滚动原理

在滚动过程当中,其实是在修改滚动内容的原点坐标。

这里写图片描述

当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器, 假如在计时器到点后,没有发生手指移动事件,那么, scroll view发送tracking events到被点击的subview, 假如在计时器到点前,发生了移动事件, 那么 scroll view 取消tracking自己发生滚动。

子类可以重载touchesShouldBegin:withEvent:inContentView:决定自己是否接收touch事件pagingEnabled当值是true,会自动滚动到subview的边界,默认是false 。touchesShouldCancelInContentView: 开始发送tracking messages消息给subview的时候, 调用这个方法,决定是否发送tracking messages消息到subview, 假如返回false,发送, true则不发送
假如 canCancelContentTouches属性是true,则不调用这个方法
来影响如何处理滚动手势

scroll view还处理缩放和平移手势要实现缩放和平移,必须实现委托｀viewForZoomingInScrollView:
scrollViewDidEndZooming:withView:atScale:
两个方法,另外 maximumZoomScale和minimumZoomScale两个属性要不一样

属性及方法

内容显示相关

setContentOffset(_:animated):是否以动画方式设置滚动内容的偏移量。
contentOffSet:滚动内容原点相对于scroll view原点的偏移量（即：滚动内容的位置）默认为CGPointZero。
contentSize:滚动内容区域的大小默认为CGPointZero，此属性必须设置。
contentInset:在滚动视图的内容区域插入边距，大小默认为UIEdgeInsetsZero，设置此属性可增大滚动范围。

管理滚动

scrollEnabled: Bool
-是否能滚动，默认为true。
directionalLockEnabled: Bool
- 默认是 false，可以在垂直和水平方向同时运动。当值是 true 时，假如一开始是垂直或者是水平运动，那么接下来会锁定另外一个方向的滚动。假如一开始是对角方向滚动，则不会禁止某个方向。
scrollsToTop: Bool
-滚动到顶部的手势是否可用，默认为true，当用户点击顶部状态栏时，会滚动内容到顶部；如果设置为false，或则通过deletage的方法:scrollViewShouldScrollToTop:返回false，或者内容区域已经在顶部，那么将不会滚动。
pagingEnabled: Bool
-是否启用分页，默认为false。如果设置为true，那么等滚动的时候讲义scroll view的bounds的倍数来进行。类似把图片分成了多个页。
bounces: Bool
-是否有弹性效果，默认是 true，就是滚动超过边界会有反弹回来的效果。假如是 false，那么滚动到达边界会立刻停止。
alwaysBounceVertical: Bool
-垂直方向是否一值有弹性效果，默认为false。如果设置为true，并且属性bounces为true，那么当垂直拖拽内容，即使内容视图比scroll view的区域小，也会有弹性效果。
alwaysBounceHorizontal: Bool
-水平方向是否一值有弹性效果，和上个属性对应。
canCancelContentTouches: Bool
- 能取消内容触碰，默认为true。用于控制点击内容视图的时候是否会导致一直被追踪，当值是 true 的时候，用户触碰后，然后在一定时间内没有移动，scrollView 发送 tracking events，然后用户移动手指足够长度触发滚动事件，这个时候，scrollView 发送了 touchesCancelled:withEvent:（取消触碰事件）到 subview，然后 scroView 开始滚动。假如值是 false，scrollView 发送 tracking events 后，就算用户移动手指，scrollView 也不会滚动。
delaysContentTouches: Bool
-是否延迟处理触摸，当值是 true 的时候，用户触碰开始，scroll view要延迟一会，看看是否用户有意图滚动。假如滚动了，那么捕捉 touch-down 事件，否则就不捕捉。假如值是 false，当用户触碰， scroll view 会立即触发 touchesShouldBegin:withEvent:inContentView:，默认是 true
decelerationRate: CGFloat
-手指放开后的减速率,可用UIScrollViewDecelerationRateNormal和 UIScrollViewDecelerationRateFast 这两个常量。
dragging: Bool ｛ get ｝
- 是否正在拖拽，此属性只读。
tracking: Bool｛ get ｝
-追踪，当touch(触摸)还没有拖动的时候为true，此属性只读。
decelerating: Bool ｛ get ｝
-是否正在减速，当用户不在拖拽但是内容正在滚动的时候返回true，此属性只读。
- touchesShouldBegin:withEvent:inContentView:-如果不想让scroll view发送事件消息到内容视图，那么就返回false，否则范围true。
- touchesShouldCancelInContentView(_:):-如果参数view为UIControl则返回true，否则返回false。当scroll view 发送tracking消息事件到内容视图之后，就调用此方法，如果此方法返回false，那么它会停止传送触摸事件到内容视图的子视图。如果属性canCancelContentTouches为false，那么scrollview不调用此方法。
scrollRectToVisible:animated:-滚动内容视图的特定区域可见。

管理滚动指示器（即：滚动条）

indicatorStyle: UIScrollViewIndicatorStyle
- 指示器类型：三种分别为 .Default, .White, .Black。
scrollIndicatorInsets: UIEdgeInsets
- 指示器边距：指示器相对于scroll view的边距。
showsHorizontalScrollIndicator: Bool
- 是否显示水平滚动条。
ishowsVerticalScrollIndicator: Bool
- 是否显示垂直滚动条。
flashScrollIndicators()
- 刷新立马显示滚动条。

缩放与平移

panGestureRecognizer: UIPanGestureRecognizer { get }
- scrollview识别的平移手势，获得此手势用于更精确的控制，属性只读。
pinchGestureRecognizer: UIPinchGestureRecognizer? { get }- scrollview识别的捏合手势，获得此手势用于更精确的控制，属性只读。
zoomScale: CGFloat
- 内容区域的当前缩放值，默认为1.0。
minimumZoomScale: CGFloat
- 最小缩放值，默认为1.0不缩放。
maximumZoomScale: CGFloat
- 最大缩放值，默认为1.0不缩放。
zoomBouncing: Bool { get }
- 该值表示缩放已超过指定的缩放限制，当scroll view正在缩放回最小或最大缩放值时返回true，否则返回false。
zooming: Bool { get }
-内容是否正在缩放。
bouncesZoom: Bool
-缩放是否有弹性效果。
setZoomScale(_:animated:)
-缩放是否有弹性效果。
setZoomScale(_:animated:)
-动画放送缩放当前内容到指定值。

键盘管理

keyboardDismissMode: UIScrollViewKeyboardDismissMode
-当拖动开始滚动时，键盘消失的方式，有三种.None:(不消失)，OnDrag:（当拖拽开始的时候消失）,Interactive:(交互式：当拖拽的时候消失，但可用从下面再拉出来)。

代理（delegate）

delegate: UIScrollViewDelegate?-主要用于操作如滚动、缩放、滚动内容减速和滚动动画。

主要方法如下：

//只要滚动了就会触发
func scrollViewDidScroll(scrollView: UIScrollView) {

    print("scrollViewDidScroll")
}
//开始拖拽视图
func scrollViewWillBeginDragging(scrollView: UIScrollView) {
    print("scrollViewWillBeginDragging")
}
//将要结束拖拽视图

func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    print("scrollViewWillEndDragging")

}

//结束拖拽视图
func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    print("scrollViewDidEndDragging")

}
//将要减速时执行

func scrollViewWillBeginDecelerating(scrollView: UIScrollView) {
    print("scrollViewWillBeginDecelerating")

}
//减速结束时执行

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    print("scrollViewDidEndDecelerating")

}
//滚动动画结束时执行

func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
    print("scrollViewDidEndScrollingAnimation")

}

//如果滚轴视图不在顶部，你可以轻点状态栏，那个可视的滚轴视图会一直滚动到顶部，那是默认行为，你可以通过该方法返回false来关闭它

func scrollViewShouldScrollToTop(scrollView: UIScrollView) -> Bool {
    return true
}
//滚动到顶部调用
func scrollViewDidScrollToTop(scrollView: UIScrollView) {
    print("scrollViewDidScrollToTop")

}
//设置要缩放的视图，即: scrollview的subview
func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {

    return imageView
}
//缩放视图的动作开始时执行

func scrollViewWillBeginZooming(scrollView: UIScrollView, withView view: UIView?) {
    print("scrollViewWillBeginZooming")

}
//缩放视图完成时执行，这时缩放动作还没结束，次方法在scrollViewDidEndZooming之前调用

func scrollViewDidZoom(scrollView: UIScrollView) {
    print("scrollViewDidZoom")

}
//缩放视图的动作结束时执行
func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
    print("scrollViewDidEndZooming")

}

示例

直接看代码：

//
//  ViewController.swift
//  UIScrollViewDemo
//
//  Created by fengsh on 16/3/17.
//  Copyright © 2016年 fengsh. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!

    //延迟加载，使用闭包来初始化属性
    lazy var image: UIImage! =  {

        let img = UIImage(named: "girl")

        return img
    }()

    var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView = UIImageView(image: image)

        scrollView.delegate = self
        //设置scrollView的滚动范围
        scrollView.contentSize = CGSize(width:imageView.bounds.width , height: imageView.bounds.height)

        //在四周增加滚动范围
        scrollView.contentInset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        //内容相对于scrollView的坐标

        scrollView.pagingEnabled = false

        //最大缩放3倍
        scrollView.maximumZoomScale = 3.0
        //最小缩放为原来的0.2倍
        scrollView.minimumZoomScale = 0.2

        //是否又弹性效果
        scrollView.bounces = true
        //是否能滚动
        scrollView.scrollEnabled = true
        //是否显示水平／垂直滚动条
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false



        self.scrollView.addSubview(imageView)

        initTapGesture()
    }
    //添加点击手势，当双击的时候缩放视图到指定值
    func initTapGesture() {

        let tapGesture = UITapGestureRecognizer(target: self, action: "scaleImage:")
        tapGesture.numberOfTapsRequired = 2
        tapGesture.numberOfTouchesRequired = 1

        self.view.addGestureRecognizer(tapGesture)

    }
    ...代理方法,见 代理（delegate）...
}