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,大功告成!看效果

 

iOS UI基础-1.0加法计算器的更多相关文章

  1. iOS UI基础-17.0 UILable之NSMutableAttributedString

    在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦 ...

  2. iOS UI基础-9.0 UITableView基础

    在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView.UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳. UITableView有两种样式: ...

  3. iOS UI基础-4.0应用程序管理

    功能与界面 功能分析: 以九宫格的形式展示应用信息 点击下载按钮后,做出相应的操作 步骤分析: 加载应用信息 根据应用的个数创建对应的view 监听下载按钮点击 整个应用界面: 程序实现 思路 UI布 ...

  4. iOS UI基础-19.0 UICollectionView

    直接上代码,说明请看注释吧 1.继承三个代理 UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateF ...

  5. iOS UI基础-16.0 UIButton

    回归自然,UIButton是我们使用最频烦的一个控件.下面,对该控件的一些常用方法进行一些总结. UIButton *payStateBtn = [UIButton buttonWithType:UI ...

  6. iOS UI基础-15.0 UIWebView

    WebView介绍 知识点: 代码创建一个UIWebView OC调用html的js js页面调用OC 相关代码实现 代码创建一个UIWebView // 1.webView UIWebView *w ...

  7. iOS UI基础-13.0 数据存储

    应用沙盒 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒 应用沙盒的文件系统目录,如下图所示(假设应用的名称叫Lay ...

  8. iOS UI基础-12.0 Storyboard

    storyboard创建控制器 1.先加载storyboard文件(Test是storyboard的文件名) UIStoryboard *storyboard = [UIStoryboard stor ...

  9. iOS UI基础-10.0 QQ聊天布局之键盘及文本使用

    要实现的效果:   这里只说用到的几个知识点 1.图片包含文字 在设置文字的Frame的时候,使用背景(按钮)的尺寸,文字使用了内边距 背景图片,使用拉伸 /** * 返回一张可以随意拉伸不变形的图片 ...

随机推荐

  1. MacOS 安装PyQt5

    PyQt5官方安装教程指出2种安装方法: Installing from Wheels Building and Installing from Source 网上搜罗的大多是按照第二种方法安装的,本 ...

  2. MIME类型列表

    A Multipurpose Internet Mail Extensions (MIME) type is a standard that indicates the nature and form ...

  3. Excel中用countif和countifs统计符合条件的个数 good

    countif单条件统计个数   1 就以下表为例,统计总分大于(包含等于)400的人数. 2 在J2单元格输入公式=COUNTIF(I2:I22,">=400") 3 回车 ...

  4. 熟悉使用ConfigParser库读写配置文件

    Python的配置文件 配置文件 setting.ini文件是一个纯文本 [DataBase1] username = admin passwors = root [DataBase2] hostna ...

  5. Notepad++如何关闭最近打开的文件的历史记录功能

    Notepad++是Windows 操作系统下的一套非常有特色的自由软件的纯文字编辑器(许可证:GPL),有完整的中文化接口及支持多国语言编写的 功能(UTF8 技术).它的功能比Windows中的N ...

  6. Office2010安装需要MSXML版本6.10.1129.0的方法

    今天给朋友装Office2010,由于朋友之前使用的是绿化版的0ffice2007,所以卸载后安装Office遇到了若要安装Office2010,需要在计算机上安装MSXML版本6.10.1129.0 ...

  7. 构建一个基于UIView的类别

    很多时候,如果我们想给我们的控件赋值,例如给控件的长度.宽度等赋值,很麻烦 需要先获取到当前frame,再整个临时frame来保存,修改赋值后再还给当前的frame,这都是重复性高的苦力活,解决方法就 ...

  8. 9.9Dajngo MTV

    2018-9-9 14:53:53 mvc框架和 Django的MTV框架 框架参考 :https://www.cnblogs.com/liwenzhou/p/8296964.html 2018-9- ...

  9. linux写文件,追加内容

    覆盖文件 echo "hello" > filename 追加文件 echo "haha" >> filename

  10. ELK之Logstash使用useragent获取浏览器版本、型号以及系统版本

    参考文档:http://www.51niux.com/?id=216    https://www.cnblogs.com/Orgliny/p/5755384.html Logstash中的 logs ...