深入理解IOS中的UIScrollView(附测试代码)

2024-06-05 18:48

本文主要是介绍深入理解IOS中的UIScrollView(附测试代码),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先了解一下UIKit中的坐标系是怎么工作的。如果你只对滚动试图的代码实现感兴趣可以放心跳过下一小节。UIKit坐标系每一个View都定义了他自己的坐标系统。如下图所示,x轴指向右方,y轴指向下方:


注意这个逻辑坐标系并不关注包含在其中View的宽度和高度。整个坐标系没有边界向四周无限延伸.我们在坐标系中放置四个子View。每一次色块代表一个View:


添加View的代码实现如下:

  1. UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)]; 
  2. redView.backgroundColor = [UIColor colorWithRed:0.815 green:0.007 
  3.     blue:0.105 alpha:1]; 
  4.   
  5. UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(150, 160, 150, 200)]; 
  6. greenView.backgroundColor = [UIColor colorWithRed:0.494 green:0.827 
  7.     blue:0.129 alpha:1]; 
  8.   
  9. UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(40, 400, 200, 150)]; 
  10. blueView.backgroundColor = [UIColor colorWithRed:0.29 green:0.564 
  11.     blue:0.886 alpha:1]; 
  12.   
  13. UIView *yellowView = [[UIView alloc] initWithFrame:CGRectMake(100, 600, 180, 150)]; 
  14. yellowView.backgroundColor = [UIColor colorWithRed:0.972 green:0.905 
  15.     blue:0.109 alpha:1]; 
  16.   
  17. [mainView addSubview:redView]; 
  18. [mainView addSubview:greenView]; 
  19. [mainView addSubview:blueView]; 
  20. [mainView addSubview:yellowView]; 

bounds

Apple关于UIView的文档中是这样描述bounds属性的:

bounds矩形…描述了该视图在其自身坐标系中的位置和大小。

一个View可以被看作是定义在其所在坐标系平面上的一扇窗户或者说是一个矩形的可视区域。View的边界表明了这个矩形可视区域的位置和大小。

假设我们的View宽320像素,高480像素,原点在(0,0)。那么这个View就变成了整个坐标系平面的观察口,它展示的只是整个平面的一小部分。位于该View边界外的区域依然存在,只是被隐藏起来了。


一个View提供了其所在平面的一个观察口。View的bounds矩形描述了这个可是区域的位置和大小。

Frame

接下来我们来试着修改bounds的原点坐标:

  1. CGRect bounds = mainView.bounds; 
  2. bounds.origin = CGPointMake(0, 100); 
  3. mainView.bounds = bounds; 

当我们把bound原点设为(0,100)后,整个画面看起来就像这样:


修改bounds的原点就相当与在平面上移动这个可视区域。

看起来好像是这个View向下移动了100像素,在这个View自己的坐标系中这确实没错。不过这个View真正位于屏幕上的位置(更准确的说在其父View上的位置)其实没有改变,因为这是由View的frame属性决定的,它并没有改变:

frame矩形…定义了这个View在其父View坐标系中的位置和大小。

由于View的位置是相对固定的,你可以把整个坐标平面想象成我们可以上下拖动的透明幕布,把这个View想象成我们观察坐标平面的窗口。调整View的Bounds属性就相当于拖动这个幕布,那么下方的内容就能在我们View中被观察到:

Since the view’s position is fixed (from its own perspective), think of the coordinate system plane as a piece of transparent film we can drag around, and of the view as a fixed window we are looking through. Adjusting thebounds’s origin is equivalent to moving the transparent film such that another part of it becomes visible through the view:


修改bounds的原点坐标也相当于把整个坐标系向上拖动,因为View的frame没由变过,所以它相对于父View的位置没有变化过。

其实这就是UIScrollView滑动时所发生的事情。注意从一个用户的角度来看,他以为时这个View中的子View在移动,其实他们的在坐标系中位置(他们的frame)没有发生过变化。

