iOS 中的 bounds & frame

由于种种原因,简书等第三方平台博客不再保证能够同步更新,欢迎移步 GitHub:https://github.com/kingcos/Perspective/。谢谢!

bounds & frame

  • Info:
  • Swift 3.0
  • Xcode 8.2.1

Update

2017.02.27 - CS193p Lecture 04

  • 使用 frame & center 来定位视图
  • 使用 bounds 来绘制视图

frame.size != bounds.size

  • 在视图旋转时,frame 的 size 和 bounds 的 size 将发生分歧,即 frame 的 size 将相对于父视图的坐标系而改变。
  • 该示例已增加,详见 kingcos/bounds-frame-Demo 新增的 Demo。

redraw

  • 默认情况下,UIView 的 bounds 改变时,将不会重新绘制。
  • 设置 Content Mode 为 redraw 即会重新绘制。
  • UIViewContentMode: 内容模式(仅放置在某个位置、比例缩放、重新绘制)

前言

在 iOS 开发中,视图的 bounds 和 frame 是其最基本的属性。两者的类型均为 CGRect,即包含原点和宽高信息。那么这两个属性有什么区别和联系呢?为了搞清楚这一点,也为了方便以后的参考,所以总结于此。

概念

frame

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.

根据苹果的官方文档,frame 是控件相对于其父视图坐标系得出的位置和大小。

center

其实提到 frame 和 bounds,不得不说的还有一个属性便是 center。

The center of the frame.

根据苹果的官方文档,center 是自身控件 frame 的中心。

bounds

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

根据苹果的官方文档,bounds 是控件相对于其自身坐标系得出的位置和大小。默认 bounds 中的原点为 (0, 0)。

Demo

验证

概念的总结总是抽象的,不如一个 Demo 生动,因此写了一个 Demo 来验证以上的概念。该 Demo 您可以在 kingcos/bounds-frame-Demo 下载并使用 Xcode 运行。为了快速构建,该例中使用了 Storyboard。

Demo

该 Demo 中,红色和蓝色按钮的父控件为 UIView,您可以在下图中看到,即蓝色选中的视图控件。

控件层次

通过 Demo 中的数据,我们可以很清楚的知道 frame、bounds 以及 center 之间的关系:

  • frame 和 bounds 中的 size 是相同且同时变化的
  • 当子控件的左上角(即原点)与其父控件为同一点时,frame 和 bounds 是相同的
  • frame 中的原点为当前控件在父控件中的坐标
  • bounds 中的原点为当前控件在其以自身为准的坐标系中的坐标,默认为 (0, 0)
  • center 为 frame 的中心,即相对于父控件

应用

验证了概念,也大致了解了 frame 和 bounds 的区别,那么在实际应用中又有什么差别呢?在 Demo 的基础上,新增了下方的一个 UIView,背景色为 Light Gray(如控件层次图中蓝色选中的视图)。并在该 UIView 中嵌套了一个子控件,即棕色的 UILabel。在该棕色 UILabel 中,又使用代码创建了子控件 UIView,并将其初始化为 UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20)),且背景为黑色。

Demo
控件层次

为了方便演示,在棕色 UILabel 上方加上了一个 UISegmentedControl,用来快速切换设置的不同属性,以方便比较。默认即初始状态为:黑色控件、棕色 Label、浅灰控件三者的原点统一。

Bounds

当点选 Bounds,设置棕色 Label 的 bounds 原点:

brownLabel.bounds.origin = CGPoint(x: -20, y: -20)

虽然原点变化了,但是该控件的位置并没有发生改变,这是因为 bounds 以自身为参照,仅仅把原点坐标改变,不会影响自身。但是我们添加到该控件内部的黑色控件,就会发生偏移。偏移的动画如下图所示:

改变 bounds

Frame

当点选 Frame,设置棕色 Label 的 frame 原点:

brownLabel.frame.origin = CGPoint(x: -20, y: -20)

由于 frame 是参照父控件,所以一旦更改原点,那么棕色控件本身就会发生偏移。而其内部的子控件是按照其父控件定位的,所以也会跟着偏移,但相对棕色控件的位置不变。

改变 frame

总结

bounds 和 frame 其实是 iOS 开发中很基本的知识点,但有时会对初学者造成困惑。背诵概念是很容易忘记的,通过实际的代码和 Demo 才能对知识掌握更加清晰、牢靠。

参考资料

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

推荐阅读更多精彩内容