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

时间:2024-08-24 14:37:08

1 创建并运行第一个App

1.1 问题

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

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

图-1

1.2 方案

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

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

图-2

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

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

图-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所示:

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

图-4

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

图-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所示:

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

图-6

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

图-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所示:

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

图-8

4.2 方案

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

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

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

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

图-9

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

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

图-10

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

图-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所示。

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

图-12

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

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

图-13

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

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

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

图-14

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

图-15

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

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

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

图-16

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

图-17

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

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

图-18

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

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

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

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

图-19

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

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

图-20

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

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

图-21

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

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

图-22

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

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

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

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

图-23

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

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

图-24

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

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

图-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