学习方法和阶段介绍 、 iOS界面开发引入 、 构造第一个App 、 视图控制器和视图 、 控件与事件 、 InterfaceBuilder

1 创建并运行第一个App

1.1 问题

使用Xcode创建一个App项目，该应用实现功能在界面上显示Hello World标签，在模拟器中的运行结果如图－1所示：

图－1

1.2 方案

分析图－1，首先使用Xcode创建一个Single ViewApplicaton应用，起名为MyFirstApp，如图-2所示：

图－2

然后删除Xcode的导航栏里只保留TRAppDelegate.h文件和TRAppDelageat.m文件，其他代码文件、storyboard文件以及xib文件删除，如图-3所示：

图-3

然后选择TRAppDelegate.h文件，右边的代码编辑区可见TRAppDelegate继承至UIResponder类，并遵守UIApplicationDelegate协议，并且有一个UIWindow类型的属性window，即该程序的主窗口视图，代码如下所示：

 

1. #import<UIKit/UIKit.h>
2. @interfaceTRAppDelegate : UIResponder<UIApplicationDelegate>
3. @property (strong, nonatomic) UIWindow *window;
4. @end

选择TRAppDelegate.m文件，右边的代码编辑区可见如下所示代码的方法，该方法是UIApplicationDelegate协议里面的一个方法，是App应用成功启动时调用的方法，此方法为程序的入口，因此需要将页面所展示的内容代码写在此方法内。

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
2. }

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建window对象，即应用主窗口对象

首先创建一个和屏幕大小一样的window对象，并让TRAppDelegate类的window属性指向该window对象，并将window的背景颜色设置为白色，代码如下所示：

1. //创建window对象
2. //frame是用来表示window原点坐标和宽高的属性，[[UIScreenmainScreen] bounds]用于获取屏幕的大小的，并将获取到的值赋给window的frame属性
3. self.window=[[UIWindowalloc]initWithFrame:[[UIScreenmainScreen] bounds]];
4. //设置window对象的背景颜色
5. //backgroundColor是window用于表示背景颜色的属性，将该属性的值设置为白色
6. self.window.backgroundColor = [UIColorwhiteColor];

步骤二：创建标签UILabel对象

UILabel类是标签控件，常用于显示各种文字信息，创建一个UILabel类的对象，通过UILabel的text属性和frame属性的值来设置显示的文字信息及标签的位置大小，并将该标签对象添加到应用程序的主窗口中，代码如下所示：

 

1. //创建一个标签对象
2. UILabel *label = [[UILabelalloc]init];
3. //设置标签的文字信息，label对象的text属性用于记录所需显示的文字
4. label.text = @"Hello world.";
5. //设置label的位置和大小，label的frame属性用于记录相对于父视图的原点坐标位置和宽高
6. CGRect frame = {50, 100, 100, 30};
7. label.frame = frame;
8. //将标签添加到主窗口界面
9. [self.windowaddSubview:label];

步骤三：将window对象设置为主窗口并显示

将window对象设置为主窗口并显示出来，只有成为主窗口才能与用户交互。代码如下所示：

 

1. //让window对象成为主窗口并显示出来
2. [self.windowmakeKeyAndVisible];

1.4 完整代码

本案例的完整代码如下所示：

 

1. #import<UIKit/UIKit.h>
2. @interfaceTRAppDelegate : UIResponder<UIApplicationDelegate>
3. @property (strong, nonatomic) UIWindow *window;
4. @end
5. #import "TRAppDelegate.h"
6. @implementationTRAppDelegate
7. //程序真正的入口
8. - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
9. {
10. //创建window对象
11. self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
12. //设置window对象的背景颜色
13. self.window.backgroundColor = [UIColorwhiteColor];
14. //向window对象中加一个标签对象
15. UILabel *label = [[UILabelalloc]init];
16. label.text = @"Hello world.";
17. CGRect frame = {50, 100, 100, 30};
18. label.frame = frame;
19. [self.windowaddSubview:label];
20. //让window对象显示出来
21. [self.windowmakeKeyAndVisible];
22. return YES
23. }
24. @end

2 创建有视图和控制器的App,并加入Label做子视图

2.1 问题

在实际开发中通常不会使用以上的方式写代码，因为以上方式只能实现非常简单的、只有一个界面的应用，然而实际的开发中的应用都是需要多界面进行切换，以上代码是无法实现的，因此我们需要使用视图和视图控制器，通常window里面显示的都是一整张的视图，不会将单个控件（例如UILabel）放进window里面显示，进入应用展示的第一个视图称为根视图，视图控制器则是用来控制视图显示的内容，通常视图控制器和视图都是配合来使用的。

