UI编程 第⼀一讲:UIView及其⼦子类
⼀一、UIView ⼆二、UILabel
iOS概述 iOS是Apple公司的移动操作系统,主要⽤用于iPhone、iPad、iPad Mini、
iPod Touch等移动产品。 借助iOS,我们可以开发视频类、美图类、新闻类、⾳音乐类、团购类、电
商类、阅读类、出⾏行类、⽣生活服务类、游戏类等应⽤用程序。
除此之外,iOS还可以与外部设备通信,开发出更多改变⽣生活的产品,⽐比 如:智能家居(iOS App控制电视、空调等)、健⾝身产品(将⼈人体的健康 状况通过App直观的展现出来)等。
⼆二、UI概述
UI概述
UI(User Interface):⽤用户界⾯面,⽤用户能看到的各种各样的⻚页⾯面元
素。
iOS App = 各种各样的UI控件 + 业务逻辑和算法。
想要开发出⼀一款精美的应⽤用程序,需要熟练掌握各种UI控件的⽤用 法。
UI控件⼀一览 iOS发展到现在,从最初的iOS 2.0到iOS 7.0,经历了⼀一些变化。
在UI外观上,iOS 7发⽣生了重⼤大变⾰革。以线条为主,倾向于扁平化, 更着重于体现应⽤用程序的内容。
iOS 7之前的UI外观则以虚拟化为主,注重⽴立体、阴影的配搭。⽆无形 中降低了应⽤用程序内容的地位。
UI控件⼀一览 iOS发展到现在,从最初的iOS 2.0到iOS 7.0,经历了⼀一些变化。
在UI外观上,iOS 7发⽣生了重⼤大变⾰革。以线条为主,倾向于扁平化, 更着重于体现应⽤用程序的内容。
iOS 7之前的UI外观则以虚拟化为主,注重⽴立体、阴影的配搭。⽆无形 中降低了应⽤用程序内容的地位。
UI控件⼀一览 iOS发展到现在,从最初的iOS 2.0到iOS 7.0,经历了⼀一些变化。
在UI外观上,iOS 7发⽣生了重⼤大变⾰革。以线条为主,倾向于扁平化, 更着重于体现应⽤用程序的内容。
iOS 7之前的UI外观则以虚拟化为主,注重⽴立体、阴影的配搭。⽆无形 中降低了应⽤用程序内容的地位。
如何去呈现UI? iOS提供了这么多UI,如何去呈现这些UI呢?
三、UIWindow
什么是window? window是窗口,每个app都需要借助window将内容展现给⽤用户看。
在iOS中,使⽤用UIWindow类来表示窗口,通常一个应用程序只创建 一个UIWindow对象。
window的主要作用是呈现内容给用户,我们不会对window做太多操 作。
如何创建window? 在创建window的时候,需要指定window的大小。
通常window的大小(frame)与屏幕(UIScreen)大⼩一致。 示例代码如下:
!
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
window如何呈现内容
window主要的⼯工作是呈现内容给⽤用户,window如何呈现内容? 能呈现哪些内容呢?
四、UIView
什么是View? view(视图):代表屏幕上的一个矩形区域。iOS中用UIView来表示
视图 前⾯面ppt⾥里看到的各种UI控件都属于view。
不同的控件代表不同种类的view。 iOS中所有能看到的内容都是view或其子类。
如何创建view
创建视图的步骤如下:
1、开辟空间并初始化视图(初始化时,给出视图位置和⼤小)
2、对视图做⼀一些设置(⽐比如:背景颜⾊色)
3、将视图添加到window上进⾏行显⽰示
4、释放视图对象
视图创建代码
视图创建
UIView *blueView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 120, 100)];
blueView.backgroundColor = [UIColor blueColor];
[self.window addSubview:blueView];
[blueView release];
frame
frame是view的重要属性,是我们做视图布局的关键,它决定了视图 的大小和位置。
如何完全掌控view的大小和位置?
iOS坐标系
iOS提供了⽤用于布局的平面坐标系。左上角为坐标系的原点。
水平向右:为x的正方向。屏幕最左到最右可划分320等份。
垂直向下:为y的正方向。屏幕最上到最下可划分480等份(3.5⼨寸屏 幕)。
坐标系不是以像素作为划分依据,而是以“点”作为依据。
iOS坐标系
iOS提供了⽤用于布局的平⾯面坐标系。左上⾓角为坐标系的原点。
⽔水平向右:为x的正⽅方向。屏幕最左到最右可划分320等份。
垂直向下:为y的正⽅方向。屏幕最上到最下可划分480等份(3.5⼨寸屏 幕)。
坐标系不是以像素作为划分依据,⽽而是以“点”作为依据。
frame
frame是一个结构体,包含2部分内容:origin和size。
origin也是⼀一个结构体,包含2部分内容:x和y。
size同样是⼀一个结构体,包含2部分内容:width和height。
frame的origin和size是相对于⽗父视图来说的。 CGRectMake()函数可以帮我们快速构造⼀一个CGRect变量。
center
center(中⼼心点)也是view重要的属性。
center是个结构体,包含2个部分:x和y。
center与frame有着密切的联系。
center.x = frame.origin.x + frame.size.width/2;
center.y = frame.origin.y + frame.size.height/2;
bounds(边界)
也是view的重要属性,用于定义自己的边界。它同frame⼀样是⼀个CGRect结构体变量。 当一个view设置bounds时,会把自己当成一个容器,定义自己的边界大小 以及 左上角的初始坐标。
当子视图添加到此视图时,会根据bounds指定的原点(0,0)计算 frame,而非左上角。
bounds、frame、center
frame、bounds、center之间有着微妙的联系。 它们之间的关系,⻅见表格。
!
!
bounds、frame、center
|
frame、bounds、center之间有着微妙的联系。 |
||
|
它们之间 参考系 |
父视图 的关系,见表格。 |
自身 |
|
origin ! |
到父视图原点的距离 |
到⾃身原点的距离 |
|
size ! 两者联系 |
⾃自⾝身的宽⾼高 |
⾃身的宽⾼高 |
|
bounds.size改变时,frame.size也会发⽣生变化;frame.size改变时,bounds.size也会 发⽣生变化 |
||
两者联系 两者联系
⾃自⾝身的宽⾼高
化。center.x = frame.origin.x + frame.size.width/2 ; center.y = frame.origin.y +
⾃自⾝身的宽⾼高 frame.origin发⽣生变化,center也会发⽣生变化;center发⽣生变化,frame.origin也发⽣生变
bounds.size改变时,frame.size也会发⽣生变化;frame.size改变时,bounds.size也会
frame.size.height;
两者联系 两者联系
⾃自⾝身的宽⾼高 ⾃自⾝身的宽⾼高 frame.origin发⽣生变化,center也会发⽣生变化;center发⽣生变化,frame.origin也发⽣生变
化。center.x = frame.origin.x + frame.size.width/2 ; center.y = frame.origin.y + center发⽣生变化bounds.origin不变,bounds.origin发⽣生变化,center不变
bounds.size改变时,frame.size也会发⽣生变化;frame.size改变时,bounds.size也会
frame.size.height;
发⽣生变化
添加视图
UIView的addSubview:⽅方法可以添加⼦子视图,对于同⼀一个视图的所 有⼦子视图来讲,后添加的⼦子视图会把已加的⼦子视图盖在下⾯面。
UIView提供了其他添加视图的⽅方法。 !
添加视图
|
UIView的addSubview:⽅方法可以添加⼦子视图,对于同⼀一个视图的所 ⽅方法名 描述 ⽰示例 有⼦子视图来讲,后添加的⼦子视图会把已加的⼦子视图盖在下⾯面。 |
||
|
insertSubview:atIndex: UIView提供了其他 |
在指定的index处插⼊入⼦子视图 添加视图的⽅方法。 |
[superview insertSubview:grayView atIndex:1]; |
|
insertSubview:aboveSubview: ! |
在指定的视图上⾯面添加⼦子视图 |
[superview insertSubview:grayView aboveSubview:redView]; |
|
insertSubview:belowSubview: |
在指定的视图下⾯面添加⼦子视图 |
[superview insertSubview:grayView belowSubview:redView]; |
|
UIView除了提供添加视图的⽅方法,还提供了管理视图层次的⽅方法。 ⽅方法名 描述 ⽰示例 |
||
|
bringSubviewToFront: ! |
把指定的⼦子视图移动到最前⾯面 |
[superview bringSubviewToFront:redView]; |
|
sendSubviewToBack: ! exchangeSubviewAtIndex: withSubviewAtIndex: |
把指定的⼦子视图移动到最后⾯面 |
[superview sendSubviewToBack:redView]; |
|
交换两个指定索引位置的⼦子视图 |
[superview exchangeSubviewAtIndex:0 withSubviewAtIndex:2]; |
|
|
removeFromSuperview |
把receiver从⽗父视图上移除 |
[redView removeFromSuperview]; |
视图重要属性
UIView作为其他UI控件的BaseClass,提供了很多属性。 !
!
视图重要属性
|
属性名 描述 ⽰示例 UIView作为其他UI控件的BaseClass,提供了很多属性。 |
||
|
hidden |
控制视图的显隐 |
redView.hidden = YES;//隐藏redView redView.hidden = NO;//显⽰示redView |
|
! alpha |
控制视图的不透明度(⼦子视图也⼀一起 透明),取值范围0~1 |
redView.alpha = 0.8; |
|
! superview |
获取本视图的⽗父视图 |
UIView *superView = [redView superView]; |
|
subviews |
获取本视图的所有⼦子视图 |
NSArray *subviews = [redView subviews]; |
|
tag |
给视图添加标记,被加完标记的视 图可以使⽤用viewWithTag:⽅方法取出 |
redView.tag = 100; |
五、UILabel
UILabel是什么? UILabel(标签):是显⽰示⽂文本的控件。在App中UILabel是出现频
率最⾼高的控件。 UILabel是UIView⼦子类,作为⼦子类⼀一般是为了扩充⽗父类的功能,
UILabel扩展了⽂文字显⽰示的功能,UILabel是能显⽰示⽂文字的视图。 项⺫⽬目中哪些地⽅方会⽤用UILabel?
UILabel是什么? UILabel(标签):是显⽰示⽂文本的控件。在App中UILabel是出现频
率最⾼高的控件。 UILabel是UIView⼦子类,作为⼦子类⼀一般是为了扩充⽗父类的功能,
UILabel扩展了⽂文字显⽰示的功能,UILabel是能显⽰示⽂文字的视图。 项⺫⽬目中哪些地⽅方会⽤用UILabel?
UILabel是什么? UILabel(标签):是显⽰示⽂文本的控件。在App中UILabel是出现频
率最⾼高的控件。 UILabel是UIView⼦子类,作为⼦子类⼀一般是为了扩充⽗父类的功能,
UILabel扩展了⽂文字显⽰示的功能,UILabel是能显⽰示⽂文字的视图。 项⺫⽬目中哪些地⽅方会⽤用UILabel?
⽂文本显⽰示
所谓的⽂文本:就是我们的⽂文字(字符串)。
⽂文本显⽰示:即,在视图上显⽰示⽂文字。
⽂文本显⽰示都有哪些⽅方⾯面呢?⽐比如:⽂文本内容、⽂文本字体。
!
⽂文本显⽰示
所谓的⽂文本:就是我们的⽂文字(字符串)。 ⽂文本显⽰示:即,在视图上显⽰示⽂文字。 ⽂文本显⽰示都有哪些⽅方⾯面呢?⽐比如:⽂文本内容、⽂文本字体。 还有哪些
!
⽂文本显⽰示 所谓的⽂文本:就是我们的⽂文字(字符串)。
⽂文本显⽰示相关
!
⽂文本显⽰示:即,在视图上显⽰示⽂文字。
⽂文本内容
⽂文本字体 还有哪些
⽂文本显⽰示都有哪些⽅方⾯面呢?⽐比如:⽂文本内容、⽂文本字体。
!
⽂文本颜⾊色
⽂文本对其⽅方式
⽂文本换⾏行模式
⽂文本⾏行数
⽂文本阴影等
如何使⽤用UILabel
创建UILabel与创建UIView的步骤很相似。
1、开辟空间并初始化(如果本类有初始化⽅方法,使⽤用⾃自⼰己的;否则 使⽤用⽗父类的)。
2、设置⽂文本控制相关的属性
3、添加到⽗父视图上,⽤用以显⽰示
4、释放
UILabel使⽤用⽰示例
UILabel *userNameLabel = [[UILabel alloc]
initWithFrame:CGRectMake(30, 100, 100, 30)];
userNameLabel.text = @"⽤用户名"; [containerView addSubview:userNameLabel]; [userNameLabel release];
控制⽂文本显⽰示
UILabel的主要作⽤用是显⽰示⼀一段⽂文本,因此提供了很多与显⽰示⽂文本相关 的API
控制⽂文本显⽰示
|
属性名 |
描述 |
⽰示例 |
|
text |
要显⽰示的⽂文本内容 |
label.text = @“⽤用户名”; |
|
textColor |
⽂文本内容的颜⾊色 |
label.textColor = [UIColor redColor]; |
|
textAlignment |
⽂文本的对⻬齐⽅方式(⽔水平⽅方向) |
label.textAlignment = NSTextAlignmentLeft; |
|
label.font = [UIFont fontWithName:@“Helvetica-Bold” font ⽂文本字体 UILabel的主要作⽤用是显⽰示⼀一段⽂文本,因此提供了很多与显⽰示⽂文本相关 size:20];//⿊黑体加粗,20号字。 |
||
|
的API numberOfLines |
⾏行数 |
label.numberOfLines = 3;//显⽰示3⾏行,注意label的⾼高度要 能容纳3⾏行。如果3⾏行没能显⽰示完信息,没显⽰示的信息以 省略号代替。 |
|
lineBreakMode |
断⾏行模式 |
label.lineBreakMode = NSLineBreakByWordWrapping;// 以单词为单位换⾏行 |
|
shadowColor |
阴影颜⾊色 |
label.shadowColor = [UIColor yellowColor];//阴影阴影 |
|
shadowOffset |
阴影⼤大⼩小 |
label.shadowOffset = CGSizeMake(2,1);//阴影向x正⽅方 向偏移2,向y正⽅方向偏移1。 |
练习9
练习要求:打开登录界⾯面,将原本应该是UILabel的UIView替换为 UILabel。
小节
UIView是所有可视化控件的基类。 UILabel是具有特定外观特定功能的视图。 UILabel侧重于⽂文本的呈现。
总结
App靠window来呈现内容,⼀一个程序⼀一般只创建⼀一个window。
App中能看到的元素,都是UIView及其⼦子类。
UIView作为所有可视化控件的BaseClass,提供了许多属性和⽅方法。 显⽰示效果控制(frame、alpha等)、视图添加和移除(addSubview: 等)、视图层次调整(bringSubviewToFront:等)等。
UILabel属于具体的视图,有⾃自⼰己的侧重点
UITextField UIButton delegate
课程预告
- 保存屏幕截图快捷键 (cmd + s)
- 屏幕旋转快捷键 (cmd + →)
- 模拟器的切换
- Home键 快捷键 (cmd + shift + h)
- 模拟器的还原
- 模拟器基本设置
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100,100)];
// 2. 设置view的一些属性（背景颜色）
view.backgroundColor = [UIColor redColor];
// 3. 添加到window上
[self.window addSubview:view];
// 4. 释放
CGSize size = CGSizeMake(100, 100);
CGRect rect = CGRectMake(10, 10, 100, 100);
NSString *pointStr = NSStringFromCGPoint(point);
NSString *sizeStr = NSStringFromCGSize(size);
NSString *rectStr = NSStringFromCGRect(rect);
// addSubview:
// insertSubview:aboveSubview:
// insertSubview:atIndex:
// insertSubview:belowSubview:
// bringSubviewToFront: (重点)
// sendSubviewToBack: (重点)
// exchangeSubviewAtIndex:withSubviewAtIndex:
// alpha 控制视图的透明度，赋值范围在 0~1，浮点数
// superview 获取当前视图的父视图
// subviews 获取当前视图的所有子视图，可能会有多个（返回值是数组）
// tag 给视图添加一个数字的标记，可以通过viewWithTag: 获取到设定了tag值的视图
// 1. 申请空间，使用初始化方法，并设置位置和大小
view.backgroundColor = [UIColor purpleColor];
view.hidden = NO;
[view release];
// 创建一个UIView子类的对象，UILabel，同样也分为4步，和创建UIView类似
// 1. 申请空间，使用初始化方法（自己有初始化方法使用自己的，否则使用父类的）
label.text = @"显示的内容";
label.textColor = [UIColor blueColor];
label.textAlignment = NSTextAlignmentCenter;
[label release];