- 1、本文档共22页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
打开Xcode
选择项目模板
Single View Application是最适合初学者的模板
设置项目属性
运行程序
不管怎样,先运行第一个iOS程序看看效果先(用快捷键Command + R 也行)
运行结果
Xcode会启动一个iOS模拟器来运行程序
程序的运行结果如右图所示,白白一片
后面我们得往这空白界面上增添各种各样的控件元素
窥探项目环境
项目创建完毕后,自动帮我们做了很多配置,也自动生成了很多文件
还自动添加了开发所依赖的框架:
如何搭建UI界面
项目中这么多文件,哪些是影响着UI界面的呢?
在iOS5之前,苹果使用xib文件来描述UI界面
在iOS5之后,苹果采取了更加强大和先进的storyboard文件来描述界面(Xcode5是基于iOS7的)
因此,可以得出结论:
修改项目中的Main.storyboard文件就可以修改UI界面
窥探Main.storyboard
打开Main.storyboard文件一看,里面有一个全白的界面
其实这个界面就是模拟器上显示的界面
左边的箭头表明:程序一启动就会显示箭头所指的界面
显示工具栏
要想往storyboard的界面中添加其他控件,得显示工具栏
显示控件库
以九宫格形式展示控件库,能同时看到更多的控件
从右图中可以看到各种各样的控件,比如按钮、标签、文本输入框等等
添加控件
鼠标左键,长按右边的某个控件,即可将它拖拽到左边的白色界面上
修改控件属性
单击选中某个控件后,可以在右边的菜单工具栏中更改控件的属性
运行效果
运行程序可以发现,软件界面基本搭建完毕,也能通过键盘输入数字了
增加监听按钮的方法
打开MJViewController.m,在类扩展中增加方法声明
@interface MJViewController ()
// 这里先把IBAction看做是void
- (IBAction)compute;
@end
在.m中声明的方法是私有方法,外界无法直接访问,保证了封装性
增加方法实现:
@implementation MJViewController
- (void)compute
{
NSLog(@点击了计算按钮);
}
@end
建立 按钮 与 方法 的联系
接下来,就是建立按钮和compute方法之间的关系
先点击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;
提醒
IBOutlet和weak的作用会在后面解释
初学者最容易犯、最不应该犯的一个错误:钻牛角尖
建立 控件 和 属性 的联系
按住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];
}
UI控件 和 控制器的关系
文档评论(0)