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

简介: 1. Frame 每个视图都有一个frame属性,它是CGRect结构,它描述了视图所在的矩形在其父视图中的位置。 (屏幕坐标系默认的原点在左上角,x轴向右伸展,y轴向下伸展) 设置frame通常通过视图的指定初始化器initWithFrame 下面来看个例子,该例子初始化了3个相互叠加的矩...

1. Frame

每个视图都有一个frame属性,它是CGRect结构,它描述了视图所在的矩形在其父视图中的位置

(屏幕坐标系默认的原点在左上角,x轴向右伸展,y轴向下伸展)

设置frame通常通过视图的指定初始化器initWithFrame

下面来看个例子,该例子初始化了3个相互叠加的矩形区域

(Objective-C代码)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [[UIView alloc] initWithFrame:CGRectMake(41, 56, 132, 194)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
UIView* v3 = [[UIView alloc] initWithFrame:CGRectMake(43, 197, 160, 230)];
v3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];

[mainview addSubview: v1];
[v1 addSubview: v2];
[mainview addSubview: v3];

(Swift代码 iOS9)

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:CGRectMake(41, 56, 132, 194))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
let v3 = UIView(frame:CGRectMake(43, 197, 160, 230))
v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)

mainview.addSubview(v1)
v1.addSubview(v2)
mainview.addSubview(v3)

 

运行结果:

 

2. Bounds

Bounds也是CGRect结构,和Frame不同,它描述的是视图自身的矩形区域,是相对于自身的坐标系而言的。

下面的例子创建了2个叠加的矩形视图,子视图为绿色较小的那个

(Objective-C代码)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];

// 在一个视图内部画图时,通常需要使用该视图的bounds
UIView* v2 = [[UIView alloc] initWithFrame:CGRectInset(v1.bounds, 10, 10)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];

[mainview addSubview: v1];
[v1 addSubview: v2];

(Swift代码 iOS9)

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)

// 在一个视图内部画图时,通常需要使用该视图的bounds
let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)

mainview.addSubview(v1)
v1.addSubview(v2)

 运行结果:

 

下面的例子通过改变绿色子视图的bounds将父视图完全覆盖

(Objective-C代码)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];

UIView* v2 = [[UIView alloc] initWithFrame:CGRectInset(v1.bounds, 10, 10)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];

[mainview addSubview: v1];
[v1 addSubview: v2];

// 重定义子视图的bounds
CGRect r = v2.bounds;
r.size.height += 20;
r.size.width += 20;
v2.bounds = r;

(Swift代码 iOS9)

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)

let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)

mainview.addSubview(v1)
v1.addSubview(v2)

v2.bounds.size.height += 20
v2.bounds.size.width += 20

 运行结果:

 

下面的例子,紫色父视图的原点进行少量偏移

(Objective-C代码)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];

UIView* v2 = [[UIView alloc] initWithFrame:CGRectInset(v1.bounds, 10, 10)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];

[mainview addSubview: v1];
[v1 addSubview: v2];

// 改变父视图的原点坐标
CGRect r = v1.bounds;
r.origin.x += 10;
r.origin.y += 10;
v1.bounds = r;

(Swift代码 iOS9)

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)

let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)

mainview.addSubview(v1)
v1.addSubview(v2)

// 改变父视图的原点坐标
v1.bounds.origin.x += 10
v1.bounds.origin.y += 10

 

运行结果:

 

3. Center

Center即视图的中心点位置坐标

 

4. 关于主窗口和设备屏幕

设备屏幕(UIScreen.mainScreen())没有frame, 但它有bounds。

主窗口没有父视图,但是它的frame可以设为屏幕的bounds。

let w = UIWindow(frame: UIScreen.mainScreen().bounds)

 

5. 关于frame和bounds的区别

一言以蔽之,就是前者相对于父视图,而后者相对于自身。

我们还是用图片来看一下吧,这样更直观

在视图未旋转的情况下,它们差不多,坐标稍有区别,如下图:

 

而在视图作了类似旋转的transform之后,它们的坐标则有很大的差别了,见下图:

 

目录
相关文章
|
2月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
62 11
|
3月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
51 7
|
3月前
|
安全 测试技术 调度
iOS开发-多线程编程
【8月更文挑战第12天】在iOS开发中,属性的内存管理至关重要,直接影响应用性能与稳定性。主要策略包括:`strong`(强引用),保持对象不被释放;`weak`(弱引用),不保持对象,有助于避免循环引用;`assign`(赋值),适用于基本数据类型及非指针对象类型;`copy`(复制),复制对象而非引用,确保不变性。内存管理基于引用计数,利用自动引用计数(ARC)自动管理对象生命周期。此外,需注意避免循环引用,特别是在block中。最佳实践包括理解各策略、避免不必要的强引用、及时释放不再使用的对象、注意block中的内存管理,并使用工具进行内存分析。正确管理内存能显著提升应用质量。
|
4月前
|
移动开发 开发工具 Android开发
探索安卓与iOS开发的差异:平台特性与编程实践
【7月更文挑战第8天】在移动开发的广阔天地中,安卓和iOS这两大操作系统各自占据着半壁江山。它们在用户界面设计、系统架构及开发工具上展现出截然不同的特色。本文将深入探讨这两个平台在技术实现和开发生态上的关键差异,并分享一些实用的开发技巧,旨在为跨平台开发者提供有价值的见解和建议。
|
4月前
|
IDE 开发工具 Android开发
安卓与iOS开发环境对比分析:选择适合自己的编程平台
移动应用开发的两大阵营——安卓和iOS,各自拥有不同的开发环境和工具集。本文通过深入比较这两个平台的编程语言、集成开发环境(IDE)、用户界面设计、测试框架以及部署流程,旨在为开发者提供一个全面的视角来选择最符合个人或项目需求的开发环境。
|
5月前
|
安全 IDE Android开发
探索Android与iOS开发的差异:平台特性与编程实践
【6月更文挑战第17天】在移动应用开发的广阔天地中,Android和iOS两大平台各自占据半壁江山。它们在用户群体、系统架构以及开发环境上的差异,为开发者带来了不同的挑战和机遇。本文深入探讨了这两个平台在技术实现、界面设计、性能优化等方面的主要区别,并提供了实用的开发建议,旨在帮助开发者更好地理解各自平台的特性,从而创造出更加优秀的移动应用。
|
iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(3)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
153 0
|
前端开发 数据处理 iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
91 0
|
iOS开发 Kotlin 容器
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
121 0
|
存储 缓存 前端开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)
128 0