iOS bounds学习笔记以及仿写UIScrollView部分功能详解

经常看到这种说法,frame是基于父控件的,bounds是基于自身坐标的。然而,这个自身坐标是什么?bounds这个属性存在的意义是什么呢?bounds的x和y值真的永远是0吗?

经过查阅资料,我看到这样一种说法:一个控件,拥有其展示部分和内容部分。其展示部分是有限大的,固定坐标固定大小,而其内容部分是无限大的。就像一个电视机以及其播放的电影(这个比喻不太恰当,是我强行比喻的),电视机用于放映电影的屏幕(控件的展示部分)是固定位置固定大小的,然而电影的世界(控件的内容部分)是无限大的,我们只能展示这个无限的内容的有限部分。

github上的Demo链接

Demo演示bounds

先展示下效果图

我设置了两个view,一个是红色的背景view,红色view里嵌套了一个小的蓝色的view。我给红色view添加了点击手势,点击红色view,让红色view bounds.origin.y += 5;,并打印bounds的值。结果显示,bounds的y值确实增加了,而实际效果是,蓝色小色块在不断移动。

其实,frame设置的是其展示区域,就像电视机的显示屏。而bounds设置的是其内容区域,就像电视机放映的电影中那个广阔的世界一样。对于这部分的理解,我想结合scrollView会更容易些。scrollView的frame设置的仅仅只是scrollView的展示界面,而其滑动区域需要设置contentSize属性。

- (void)viewDidLoad {
  [super viewDidLoad];

  // 红色的背景view
  UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
  view.backgroundColor = [UIColor redColor];
  [self.view addSubview:view];

  // 单击手势
  UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewClick:)];
  [tap setNumberOfTouchesRequired:1];
  [view addGestureRecognizer:tap];

  // 蓝色的子view
  UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(0, 190, 10, 10)];
  subView.backgroundColor = [UIColor blueColor];
  [view addSubview:subView];
}

- (void)viewClick:(UITapGestureRecognizer *)gesture
{
  // 获取红色view
  UIView *view = gesture.view;

  // 修改bounds的值
  CGRect bounds = view.bounds;
  bounds.origin.y += 5;
  view.bounds = bounds;

  // 展示bounds的值
  NSLog(@"bounds:%@",NSStringFromCGRect(view.bounds));
}

关于修改bounds后,其内容的移动规律,我是这样理解的。我们都知道,左上角是(0,0),右下角方向移动,x和y都是增加的。而对于bounds,由于一个控件的展示部分被frame固定了,不可以随意移动。而在上面的例子中,y是自增的,那么控件应该相对于内容部分向下移动才对(设置frame是相对于父控件移动,那么设置bounds就是针对自身的内容区域移动)。而控件是不能移动的,所以能移动的就是内容区域了。内容区域相对控件向相反的方向移动,也就是向上移动了。

仿写UIScrollView的部分效果

仿写思路:scrollView的滑动效果,我们可以通过添加滑动手势实现。scrollView的内容滚动,我们可以通过修改scrollView的bounds来实现。

效果图

代码

- (void)viewDidLoad {
  [super viewDidLoad];

  // 仿scrollView
  UIView *myScrollView = [[UIView alloc] initWithFrame:self.view.bounds];
  myScrollView.backgroundColor = [UIColor redColor];
  [self.view addSubview:myScrollView];

  // 滑动手势
  UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGes:)];
  [myScrollView addGestureRecognizer:pan];

  // scrollView的内容
  UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 10, 10)];
  blueView.backgroundColor = [UIColor blueColor];
  [myScrollView addSubview:blueView];
}

- (void)panGes:(UIPanGestureRecognizer *)gesture
{
  UIView *myScrollView = gesture.view;

  // 获取滑动的位移量
  CGPoint transPoint = [gesture translationInView:myScrollView];
  NSLog(@"%@",NSStringFromCGPoint(transPoint));

  // 这里总感觉写错了,我脑子笨,有点绕不过来了。头疼
  CGRect bounds = myScrollView.bounds;
  bounds.origin.x -= transPoint.x;
  bounds.origin.y -= transPoint.y;
  myScrollView.bounds = bounds;

  // 复位
  [gesture setTranslation:CGPointZero inView:myScrollView];
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • iOS利用UIScrollView实现无限滚动效果

    前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤 1.根据需求准备几张图片,在网上找了5张图片,分别命名为 img

  • iOS中UIScrollView嵌套UITableView的实践教程

    前言 最近因为工作项目中需要用到UIScrollView嵌套UItableView嵌套交互问题,顺便网上搜了下的demo,发现实现的效果并不是很理想,滑动偶尔会有延迟现象,所以自己想了个办法,顺便把自己实现写了个demo分享出来,一起来看看吧. 实现过程 最底部放置的为一个UIScrollView,设置ScrollView的contentSize属性,使可以发生横向滚动,同时隐藏横向滚动条,设置代理为当前控制器本身.然后,在最底部的UIScrollView上放置2个UITableView,因为只

  • iOS自定义UIScrollView的滚动条实例代码

    UIScrollView有自己默认的滚动条,可设置隐藏和显示,但是有时候这个默认的滚动条没办法满足我们的需求,那这时候只能通过自定义来实现了. 实现自定义滚动条需要解决的主要问题是: 在scrollview滚动的过程中如何改变滚动条的位置,进而确保滚动条和scrollView在相同时间内走完自己的位移,只要把这个问题解决好了,那我们就可以优雅的自定义滚动条了. 那如何解决这个滚动条的当前滚动位移呢?我们知道,UIScrollView有一个滚动范围,滚动条也有一个滚动范围,也就是说两者的最大的滚动

  • iOS应用开发中UIScrollView滚动视图的基本用法总结

    在项目开发时遇到一个问题,我在UIViewController上面直接创建了一个UIScrollerView,把UIScrollerView作为一个子视图添加到了UIViewController, 又再UIScrollerView中添加了一个UISlider的组件,在手势滑动的过程中,很难滑动到UISlider这个控件,经常是滑动的时候UIScrollerView进行了滚动, 而UISlider这个控件没有滑动,让人很抓狂. 上网具体去了解了一下UIScrollerView的详解,终于彻底明白了

  • iOS开发上下滑动UIScrollview隐藏或者显示导航栏的实例

    一.好多App都有上下滑动UIScrollview隐藏或者显示导航栏,在这里我说说我觉得有用的几种方法: 1.iOS8之后系统有一个属性hidesBarsOnSwipe Objective-C代码如下 self.navigationController.hidesBarsOnSwipe = YES; swift代码如下 self.navigationController?.hidesBarsOnSwipe = true 当使用以上代码时,可以达到效果 2.使用UIScrollViewDelega

  • iOS开发中使用UIScrollView实现无限循环的图片浏览器

    一.概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 二.UIView 在熟悉UIScrollView之前很有必要说一下UIView的内容.

  • iOS应用开发中使用UIScrollView控件来实现图片缩放

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 2.UIScrollV

  • iOS基于UIScrollView实现滑动引导页

    上代码前,我们先来看下实现的效果图: WelcomeViewController.h #import <UIKit/UIKit.h> @interface WelcomeViewController : UIViewController @end WelcomeViewController.m #import "WelcomeViewController.h" #define IMAGECOUNT 3 @interface WelcomeViewController ()

随机推荐