UIScrollView的滑动纵轴范围为(-contentInset.top, contentSize.height+contentInset.bottom),水平方向范围也类似。



  • 常见属性
    CGSize contentSize :设置UIScrollView的滚动范围
    CGPoint contentOffset :UIScrollView当前滚动的位置
    UIEdgeInsets contentInset :这个属性可以在四周增加滚动范围

  • 其他属性
  • BOOL bounces 是否有弹簧效果
  • BOOL scrollEnabled 是否能滚动
    BOOL showsHorizontalScrollIndicator 是否显示水平方向的滚动条
    BOOL showsVerticalScrollIndicator     是否显示垂直方向的滚动条
    UIScrollViewIndicatorStyle indicatorStyle  设定滚动条的样式
    BOOL dragging 是否正在被拖拽
    BOOL tracking  当touch后还没有拖动的时候值是YES,否则NO
    BOOL decelerating 是否正在减速
    BOOL zooming 是否正在缩放
  • 3
    手势缩放
    设置UIScrollView的id<UISCrollViewDelegate> delegate代理对象
    设置minimumZoomScale :缩小的最小比例
    设置maximumZoomScale :放大的最大比例
    让代理对象实现下面的方法,返回需要缩放的视图控件
    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    跟缩放相关的常用方法还有
    正在缩放的时候调用
    -(void)scrollViewDidZoom:(UIScrollView *)scrollView
    缩放完毕的时候调用
    -(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale




  • 4
    分页效果
    设置pagingEnabled=YES即可,UIScrollView会被分割成多个独立页面,用户的滚动体验则变成了页面翻转
    一般会配合UIPageControl增强分页效果,UIPageControl常用属性:
    NSInteger numberOfPages : 总页数
    NSInteger currentPage : 当前的页码
    BOOL hidesForSinglePage : 当只有一页的时候,是否要隐藏视图
    监听UIPageControl的页面改变:
    // 添加监听器
    [pageControl addTarget:self action:@selector(pageChange:) 
    forControlEvents:UIControlEventValueChanged];
    // 监听方法
    - (void)pageChange:(UIPageControl *)pageControl 
    {  
    }
  • 5



UIScrollViewDelegate方法如下:

#pragma mark UIScrollViewDelegate

//只要滚动了就会触发

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;   

{

//    NSLog(@" scrollViewDidScroll");

    NSLog(@"ContentOffset  x is  %f,yis %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

}

//开始拖拽视图

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;   

{

   NSLog(@"scrollViewWillBeginDragging");

}

//完成拖拽

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; 

{

   NSLog(@"scrollViewDidEndDragging");

}

//将开始降速时

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;   

{

   NSLog(@"scrollViewWillBeginDecelerating");

}


//减速停止了时执行,手触摸时执行执行

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;   

{

   NSLog(@"scrollViewDidEndDecelerating");

}

//滚动动画停止时执行,代码改变时出发,也就是setContentOffset改变时

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

{

   NSLog(@"scrollViewDidEndScrollingAnimation");

}

//设置放大缩小的视图,要是uiscrollviewsubview

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;   

{

   NSLog(@"viewForZoomingInScrollView");

    returnviewA;

}

//完成放大缩小时调用

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale; 

{

    viewA.frame=CGRectMake(50,0,100,400);

   NSLog(@"scale between minimum and maximum. called after any 'bounce' animations");

}// scale between minimum and maximum. called after any 'bounce' animations


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

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;   

{

    NSLog(@"scrollViewShouldScrollToTop");

   returnYES;

}


- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;     

{

    NSLog(@"scrollViewDidScrollToTop");

}


测试应用代码,UIScrollView大小为280*280,在屏幕中居中显示,里面含有等比例缩放后大小为280*373的图片,该图片可以上下滚动,同时也可以响应旋转,放大缩小手势。

源代码见路径:https://github.com/realyezi/TestCode/tree/master/HelloWorld2




这篇关于深入理解IOS中的UIScrollView(附测试代码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1033884

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

【C++高阶】C++类型转换全攻略:深入理解并高效应用

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C++ “ 登神长阶 ” 🤡往期回顾🤡:C++ 智能指针 🌹🌹期待您的关注 🌹🌹 ❀C++的类型转换 📒1. C语言中的类型转换📚2. C++强制类型转换⛰️static_cast🌞reinterpret_cast⭐const_cast🍁dynamic_cast 📜3. C++强制类型转换的原因📝

深入手撕链表

链表 分类概念单链表增尾插头插插入 删尾删头删删除 查完整实现带头不带头 双向链表初始化增尾插头插插入 删查完整代码 数组 分类 #mermaid-svg-qKD178fTiiaYeKjl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-

深入理解RxJava:响应式编程的现代方式

在当今的软件开发世界中,异步编程和事件驱动的架构变得越来越重要。RxJava,作为响应式编程(Reactive Programming)的一个流行库,为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava?💯 响应式编程的优势💯 RxJava的核心概念

如何通俗理解注意力机制?

1、注意力机制(Attention Mechanism)是机器学习和深度学习中一种模拟人类注意力的方法,用于提高模型在处理大量信息时的效率和效果。通俗地理解,它就像是在一堆信息中找到最重要的部分,把注意力集中在这些关键点上,从而更好地完成任务。以下是几个简单的比喻来帮助理解注意力机制: 2、寻找重点:想象一下,你在阅读一篇文章的时候,有些段落特别重要,你会特别注意这些段落,反复阅读,而对其他部分

深入理解数据库的 4NF:多值依赖与消除数据异常

在数据库设计中, "范式" 是一个常常被提到的重要概念。许多初学者在学习数据库设计时,经常听到第一范式(1NF)、第二范式(2NF)、第三范式(3NF)以及 BCNF(Boyce-Codd范式)。这些范式都旨在通过消除数据冗余和异常来优化数据库结构。然而,当我们谈到 4NF(第四范式)时,事情变得更加复杂。本文将带你深入了解 多值依赖 和 4NF,帮助你在数据库设计中消除更高级别的异常。 什么是