【iOS基础控件 -1】 【demo】 第一个iOS程序--加法计算器

准备知识：

一.storyboard文件

1.在iOS5之前，苹果使用xib文件来描述UI界面
2.在iOS5之后，苹果采取了更加强大和先进的storyboard文件来描述界面（Xcode5是基于iOS7的）
3.左边的箭头表明：程序一启动就会显示箭头所指的界面

 

二：uiview（重要）

1.屏幕上能看得见摸得着的东西就是UIView，比如屏幕上的按钮、文字、图片
2.一般翻译叫做：视图\控件\组件
3.UIButton、UILabel、UITextField都继承自UIView
4.每一个UIView都是一个容器，能容纳其他UIView（比如右图中的整个键盘是一个UIView，里面容纳很多小格子的数字UIView）

三：UIViewController（重要）

1.其实，每当显示一个新界面时，首先会创建一个新的UIViewController对象，然后创建一个对应的全屏UIView，UIViewController负责管理这个UIView
2.UIViewController就是UIView的大管家，负责创建、显示、销毁UIView，负责监听UIView内部的事件，负责处理UIView与用户的交互
3.UIViewController内部有个UIView属性，就是它负责管理的UIView对象 ：
@property(nonatomic,retain) UIView *view;

 

开始程序：

一.思路

1.读取Main.storyboard文件

从简单的storyboard开始，将控件拖拽到storyboard上

 

单击选中某个控件后，可以在右边的菜单工具栏中更改控件的属性 ：属性很多，很有趣，望文生义

2.增加按钮监听的方法

 

打开MJViewController.m，在类扩展中增加方法声明
@interface MJViewController ()
// 这里先把IBAction看做是void
- (IBAction)compute;
@end

与oc一样，在.h文件中声明也是可行
但苹果推荐 在.m中声明的方法是私有方法，外界无法直接访问，保证了封装性

增加方法实现：
@implementation MJViewController
- (void)compute
{
    NSLog(@"点击了计算按钮");
}
@end

 

 

3.建立按钮与方法的联系

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

b.方法左边的圈圈由空心变为实心，说明已经跟某个按钮进行了连线
c.就这样，点击“计算”按钮，就会自动调用compute方法了

4.增加控件属性方法

 

现在已经能够监听按钮的点击事件了，接下来应该在MJViewController的compute方法拿到两个文本框值，然后把计算结果显示到最右边的文本标签

在类扩展中，声明3个属性，用来访问storyboard中的3个控件 
@property (nonatomic, weak) IBOutlet UITextField *number1;
@property (nonatomic, weak) IBOutlet UITextField *number2;
@property (nonatomic, weak) IBOutlet UILabel *result;

提醒
IBOutlet和weak的作用会在后面解释
初学者最容易犯、最不应该犯的一个错误：钻牛角尖

 

建立控件与属性的联系

实现compute（）方法

 

- (void)compute
{
    // 获取第一个数值
        int num1 = [self.number1.text intValue];
    // 获取第二个数值
        int num2 = [self.number2.text intValue];
    // 设置文本标签的值
        self.result.text = [NSString stringWithFormat:@"%d", num1 + num2];
}

final：command +r 运行，搞定

 

注意事项（以防忘记）

1.IBAction:
1> 能保证方法可以连线
2> 相当于void

2.IBOutlet:
1> 能保证属性可以连线

3.常见错误
setValue:forUndefinedKey:]: this class is not key value coding
错误原因是:连线出问题了

4.Xcode5开始的一些建议
把用于连线的一些方法和属性声明在.m文件的类扩展中

5.frame\center\bounds
1> frame:能修改位置和尺寸
2> center:能修改位置
3> bounds:能修改尺寸(x\y一般都是0)

4>通过以下属性可以修改控件的位置
　　frame.origin
　　center

5>通过以下属性可以修改控件的尺寸
　　frame.size
　　bounds.size

6>利用transform属性可以修改控件的位移（位置），缩放（尺寸），旋转