UI基础之减法计算器

今天学习了一个ios应用的小实例,也是首次接触UI界面.下面大体介绍一下,这个减法计算器,只是单纯的为了演示UI界面的搭建和入门,没有任何的实用性.主要用到的知识点有:

• storyboard中添加空间
• UIviewController和UIView的关系
• 程序的运行过程
• IBAction和IBOutlet
• 监听控件的点击事件
• 父控件和子控件的概念
• 退出键盘
  
  UI界面如上,整个界面上有1个按钮,3个文本标签,2个文本输入框.

  经过分析可知,开发步骤基本可以分为两步:

  • 添加需要的控件,搭建UI界面
  • 监听按钮的点击事件,获得两个文本框的值,相减,将计算好的最终结果显示到最右边的文本标签上

  此处使用了ios的控件UIAlertView,为了演示这个效果,这个减法计算器的思路为:用户输入两个数,当输入的第一个数大于或者等于第二个数时,执行减法运算;当第一个数小于第二个数时,认为输入不合法,弹出一个提示(此处只是为了演示这个UIAlertView而设计的),最后将结果显示到最右边的文本标签上.如下图所示：

• 
• 下面是程序的代码: ViewController.m

 1 //
 2 //  ViewController.m
 3 //  01-calculator
 4 //
 5 //  Created by hukezhu on 15/5/9.
 6 //
 7 //
 8 /*
 9     用户输入两个数,当输入的第一个数大于或者等于第二个数时,执行减法运算;
10     当第一个数小于第二个数时,认为输入不合法,最后将结果显示到对应位置
11  */
12
13 #import "ViewController.h"
14
15 //类扩展(私有)
16 @interface ViewController ()
17 /**
18  *  第一个文本输入框
19  */
20 @property (weak, nonatomic) IBOutlet UITextField *num1;
21 /**
22  *  第二个文本输入框
23  */
24 @property (weak, nonatomic) IBOutlet UITextField *num2;
25
26 /**
27  *  显示结果的文本标签(最右边)
28  */
29 @property (weak, nonatomic) IBOutlet UILabel *num3;
30 /**
31  *  点击计算按钮后的响应方法
32  */
33 - (IBAction)compute;
34 @end
35
36 @implementation ViewController
37
38 - (void)viewDidLoad {
39     [super viewDidLoad];
40
41 }
42 - (IBAction)compute {
43     //取得两个文本输入框的值
44     NSString *text1 = self.num1.text;
45     NSString *text2 = self.num2.text;
46     //定义一个变量来接收计算结果
47     int sum = 0;
48     //执行判断
49     //当第一个数大于或者等于第二个数时
50     if (text1.intValue >= text2.intValue) {
51         //将结果计算出来赋值给sum
52         sum = text1.intValue - text2.intValue;
53     }else{
54         //第一个数小于第二个数时,弹出一个提示消息
55         //这里使用到了UIAlertView,创建一个alert对象
56
57         UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"输入不合法" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
58         //调用show方法,显示出来
59         [alert show];
60     }
61     //将结果显示到最右边的文本输入框中
62     self.num3.text = [NSString stringWithFormat:@"%i",sum];
63     //退出键盘
64     [self.view endEditing:YES];
65
66
67 }
68 @end

下图是storyboard拖线的过程

下面介绍一些前面提到的主要知识点:

• storyboard:用来描述界面,其中的箭头表示程序的入口,指的时一个控制器
• view:表示视图,也叫做控件
• viewController:视图控制器,用来管理视图,包括管理视图的创建和销毁,包括监听其中的子控件和用户的交互

• 退出键盘:释放第一响应者(叫出键盘的控件)调用resignFirstResponder方法,释放第一响应者,缺陷是:假设一个界面上有多个控件用到键盘,则需要每个控件都要调用这个方法,比较繁琐.
• 退出键盘:第一响应者的父控件退出编辑状态[self.view
  endEditing:YES];优点是只需调用一次即可退出所有键盘.
• 程序运行的过程:当程序运行的时候,程序加载storyboard文件中箭头所指的控制器,然后控制器负责创建里面的视图,视图负责创建里面的小的控件,然后将界面显示到屏幕上.

程序中用到了UIAlertView属性.

[[UIAlertView alloc]initWithTitle:@"提示框的标题" message:@"提示的详细信息"
delegate:@"代理" cancelButtonTitle:@"结束按钮的标题"
otherButtonTitles:@"其他按钮的标题(比如说结束时有多个选项的时候)", nil];