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

两者联系 两者联系

?自?身的宽?高
化。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作为其他UI控件的BaseClass,提供了很多属性。 !
!

视图重要属性

五、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

控制?文本显?示

练习9

练习要求:打开登录界?面,将原本应该是UILabel的UIView替换为 UILabel。

?小节

UIView是所有可视化控件的基类。 UILabel是具有特定外观特定功能的视图。 UILabel侧重于?文本的呈现。

总结

App靠window来呈现内容,?一个程序?一般只创建?一个window。

App中能看到的元素,都是UIView及其?子类。

UIView作为所有可视化控件的BaseClass,提供了许多属性和?方法。 显?示效果控制(frame、alpha等)、视图添加和移除(addSubview: 等)、视图层次调整(bringSubviewToFront:等)等。

UILabel属于具体的视图,有?自?己的侧重点

UITextField UIButton delegate

课程预告

UIView