2.2 方案

首先同第一个案例一样使用Xcode创建一个Single ViewApplicaton应用，并删除其他文件，只保留TRAppDelegate.h，和TRAppDelegate.m文件。

其次，点击右键可见如图-4所示窗口，选择New File创建一个新的TRMyFirstViewController类，该类继承至UIViewController，如图-5所示：

图－4

图－5

选择TRMyFirstViewController.m文件，右边的代码编辑区可见如下所示方法，其中viewDidLoad在视图页面已经成功加载到内存中时被调用一次，通常在此方法中设计界面的初始显示，因此需要将上一案例中页面所展示的内容代码写在此方法内，但须注意加载当前视图展示内容前需要先由父类加载视图：

1. - (void)viewDidLoad {
2. [superviewDidLoad];
3. }

最后选择TRAppdelegate.m文件，导入TRMyFirstViewController类的头文件，在didFinishLaunchingWithOptions方法中，创建一个TRMyFirstViewController类的对象，作为该应用主窗口window的根视图控制器，代码如下所示：

1. TRMyFirstViewController *myFirstViewController = [[TRMyFirstViewControlleralloc]init];
2. self.window.rootViewController = myFirstViewController;

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建标签UILabel对象

在viewDidload方法里面创建一个UILabel对象，同上一个案例一样设置其显示的文字信息、位置大小和背景颜色，并将UILabel对象添加到当前视图中，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [superviewDidLoad];
4. //1. 创建一个UILabel对象
5. UILabel *label = [[UILabelalloc]init];
6. //2. 设置相关属性
7. label.text = @"Hello World.";
8. label.frame = CGRectMake(50, 60, 200, 30);
9. label.backgroundColor = [UIColorgreenColor];
10. //3. 将对象加入到当前视图中
11. [self.viewaddSubview:label];
12. }

步骤二：创建主窗口window的根视图控制器对象

在TRAppdelegate.m文件的didFinishLaunchingWithOptions程序入口方法中，创建一个TRMyFirstViewController类的对象，作为该应用主窗口window的根视图控制器，代码如下所示：

 

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
2. {
3. self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
4. self.window.backgroundColor = [UIColorwhiteColor];
5. //创建根视图控制器对象
6. TRMyFirstViewController *myFirstViewController = [[TRMyFirstViewControlleralloc]init];
7. self.window.rootViewController = myFirstViewController;
8. [self.windowmakeKeyAndVisible];
9. return YES;
10. }

2.4 完整代码

本案例中，TRMyFirstViewController.m文件中的完整代码如下所示：

 

1. #import "TRMyFirstViewController.h"
2. @implementationTRMyFirstViewController
3. //当本视图控制器被成功加载时自动调用一次
4. - (void)viewDidLoad
5. {
6. [superviewDidLoad];
7. //1. 创建对象
8. UILabel *label = [[UILabelalloc]init];
9. //2. 设置相关属性
10. label.text = @"Hello World.";
11. label.frame = CGRectMake(50, 60, 200, 30);
12. label.backgroundColor = [UIColorgreenColor];
13. //3. 将对象加入到父视图中
14. [self.viewaddSubview:label];
15. }
16. @end

TRAppDelegate.m文件中的完整代码如下所示：

 

1. #import "TRAppDelegate.h"
2. #import "TRMyFirstViewController.h"
3. @implementationTRAppDelegate
4. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
5. {
6. self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
7. self.window.backgroundColor = [UIColorwhiteColor];
8. //创建根视图控制器对象
9. TRMyFirstViewController *myFirstViewController = [[TRMyFirstViewControlleralloc]init];
10. self.window.rootViewController = myFirstViewController;
11. [self.windowmakeKeyAndVisible];
12. return YES;
13. }
14. @end

3 在App的视图中加入按钮子视图

3.1 问题

创建一个按钮（UIButton类），将按钮添加到界面中，给按钮添加点击事件，用来修改一个Label的显示内容，如图-6和图-7所示：

图-6

图-7

3.2 方案

首先同第二个案例一样使用Xcode创建一个Single View Application，保留TRAppDelegate类，并创建好TRViewController视图控制器类，完成TRAppDelegate.m文件中的代码。

然后，给界面添加按钮和标签，代码写在TRViewController.m文件里的viewDidLoad方法中。

最后给按钮添加点击事件，修改标签中的显示内容。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建按钮button对象，并设置相关属性

使用工厂方法创建一个UIButton类的按钮对象button，并进行button的各项属性设置，添加到父视图中。代码如下所示：

 

