UI基础之减法计算器

落日映苍穹つ 2021-12-11 13:23 168阅读 0赞

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

*  storyboard中添加空间
 *  UIviewController和UIView的关系
 *  程序的运行过程
 *  IBAction和IBOutlet
 *  监听控件的点击事件
 *  父控件和子控件的概念
 *  退出键盘
    
    ![122312400649551.png][]UI界面如上,整个界面上有1个按钮,3个文本标签,2个文本输入框.
    
    经过分析可知,开发步骤基本可以分为两步:
    
     *  添加需要的控件,搭建UI界面
     *  监听按钮的点击事件,获得两个文本框的值,相减,将计算好的最终结果显示到最右边的文本标签上
    
    此处使用了ios的控件UIAlertView,为了演示这个效果,这个减法计算器的思路为:用户输入两个数,当输入的第一个数大于或者等于第二个数时,执行减法运算;当第一个数小于第二个数时,认为输入不合法,弹出一个提示(此处只是为了演示这个UIAlertView而设计的),最后将结果显示到最右边的文本标签上.如下图所示：
 *  ![122313511429069.png][]
 *  下面是程序的代码: 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拖线的过程

![122318533142788.png][]

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

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

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

程序中用到了UIAlertView属性.

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

![122320246101564.png][]

转载于:https://www.cnblogs.com/hukezhu/p/4499059.html

[122312400649551.png]: /images/20211211/2d0ea13a1a3448149744ca1f4faa4487.png
[122313511429069.png]: /images/20211211/5c79d86004d04d18bbd318328e5b4a75.png
[122318533142788.png]: /images/20211211/0bf211bea4ed4195a295ca7991b18532.png
[122320246101564.png]: /images/20211211/c88715ba3ece478bb2c6bafde9dc140b.png