1.打开Xcode,新建一个项目
![](https://i-blog.csdnimg.cn/blog_migrate/a1409b7fb83bc54b9e7d55c059eeee93.png)
2.Single View Application是最适合初学者的模板
![](https://i-blog.csdnimg.cn/blog_migrate/470f64a762271a2e5bbe313a95e1578d.png)
3.填写该应用相关信息
![](https://i-blog.csdnimg.cn/blog_migrate/3d0f9a5d2f7ec91f9d89761e03cfcfc1.png)
4.搭建UI界面
项目创建完毕后,自动帮我们做了很多配置,也自动生成了很多文件
![](https://i-blog.csdnimg.cn/blog_migrate/ec5c58a150d83dddccc8c280e823cd31.png)
还自动添加了开发所依赖的框架
![](https://i-blog.csdnimg.cn/blog_migrate/dbd61a3a3cd88e64e83ad8aa0a918c69.png)
项目中这么多文件,哪些是影响着UI界面的呢?在iOS5之前,苹果使用xib文件来描述UI界面,在iOS5之后,苹果采取了更加强大和先进的storyboard文件来描述界面(Xcode5是基于iOS7的)因此,可以得出结论:修改项目中的Main.storyboard文件就可以修改UI界面。
打开Main.storyboard文件一看,里面有一个全白的界面,其实这个界面就是模拟器上显示的界面,左边的箭头表明:程序一启动就会显示箭头所指的界面。
![](https://i-blog.csdnimg.cn/blog_migrate/8147a973c966e681c20430f5f5b7d5d5.png)
要想往storyboard的界面中添加其他控件,得显示工具栏:
![](https://i-blog.csdnimg.cn/blog_migrate/72de544605baf83b91cfaa07fae13dea.png)
以九宫格形式展示控件库,能同时看到更多的控件。
从右图中可以看到各种各样的控件,比如按钮、标签、文本输入框等等
![](https://i-blog.csdnimg.cn/blog_migrate/bdd37c62b01d46f2668427b025c66e68.png)
5.鼠标左键,长按右边的某个控件,即可将它拖拽到左边的白色界面上
![](https://i-blog.csdnimg.cn/blog_migrate/327451c9b553381f0bac8ec229342960.png)
6.单击选中某个控件后,可以在右边的菜单工具栏中更改控件的属性
![](https://i-blog.csdnimg.cn/blog_migrate/aad09bb79672a5bff328f521546e6771.png)
7.设置文本输出框只可以输入数字和小数点
![](https://i-blog.csdnimg.cn/blog_migrate/a6fcf9130bc1ecb5381856cb423135ce.png)
8.运行程序可以发现,软件界面基本搭建完毕,键盘输入数字了。
![](https://i-blog.csdnimg.cn/blog_migrate/7e1700694a00252d55e69ed602420a2e.png)
9.监听按钮点击
打开MJViewController.m,在类扩展中增加方法声明
@interface MJViewController () // 这里先把IBAction看做是void - (IBAction)compute; @end @implementation MJViewController - (void)compute { NSLog(@"点击了计算按钮"); } @end
接下来,就是建立按钮和compute方法之间的关系
先点击Main.storyboard,然后点击“中分”按钮
![](https://i-blog.csdnimg.cn/blog_migrate/a78f5783600fff7df65859faaa3f154f.png)
现在已经能同时看到storyboard上的按钮 和 compute方法了,接下来建立它们之间的联系
![](https://i-blog.csdnimg.cn/blog_migrate/e4232bcf56cf600103490b2efacd584d.png)
按住Control键,用鼠标左键将按钮拖线到compute方法上,然后松开
![](https://i-blog.csdnimg.cn/blog_migrate/efde9139171947853c7c9ca46e9c5509.png)
方法左边的圈圈由空心变为实心,说明已经跟某个按钮进行了连线
就这样,重新运行程序后,点击“计算”按钮,就会自动调用compute方法了,控制台已经有输出信息
现在已经能够监听按钮的点击事件了,接下来应该在MJViewController的compute方法拿到两个文本框值,然后把计算结果显示到最右边的文本标签
在类扩展中,声明3个属性,用来访问storyboard中的3个控件
@property (nonatomic, weak) IBOutlet UITextField *number1; @property (nonatomic, weak) IBOutlet UITextField *number2; @property (nonatomic, weak) IBOutlet UILabel *result;
按住Control键,用鼠标左键将控件拖到对应属性上,然后松开
![](https://i-blog.csdnimg.cn/blog_migrate/a99987305df0b1fe3181436981217d25.png)
- 利用MJViewController的number1属性就能访问第1个文本框;
- 利用MJViewController的number2属性就能访问第2个文本框;
- 利用MJViewController的result属性就能访问右边的文本标签。
在compute方法中计算两个文本框的和,将结果显示到右边的标签中
- (void)compute { // 获取第一个数值 int num1 = [self.number1.text intValue]; // 获取第二个数值 int num2 = [self.number2.text intValue]; // 设置文本标签的值 self.result.text = [NSString stringWithFormat:@"%d", num1 + num2];
//参数表示强行关闭键盘,始终使用YES作为参数
[self.view endEditing:YES]; }
OK,大功告成!看效果