iOS开发-UI 从入门到精通(一)

一、UI概述

　　（1）UI（User Interface）用户界面，用户能看到的各种各样的页面元素；

　　（2）iOS App = 各种各样的UI控件+业务逻辑和算法；

　　（3）想要开发出一款精美的应用程序，需要熟练掌握各种各样UI控件的用法。

二、UIWindow

　　1、什么是window？

　　（1）widow是窗口，每个app都需要借助window将内容展现给用户看；

　　（2）在iOS中，使用UIWindow类来表示窗口，通常一个应用程序只创建一个UIWindow对象；

　　（3）window的主要作用是呈现内容给用户，我们不会对window做太多操作。

　　2、如何创建window？

　　（1）在创建window的时候，需要指定window的大小。

　　（2）通常window的大小（frame）与屏幕（UIScreen）大小一致。

　　示例代码：self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

　　3、补充一点：创建项目流程：

　　（1）command + shift + N—>iOS下的Application—>Empty Application。点击Next。

　　（2）输⼊Product Name，点击Next。

　　（3）选择项目保存路径，点击Create。

　　4、window如何呈现内容？下面我们将引入UIView；

三、UIView

　　1、什么是View？

　　（1）view(视图):代表屏幕上的一个矩形区域。iOS中用UIView来表示视图

　　（2）通俗的说各种UI控件都属于view。

　　（3）不同的控件代表不同种类的view。 iOS中所有能看到的内容都是view或其子类。

　　2、如何创建view？

　　（1）创建视图的步骤如下:

　　　　①开辟空间并初始化视图(初始化时,给出视图位置和大小)

　　　　②对视图做一些设置(比如:背景颜色)

　　　　③将视图添加到window上进行显示

　　　　④释放视图对象

　　（2）视图创建代码：

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

　　　　blueView.backgroundColor = [UIColor blueColor];

　　　　[self.window addSubview:blueView];

　　　　[blueView release];

　　3、什么是Frame？

　　（1）frame是view的重要属性,是我们做视图布局的关键,它决定了视图的大小和位置。

　　4、如何完全掌控view的大小和位置？下面我们将引入iOS坐标系；

　　5、iOS坐标系：

　　（1）iOS提供了用于布局的平面坐标系。左上角为坐标系的原点。

　　（2）水平向右:为x的正方向。

　　（3）垂直向下:为y的正方向。

　　（4）坐标系不是以像素作为划分依据,而是以“点”作为依据。

　　6、Frame包含什么？

　　（1）frame是一个结构体,包含2部分内容:origin和size。

　　（2）origin也是一个结构体,包含2部分内容:x和y。

　　（3）size同样是一个结构体,包含2部分内容:width和height。

　　（4）frame的origin和size是相对于父视图来说的。

　　（5）CGRectMake()函数可以帮我们快速构造一个CGRect变量。

　　7、什么是Center？

　　（1）center(中心点)也是view重要的属性。

　　（2）center是个结构体,包含2个部分:x和y。

　　（3）center与frame有着密切的联系。

　　（4）center.x = frame.origin.x + frame.size.width/2;

　 center.y = frame.origin.y + frame.size.height/2;

　　8、什么是bounds？

　　（1）bounds(边界)也是view的重要属性,用于定义自己的边界。

　　（2）它同frame一样是一个CGRect结构体变量。

　　（3）当一个view设置bounds时,会把自己当成一个容器,定义自己的边界大小以及左上角的初始坐标。

　　（4）当子视图添加到此视图时,会根据bounds指定的原点(0,0)计算frame,而非左上角。

　　9、bounds和frame和center有着微妙的联系（详见下图）：

　　


　　


　　


　　10、添加视图

　　（1）UIView的addSubview:方法可以添加子视图,对于同一个视图的所有子视图来讲,后添加的子视图会把已加的子视图盖在下面。

　　（2）UIView提供了其他添加视图的方法（详见下表）；

　　

　　

　　11、管理视图层次

　　（1）UIView除了提供添加视图的方法,还提供了管理视图层次的方法（详见下表）。

　　


　　12、视图重要属性

　　（1）UIView作为其他UI控件的BaseClass,提供了很多属性（详见下表）：

　　


四、UILabel

　　1、UILabel是什么？

　　（1）UILabel(标签):是显示文本的控件。在App中UILabel是出现频率最高的控件。

　　（2）UILabel是UIView子类,作为子类一般是为了扩充父类的功能,UILabel扩展了文字显示的功能,UILabel是能显示文字的视图。

　　2、如何使用UILabel？

　　（1）创建UILabel与创建UIView的步骤很相似。

　　　　①开辟空间并初始化(如果本类有初始化方法,使用自己的;否则使用父类的)。

　　　　②设置文本控制相关的属性。

　　　　③添加到父视图上,用以显示。

　　　　④释放。

　　（2）视图创建代码：

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

　　　　userNameLabel.text = @"用户名";

　　　　[containerView addSubview:userNameLabel];

　　　　[userNameLabel release];

　　3、如何控制文本显示？

　　（1）UILabel的主要作用是显示一段文本,因此提供了很多与显示文本相关的API（详见下表）

　　


　　4、小节

　　（1）UIView是所有可视化控件的基类。

　　（2）UILabel是具有特定外观特定功能的视图。

　　（3）UILabel侧重于文本的呈现。

五、总结

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

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

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

　　（4）UILabel属于具体的视图,有自己的侧重点

六、下一篇将持续更新配套知识点练习；

Email：dingding3w@126.com