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

2022-09-13 18:43:30

1 创建并运行第一个App

1.1 问题

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

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

图－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，即该程序的主窗口视图，代码如下所示：

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

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

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

1.3 步骤

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

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

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

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

步骤二：创建标签UILabel对象

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

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

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

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

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

1.4 完整代码

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

#import<UIKit/UIKit.h>
@interfaceTRAppDelegate : UIResponder<UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@end
#import "TRAppDelegate.h"
@implementationTRAppDelegate
//程序真正的入口
- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//创建window对象
self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
//设置window对象的背景颜色
self.window.backgroundColor = [UIColorwhiteColor];
//向window对象中加一个标签对象
UILabel *label = [[UILabelalloc]init];
label.text = @"Hello world.";
CGRect frame = {50, 100, 100, 30};
label.frame = frame;
[self.windowaddSubview:label];
//让window对象显示出来
[self.windowmakeKeyAndVisible];
return YES
}
@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在视图页面已经成功加载到内存中时被调用一次，通常在此方法中设计界面的初始显示，因此需要将上一案例中页面所展示的内容代码写在此方法内，但须注意加载当前视图展示内容前需要先由父类加载视图：

- (void)viewDidLoad {
[superviewDidLoad];
}

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

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

2.3 步骤

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

步骤一：创建标签UILabel对象

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

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

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

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

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

2.4 完整代码

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

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

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

#import "TRAppDelegate.h"
#import "TRMyFirstViewController.h"
@implementationTRAppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
self.window.backgroundColor = [UIColorwhiteColor];
//创建根视图控制器对象
TRMyFirstViewController *myFirstViewController = [[TRMyFirstViewControlleralloc]init];
self.window.rootViewController = myFirstViewController;
[self.windowmakeKeyAndVisible];
return YES;
}
@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. 创建UIButton对象
UIButton *button = [UIButtonbuttonWithType:UIButtonTypeSystem];
//2. 设置button的各项属性
[buttonsetTitle:@"OK" forState:UIControlStateNormal];
button.frame = CGRectMake(20, 40, 280, 40);
button.backgroundColor = [UIColorlightGrayColor];
//3. 加入到父视图
[self.viewaddSubview:button];

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

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

@interfaceTRViewController ()
@property (strong, nonatomic) UILabel *label;
@end

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

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

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

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

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

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

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

代码如下所示：

[buttonaddTarget:self
action:@selector(tapButton)
forControlEvents:UIControlEventTouchUpInside];

步骤四：实现方法tapButton

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

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

3.4 完整代码

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

#import "TRViewController.h"
@interfaceTRViewController ()
@property (strong, nonatomic) UILabel *label;
@end
@implementationTRViewController
- (void)viewDidLoad
{
[superviewDidLoad];
//1. 创建button对象
UIButton *button = [UIButtonbuttonWithType:UIButtonTypeSystem];
//2. 设置button的各项属性
[buttonsetTitle:@"OK" forState:UIControlStateNormal];
button.frame = CGRectMake(20, 40, 280, 40);
button.backgroundColor = [UIColorlightGrayColor];
//3. 加入到父视图
[self.viewaddSubview:button];
//创建label对象
UILabel *label = [[UILabelalloc]init];
self.label = label;
//设置label对象的各项属性
label.text = @"要修改的内容";
label.frame = CGRectMake(50, 160, 280, 30);
label.font = [UIFont systemFontOfSize:30];
[self.viewaddSubview:label];
//给按钮添加点击事件
[buttonaddTarget:self
action:@selector(tapButton)
forControlEvents:UIControlEventTouchUpInside];
}
- (void)tapButton
{
self.label.text = @"这是修改后的内容";
}
@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文件的名字，代码如下所示：

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

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

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

4.4 完整代码

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

#import "TRAppDelegate.h"
#import "TRViewController.h"
@implementationTRAppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColorwhiteColor];
TRViewController *vc = [[TRViewControlleralloc]initWithNibName:@"TRViewController" bundle:nil];
self.window.rootViewController = vc;
[self.windowmakeKeyAndVisible];
return YES;
}
@end

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

#import "TRViewController.h"
@interfaceTRViewController ()
@property (weak, nonatomic) IBOutletUILabel *myLabel;
@end
@implementationTRViewController
- (void)viewDidLoad
{
[superviewDidLoad];
}
- (IBAction)tapButton
{
self.myLabel.text = @"哈哈,我修改成功啦";
}
@end

码农公寓

1 创建并运行第一个App

1.1 问题

1.2 方案

1.3 步骤

1.4 完整代码

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

2.1 问题

2.2 方案

2.3 步骤

2.4 完整代码

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

3.1 问题

3.2 方案

3.3 步骤

3.4 完整代码

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

4.1 问题

4.2 方案

4.3 步骤

4.4 完整代码

相关文章