UIView

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之间有着微妙的联系。 frame                                                                            bounds
它们之间 参考系	父视图 的关系,见表格。	自身
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; UIView *view = [superview viewWithTag: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

课程预告

 

模拟器的使用：

1. 保存屏幕截图快捷键 (cmd + s)
2. 屏幕旋转快捷键 (cmd + →)
3. 模拟器的切换 
4. Home键 快捷键 (cmd + shift + h)
5. 模拟器的还原
6. 模拟器基本设置

 

 

获取屏幕大小：

      [[UIScreen mainScreen] bounds]

 

 

UIColor类的简单使用：

   使用类方法获取不同颜色类型

 

 

 

创建UIView：

// 创建视图并添加到window上

// 1. 申请内存并初始化，初始设置位置和大小
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100,100)];
// 2. 设置view的一些属性（背景颜色）
view.backgroundColor = [UIColor redColor];
// 3. 添加到window上
[self.window addSubview:view];
// 4. 释放

[view release];

 

 

frame的计算和创建：

     CGRectMake(10, 10, 100, 100)

     // 使用CGRectMake(x, y, width, height)函数来创建

 

 

bounds与frame与center之间的关系

 

 

UIWindow的父类： UIView (继承了UIView所有的属性和方法)

UIWindow的作用： 承载UIView或者UIView的子类，对控件进行显示

一个应用程序中，我们只创建一个UIWindow，并且不会对UIWindow做过多的处理

 

 

我们在页面上所能看到的东西，都是UIView或者是UIView的子类（有几个特殊的不属于UIView，后期课程讲解）

 

 

iOS中的坐标系：

     左上角为原点

     向右方X值依次增大

     向下方Y值依次增大

 

 

结构体的创建和与字符串的转换函数：

// 快速创建结构体的函数

CGPoint point = CGPointMake(10, 10);
CGSize size = CGSizeMake(100, 100);
CGRect rect = CGRectMake(10, 10, 100, 100);

NSRange range = NSMakeRange(1, 3);

// 使用函数将结构体转为字符串，方便打印
NSString *pointStr = NSStringFromCGPoint(point);
NSString *sizeStr = NSStringFromCGSize(size);
NSString *rectStr = NSStringFromCGRect(rect);

NSString *rangeStr = NSStringFromRange(range);

 

 

// 添加视图的方法
// addSubview:
// insertSubview:aboveSubview:
// insertSubview:atIndex:
// insertSubview:belowSubview:

 

// 修改视图的层次
// bringSubviewToFront:  (重点)
// sendSubviewToBack:  (重点)
// exchangeSubviewAtIndex:withSubviewAtIndex:

// removeFromSuperView  (重点)

 

// UIView对象的一些常用属性

// backgroundColor  设置视图的背景颜色

// hidden   控制视图的显示与隐藏
// alpha  控制视图的透明度，赋值范围在 0~1，浮点数
// superview  获取当前视图的父视图
// subviews  获取当前视图的所有子视图，可能会有多个（返回值是数组）
// tag  给视图添加一个数字的标记，可以通过viewWithTag: 获取到设定了tag值的视图

 

 

// 创建一个View，分为4步
// 1. 申请空间，使用初始化方法，并设置位置和大小

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100,100)];

// 2. 设置view的相关属性
view.backgroundColor = [UIColor purpleColor];
view.hidden = NO;

view.alpha = 0.8f;

// 3. 添加到父视图上

[_window addSubview:view];

// 4. release一次
[view release];


// 创建一个UIView子类的对象，UILabel，同样也分为4步，和创建UIView类似
// 1. 申请空间，使用初始化方法（自己有初始化方法使用自己的，否则使用父类的）

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 300, 100,30)];

// 2. 设置label的相关属性
label.text = @"显示的内容";
label.textColor = [UIColor blueColor];
label.textAlignment = NSTextAlignmentCenter;

label.backgroundColor = [UIColor cyanColor];

// 3. 添加到父视图上

[_window addSubview:label];

// 4. release一次
[label release];