1. //1. 创建UIButton对象
2. UIButton *button = [UIButtonbuttonWithType:UIButtonTypeSystem];
3. //2. 设置button的各项属性
4. [buttonsetTitle:@"OK" forState:UIControlStateNormal];
5. button.frame = CGRectMake(20, 40, 280, 40);
6. button.backgroundColor = [UIColorlightGrayColor];
7. //3. 加入到父视图
8. [self.viewaddSubview:button];

步骤二：创建标签label对象，并设置相关属性

创建一个UILabel类的标签对象label，并进行label的各项属性设置，添加到父视图中，这里的label对象需要在整个TRViewController类中使用，因此需要设置为TRViewController类的属性。代码如下所示：

 

1. @interfaceTRViewController ()
2. @property (strong, nonatomic) UILabel *label;
3. @end

创建label对象和属性设置的代码写在viewDidLoad方法中，代码如下所示：

 

1. UILabel *label = [[UILabelalloc]init];
2. self.label = label;
3. label.text = @"要修改的内容";
4. label.frame = CGRectMake(50, 160, 280, 30);
5. label.font = [UIFont systemFontOfSize:30];
6. [self.viewaddSubview:label];

步骤三：给按钮添加点击事件

使用addTarget:action:forControlEvents:方法给按钮添加点击事件。

target：表示目标对象，即当按钮触发了事件时会向哪个对象发消息，经常会用self, 表示向当前对象发消息。

action:表示动作，即向target对象发送的消息，这里是方法tapButton。

events:表示事件，当触发了按钮对象的某种事件时，才向target发action消息，这里使用的是UIControlEventTouchUpInside事件，即在按钮内部点击事件。

代码如下所示：

 

1. [buttonaddTarget:self
2. action:@selector(tapButton)
3. forControlEvents:UIControlEventTouchUpInside];

步骤四：实现方法tapButton

当点击按钮出发按钮事件时，将需要完成的事情在tapButton方法里面实现，在这里需要完成的事情是修改label标签的显示内同，代码如下所示：

1. - (void)tapButton
2. {
3. self.label.text = @"这是修改后的内容";
4. }

3.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
2. @interfaceTRViewController ()
3. @property (strong, nonatomic) UILabel *label;
4. @end
5. @implementationTRViewController
6. - (void)viewDidLoad
7. {
8. [superviewDidLoad];
9. //1. 创建button对象
10. UIButton *button = [UIButtonbuttonWithType:UIButtonTypeSystem];
11. //2. 设置button的各项属性
12. [buttonsetTitle:@"OK" forState:UIControlStateNormal];
13. button.frame = CGRectMake(20, 40, 280, 40);
14. button.backgroundColor = [UIColorlightGrayColor];
15. //3. 加入到父视图
16. [self.viewaddSubview:button];
17. //创建label对象
18. UILabel *label = [[UILabelalloc]init];
19. self.label = label;
20. //设置label对象的各项属性
21. label.text = @"要修改的内容";
22. label.frame = CGRectMake(50, 160, 280, 30);
23. label.font = [UIFont systemFontOfSize:30];
24. [self.viewaddSubview:label];
25. //给按钮添加点击事件
26. [buttonaddTarget:self
27. action:@selector(tapButton)
28. forControlEvents:UIControlEventTouchUpInside];
29. }
30. - (void)tapButton
31. {
32. self.label.text = @"这是修改后的内容";
33. }
34. @end

4 创建带有xib的App，并在程序代码中访问xib中创建的对象

4.1 问题

在实际的开发中除了可以用代码进行界面的操作，还可以使用可视化编程工具xib进行界面的构建，以提高开发的效率，本案例使用xib构件界面并在代码中访问xib创建的各种控件，点击按钮修改标签中的显示内容。界面效果在模拟器中运行如图－8所示：

图－8

4.2 方案

xib以前是一个独立的可视化编程工具，从xcode4开始集成到xcode中，方便程序员的使用，提高开发效率。

xib的工作原理：将界面上需要的控件(或视图)的创建、属性的设置、之间的关系等都保存到一个xml文件中，程序运行时，从xml文件中读取所有的控件(或视图)的配置，自动创建出这些对象，并加入到父视图中。

首先创建一个带有xib文件的视图控制器TRViewController，通常这个xib文件和与它关联的视图控制器的名字保持一致，这里视图控制器类名字为TRViewController，则xib文件名为TRViewController.xib，如图-9所示。

图-9

其次从右边栏的对象库（图-10）中选择界面所需的控件，拖放到xib界面中，在右边栏的检查器（图-11）中可以设置控件的各种的属性，本案例中拖放一个Button控件和一个Label控件到xib界面。

