最近一直在学 iOS 开发,所以专门创建了这样一个类别,将自己学习中的一些问题整理,记录下来。由于自己是初学者,所以所写的文章非常基础,写这个类别一是为了给自己留下存 档,二是为了给和我有同样问题的初学者留下一些学习的线索,三是希望在整理这些文章的过程中可以看到自己一点点的进步。

今天整理的问题是关于在布局方面, UIView 中的 frame, bounds, center 三个属性相关。三个属性都是用来将 view 定位在它的 Superview 上的,而三个又存在着一定的区别。

简介

  • frame 属性是相对一个 UIView 的 Superview 的坐标来定位的,初始的默认值是位于 Superview 的左上角。以横向为 x,向右为正方向;以纵向为 y,向下为正方向;左上角为坐标原点。
  • bounds 是以一个 UIView 自己 的坐标来定位的,坐标的设置同 frame 相同。上面两个属性是一个 矩形 (CGRect) ,并且有 x,y 坐标,x,y 坐标用于确定矩形左上角那一点的位置,来确定这整个矩形的位置。
  • center 与上两者不同。 center 是一个 点(CGPoint) ,它代表着 View 中心的那一点,通过 x, y 的坐标值来确定整个 View 的位置。同 frame 一样, center 也是通过 Superview 的坐标系统来确定位置的。

下来借用一张 Stanford CS193p 课程 的图来直观地展示三者的关系。

UIView.frame 以及 UIView.bounds

下面是我自己用 Playground 写了两个 UIView 来详细解释。

首先创建了两个矩形的 UIView,

黑色的是 viewA, 红色的是 viewB, viewB 是 viewA 的 subview。

以上是代码。

UIView 在创建时使用了 CGRectMake 函数,四个参数分别是 x 坐标, y 坐标, 矩形的宽,矩形的高,并将坐标值赋给 UIView.frame 或者 UIView.bounds

创建 viewB 时将其 frame 的 x,y 值均设置为 200。前面讲过, frame 是相对于 Superview 的坐标系统来定位的。所以将红色的 viewB 放置在了图中的位置。

在代码的 18–26行可以分别清楚地看到两个 View 的 frame, bounds 的 x, y 值。 viewB 中 frame 的x,y 值是相对于 viewA 左上角的距离。但是 viewB.bounds 属性的 x,y 值为0,这就是因为 bounds 是以它自己的坐标系统为参照,由于 viewB 并没有发生旋转等操作,所以 bounds 的 x,y 值均为0。

假设此事创建了一个 viewC 作为 viewB 的 subview, 那么 viewC 的 Superview 也就是 viewB, 它的 frame 也就是以 viewB 为坐标参照物,而不是 viewA, viewB 则是又以 viewA 作为参照物的。曾经犯过这样的问题。说明一下。虽然本来就该这样。

UIView.center

UIView.center 其实没有什么好说的,学习到现在也很经常使用这个属性来定位。

这个属性代表了 UIView 中间的那一点,以这个点的位置来定位。类型是一个 CGPoint

这三个属性有这样的特征:

UIView.frame.origin = center - (bounds.size / 2.0) UIView.center = frame.origin + (bounds.size / 2.0) UIView.frame.size = bounds.size

大概讲了一些,写的时候发现叙述好真是困难。英语好的人可以看看这个链接,本文参考自这里。

http://stackoverflow.com/questions/5361369/uiview-frame-bounds-and-center

UIView 中 frame, bounds, center 属性的关系的更多相关文章

  1. 初见IOS的UI之:UI控件的属性frame bounds center 和transform

    这些属性,内部都是结构体:CGRect CGPoint CGFloat 背景知识:所有的控件都是view的子类,屏幕就是一个大的view:每个view都有个viewController,它是view的 ...

  2. iOS编程(双语版)-视图-Frame/Bounds/Center

    1. Frame 每个视图都有一个frame属性,它是CGRect结构,它描述了视图所在的矩形在其父视图中的位置. (屏幕坐标系默认的原点在左上角,x轴向右伸展,y轴向下伸展) 设置frame通常通过 ...

  3. frame,bounds,center分析

    采用CGPoint来表示坐标系X,Y位置,创建一个坐标的方式为:CGPoint point=CGPointMake(x,y) CGSize用来表示视图的宽度和高度,可以用CGSizeMake(widt ...

  4. js中Frame框架的属性获取(1)

    js中window和document对象及如何操作iframe 一. window对象 . 什么是window对象? Window对象表示浏览器打开的窗口.如果文档包含iframe或者是frame标签 ...

  5. iOS--------坐标系统(UIView的frame、bounds跟center属性)

    1.概要翻开ios官方开发文档,赫然发现上面对这三个属性的解释如下: frame:描述当前视图在其父视图中的位置和大小. bounds:描述当前视图在其自身坐标系统中的位置和大小. center:描述 ...

  6. 详解UIView的frame、bounds和center属性

    From: http://ios.wpjam.com/2011/08/29/uiview-frame-bounds-center/ 1.概要 翻开ios官方开发文档,赫然发现上面对这三个属性的解释如下 ...

  7. 手写控件,frame,center和bounds属性

    一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View ...

  8. iOS开发UI篇—手写控件,frame,center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

  9. iOS开发UI基础—手写控件,frame,center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

随机推荐

  1. 《转》读discuzx3.1 数据库层笔记

    最近开始在看discuzx3.1的代码,看到数据库层的实现,discuzx的数据库层能够支撑数据库分库,分布式部署,主要水平分表,也可以很方便的支持其他数据库.性能上,可以做读写分离,支持数据缓存.可 ...

  2. windows下python2和python3共存

    相信很多朋友都在网上搜索过python多版本共存的问题. 多说的说法都是修改python.exe的名字为python2.exe或者python3.exe. 但是我按照这样的方法却总是不成功. 修改py ...

  3. OpenCV学习 1:OpenCV安装与第一个图像显示程序

    原创作品,转载请注明出处 为了提升逼格,决定学下OpenCV,想想如果可以做人脸识别,定点降落,让飞机跟着自己飞..想想都有点小激动.这只是想的,能不能学会还不知道..哈..      1:先下载:h ...

  4. 手把手教程 Surface如何进行系统恢复?

    手把手教程 Surface如何进行系统恢复? 2015-01-29 05:53:00  [  中关村在线 原创  ]   作者: 周博林 |  责编:周博林 收藏文章 分享到 评论(10) Windo ...

  5. PKCS#12

    http://blog.csdn.net/cuiran/article/details/7816696 数字证书介绍 一.什么是数字证书 数字证书就是互联网通讯中标志通讯各方身份信息的一系列数据,提供 ...

  6. Java反射-简单应用

    为了程序更好的维护和扩展,在面向对象思维的世界里,首先是面向接口编程,然后我们应该把做什么和怎么做进行分离. 以下我将用一个开晚会的样例来演示一下,终于达到的效果是:工厂+反射+配置文件实现程序的灵活 ...

  7. ExecuteScalar

    ExecuteScalar运行查询,并返回查询所返回的结果集中第一行的第一列或空引用(假设结果集为空).忽略其它列或行. 使用 ExecuteScalar 方法从数据库中检索单个值. 由于不用创建行集 ...

  8. MyDatePicker拆分日期显示到不同TextBox

    如图所示效果:年—月—日 时—分—秒 <tr>                <td align="center" style="background- ...

  9. windows平台下杀死指定端口的进程(转载)

    在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议    本地地址                     外部地址              ...

  10. xmanager 使用

    linux 上安装xterm windows上启动命令: /usr/bin/xterm -ls -display $DISPLAY