iOS UI基础-1.0加法计算器

1.打开Xcode,新建一个项目

2.Single View Application是最适合初学者的模板

3.填写该应用相关信息

4.搭建UI界面

项目创建完毕后，自动帮我们做了很多配置，也自动生成了很多文件

还自动添加了开发所依赖的框架

项目中这么多文件，哪些是影响着UI界面的呢？在iOS5之前，苹果使用xib文件来描述UI界面，在iOS5之后，苹果采取了更加强大和先进的storyboard文件来描述界面（Xcode5是基于iOS7的）因此，可以得出结论：修改项目中的Main.storyboard文件就可以修改UI界面。

打开Main.storyboard文件一看，里面有一个全白的界面，其实这个界面就是模拟器上显示的界面，左边的箭头表明：程序一启动就会显示箭头所指的界面。

要想往storyboard的界面中添加其他控件，得显示工具栏：

以九宫格形式展示控件库，能同时看到更多的控件。

从右图中可以看到各种各样的控件，比如按钮、标签、文本输入框等等

5.鼠标左键，长按右边的某个控件，即可将它拖拽到左边的白色界面上

6.单击选中某个控件后，可以在右边的菜单工具栏中更改控件的属性

7.设置文本输出框只可以输入数字和小数点

8.运行程序可以发现，软件界面基本搭建完毕，键盘输入数字了。

9.监听按钮点击

打开MJViewController.m，在类扩展中增加方法声明

@interface MJViewController ()
// 这里先把IBAction看做是void
- (IBAction)compute;
@end
@implementation MJViewController
- (void)compute
{
    NSLog(@"点击了计算按钮");
}
@end

接下来，就是建立按钮和compute方法之间的关系

先点击Main.storyboard，然后点击“中分”按钮

现在已经能同时看到storyboard上的按钮 和 compute方法了，接下来建立它们之间的联系

按住Control键，用鼠标左键将按钮拖线到compute方法上，然后松开

方法左边的圈圈由空心变为实心，说明已经跟某个按钮进行了连线

就这样，重新运行程序后,点击“计算”按钮，就会自动调用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键，用鼠标左键将控件拖到对应属性上，然后松开

• 利用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,大功告成！看效果