Swift-UIScrollView的基本使用

一. 为什么要用UIScrollView

手机屏幕有限,但又想展示更多内容,就要用到UIScrollView来滚动屏幕。

二. 前驱知识

1. Frame属性

UIScrollView中的Frame属性代表可见的区域(屏幕内部的)

2. ContentSize属性(CGSize类型)

ContentSize属性代表可展示的所有区域(包括屏幕外部)(滚动范围)

三. 使用场景

1. 新闻轮播图(十分常用)

2.应用第一次加载的引导界面

3.大数据图表设计引擎中的图表滑动、照片展示

四. UIScrollView 的快速使用

1. 初始化视图

let scrollView = UIScrollView(frame: CGRect(x: 0, y: 50, width: 414, height: 200)) // Frame属性
scrollView.contentSize = CGSize(width: 414*5, height: 200) // ContentSize属性
scrollView.backgroundColor = .gray
view.addSubview(scrollView)

2. 其他属性

①indicatorStyle:滑动时在底部添加滑动光标

scrollView.indicatorStyle = .white // 添加白色光标
//scrollView.indicatorStyle = .black   黑色光标
//scrollView.indicatorStyle = .default 默认灰色广标

②bounces: 滑动到边缘时光标具有反弹效果

scrollView.bounces = true  // false 光标就会很僵直 没有反弹

③isPagingEnabled: 分页效果 每次移动一个格

scrollView.isPagingEnabled = true

④contentOffset: (CGPoint)

contentOffset是UIScrollView当前显示区域的顶点相对于UIScrollView的frame的坐标。UIScrollView实际上分为两层-scrollView(滚动视图,用于滚动)和contentView(内容视图,用于展示内容)。

scrollView的坐标原点即为其frame规定的位置,而contentView的起始位置是以scrollView坐标原点为原点,所展示内容的左上角那个点的坐标,即为contentOffset,可看作contentView左上角相对于scrollView左上角的位移偏移量。

⑤bouncesZoom

类似于bounces属性,这个属性可以让用户的缩放操作超出最大或最小缩放级别,然后弹回。

五. 在UIScrollView 中添加控件

let lable = UILabel(frame: CGRect(x: 414, y: 0, width: 414, height: 50)) //坐标(x, y)决定 lable 在滚动视图中的位置
        lable.textColor = .red
        lable.text = "hello"
        lable.backgroundColor = .green
        scrollView.addSubview(lable)
滚动页面1
滚动页面2

六. 委托代理方法(delegate)

1. 要为UIScrollView设置代理

使含有UIScrollView 的 ViewController 遵循 UIScrollViewDelegate 协议,这里用到了扩展

extension ViewController: UIScrollViewDelegate {
}

2. delegate函数

①scrollViewDidScroll: 滚动时不停的回掉

精度很高 有一个重要的使用场景:打印滚动时坐标的偏移量

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        var x = scrollView.contentOffset.x
        print("x = \(x)")
    }

②scrollViewWillBeginDragging:当用户首次拖动时调用

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        <#code#>
    }

③ scrollViewWillEndDragging: 将要结束拖动时

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        <#code#>
    }

④ scrollViewDidEndDragging: 当用户的手指停止拖动,离开屏幕时

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {  // Bool参数指明报告滚动到最后视图前是否要减速
        <#code#>
    }

⑤ scrollViewDidZoom:缩放过程中持续触发

func scrollViewDidZoom(_ scrollView: UIScrollView) {
        <#code#>
    }

其余列在代码框里:

//6.将要开始减速的时候触发
    func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
        print("将要开始减速")
    }
    
    //7.已经结束减速完成的时候触发,速度为0,往往都是在这个方法中获取scrollView的contentOffset(很重要)
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        print("减速完成")
    }
    
    //8.给scrollView设置一个结束动画的时候触发,不指定动画不会触发
    func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
        
    }
    
    //9.返回scrollView上缩放的视图
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return scrollView.viewWithTag(200)
    }
    
    //10.将要开始缩放的时候触发
    func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
        print("将要开始缩放")
    }
    
    //11.结束缩放的时候触发
    func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {
        print("结束缩放")
    }
    
    //12.设置点击状态栏的时候是否回到顶部
    func scrollViewShouldScrollToTop(_ scrollView: UIScrollView) -> Bool {
        return true
    }
    
    //13.scrollView已经回到顶部的时候触发的方法
    func scrollViewDidScrollToTop(_ scrollView: UIScrollView) {
        print("scrollView已经回到顶部")
    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,294评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,780评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,001评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,593评论 1 289
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,687评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,679评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,667评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,426评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,872评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,180评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,346评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,019评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,658评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,268评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,495评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,275评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,207评论 2 352