图-10

图-11

然后在TRAppDelegate.m文件中创建TRViewController对象时，使用初始化方法initWithNibName:，该方法会从xib文件创建TRViewController对象，这里NibName参数就是xib文件的名字，代码如下所示：

1. TRViewController *vc = [[TRViewControlleralloc]initWithNibName:@"TRViewController" bundle:nil];

最后将xib中拖放的控件和代码关联，通过代码访问xib创建的label和button。

4.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建xib文件

首先同第一个案例一样使用Xcode创建一个Single View Applicaton应用，并删除其他文件，只保留TRAppDelegate.h，和TRAppDelegate.m文件。

创建TRViewController类文件，这次在创建视图控制器时，需要在Also create XIB file前的选择框上打上勾，表示在创建TRViewController对象的同时创建与之相关联的xib文件，如图-12所示。

图-12

创建生成的xib文件如图-13所示：

图-13

步骤二：将Button拖放到xib界面中

从对象库中选择Button控件拖放到xib界面中，在右边栏的检查器中设置Button控件的title属性，如图-14和图-15所示：

图-14

图-15

步骤三：将Label拖放到xib界面中

从对象库中选择Label控件拖放到xib界面中，在右边栏的检查器中设置Label控件的text属性，如图-16和图-17所示：

图-16

图-17

最后完成的xib界面如图-18所示：

图-18

步骤四：将xib中的Label与代码关联

要在程序代码中访问xib创建的对象，需要使用连接输出口（IBOutlet）。IBOutlet是一种属性，这种属性指向了xib中的一个对象。

先将xib中的Label对象关联成TRViewController类的私有属性，点击Xcode工具栏右上角的辅助编辑器按钮，打开Xcode的辅助编辑器，辅助编辑界面显示的是TRViewController.m文件，如图-19所示：

图-19

选中xib中的Label，按住control键，将Label拖拽到TRViewController.m文件中的类扩展中，释放鼠标，会弹出如图-20所示的窗口：

图-20

在弹出窗口里的Connection栏中选择Outlet，将输出口命名为myLabel，如图-21所示：

图-21

点击connect按钮，在类扩展里会自动生成一行代码，并且此代码前会出现一个实心的圆圈，表示xib中Label对象已经关联成功，如果未关联成功会显示一个空心的圆圈，如图-22所示：

图-22

步骤五：给xib中的Button添加点击事件

给xib中的Button添加点击事件，需要使用动作IBAction。IBAction是一个方法，这个方法连接到了xib中的一个控件的某个事件上。当用户触发了这个控件的这个事件时，就会调用此方法。

同上一步一样打开Xcode的辅助编辑器，辅助编辑界面显示的是TRViewController.m文件，选择xib中的button对象，按住control键，将Button拖拽到TRViewController.m文件中，释放鼠标，会弹出如图-23所示的窗口：

图-23

在弹出窗口里将动作命名为tapAction，type选择为UIButton，arguments选为none，表示不带参数的方法，如图-24所示：

图-24

点击connect按钮，TRViewController.m文件中生成如图-25中的方法，并且此方法前会出现一个实心的圆圈，表示xib中Button对象点击事件添加成功，如果未关联成功会显示一个空心的圆圈，如图-25所示：

图-25

最后将此方法实现，代码如下所示：

 

1. - (IBAction)tapButton
2. {
3. self.myLabel.text = @"哈哈,我修改成功啦";
4. }

4.4 完整代码

本案例，TRAppDelegate.m中的完整代码如下所示：

 

1. #import "TRAppDelegate.h"
2. #import "TRViewController.h"
3. @implementationTRAppDelegate
4. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
5. {
6. self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
7. // Override point for customization after application launch.
8. self.window.backgroundColor = [UIColorwhiteColor];
9. TRViewController *vc = [[TRViewControlleralloc]initWithNibName:@"TRViewController" bundle:nil];
10. self.window.rootViewController = vc;
11. [self.windowmakeKeyAndVisible];
12. return YES;
13. }
14. @end

本案例，TRViewController.m中的完整代码如下所示：

 

1. #import "TRViewController.h"
2. @interfaceTRViewController ()
3. @property (weak, nonatomic) IBOutletUILabel *myLabel;
4. @end
5. @implementationTRViewController
6. - (void)viewDidLoad
7. {
8. [superviewDidLoad];
9. }
10. - (IBAction)tapButton
11. {
12. self.myLabel.text = @"哈哈,我修改成功啦";
13. }
14. @end