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];
}

OK,大功告成!看效果

时间: 2024-08-02 02:39:26

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

iOS UI基础-9.0 UITableView基础

在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView.UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳. UITableView有两种样式: 一列显示:UITableViewStylePlain 分组显示:UITableViewStyleGrouped tableView展示数据的过程 1.调用数据源的下面方法得知一共有多少组数据 - (NSInteger)numberOfSectionsInTableView:(UITableView

iOS UI基础-17.0 UILable之NSMutableAttributedString

在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦,而且很多UILabel的属性也不起作用了,效果都不理想.后来了解到NSMuttableAttstring(带属性的字符串),上面的一些需求都可以很简便的实现. NSMuttableAttstring 方法 为某一范围内文字设置多个属性 - (void)setAttributes:(NSDictio

iOS UI基础-13.0 数据存储

应用沙盒 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒 应用沙盒的文件系统目录,如下图所示(假设应用的名称叫Layer) 模拟器应用沙盒的根路径在: (apple是用户名, 6.0是模拟器版本) /Users/apple/Library/Application Support/iPhone Simulator/6.0/Applications 应用沙盒结构分析 应用程序包:(上图中的Layer)包含了所有的资源

iOS UI基础-6.0 UIActionSheet的使用

UIActionSheet是在iOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件. 使用 1.需要实现UIActionSheetDelegate  协议 @interface NJWisdomCardDetailViewController ()<UIActionSheetDelegate> @end 2.弹出选择按钮框 - (void)showSheet{ UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitl

iOS UI基础-16.0 UIButton

回归自然,UIButton是我们使用最频烦的一个控件.下面,对该控件的一些常用方法进行一些总结. UIButton *payStateBtn = [UIButton buttonWithType:UIButtonTypeCustom]; payStateBtn.frame = CGRectMake(12, 10, ScreenWidth - 50, 22); // 设置字体居中方向 payStateBtn.contentHorizontalAlignment = UIControlContent

iOS UI基础-7.0 UIScrollView

概述 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限.当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容,普通的UIView不具备滚动功能,不能显示过多的内容.UIScrollView是一个能够滚动的视图控件,可以用来展示大量的内容,并且可以通过滚动查看所有的内容 UIScrollView的常见属性 UIScrollView的常用代理方法 UIScrollView的缩放 UIScrollView使用 基本使用 UIScrollView的用法很简单,将

iOS UI基础-3.0图片浏览器及plist使用

需求: 1.显示当前图片序号/总图片数 2.显示图片 3.上一张图片.下一张图片转换 4.显示图片描述 下面用代码来实现 // // UYViewController.m // 3.0图片查看器 // // Created by jiangys on 15/8/19. // Copyright (c) 2015年 uxiaoyuan. All rights reserved. // #import "UYViewController.h" @interface UYViewContro

iOS UI基础-19.0 UICollectionView

直接上代码,说明请看注释吧 1.继承三个代理 UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout 2.直接看代码 #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDi

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

要实现的效果:   这里只说用到的几个知识点 1.图片包含文字 在设置文字的Frame的时候,使用背景(按钮)的尺寸,文字使用了内边距 背景图片,使用拉伸 /** * 返回一张可以随意拉伸不变形的图片 * * @param name 图片名字 */ + (UIImage *)resizableImage:(NSString *)name { UIImage *normal = [UIImage imageNamed:name]; CGFloat w = normal.size.width * 0