第三篇 基本UI组件
来源:互联网 发布:js div position 编辑:程序博客网 时间:2024/06/07 10:26
在初步学习了OC和了解了Xcode的界面之后,我们要开始做一些具体的事情了。
Xcode为我们提供了很多现成的UI组件,让我们很轻松地就可以做出一个不太难看的界面,这里我门以一个简单的加法计算器为例子,做一个演示。
第一步: 创建一个单视图项目;
第二步:创建界面;
这里我使用了三类组件,文本框(UITextField)、按钮(UIButton)、标签(UILabel).
注意:从对象库中将组建拖动到主界面上时,要注意观察蓝色的虚线,以便我们对布局进行初步定位。
运行一下,结果跟我在界面上的布局大不一样:
这是因为,我使用的iPhone5模拟器的界面宽度是320,而主界面的尺寸是600。当然你可以调整主界面宽度为320,但是我不推荐这么做,当然苹果也是不推荐的。因为你的APP可能要运行在不用尺寸的设备上。因此,我们还是对界面做一个简单的适配。
选中第一个文本框,然后如下图操作:
主界面右下角的四个小按钮用来对UI组件进行布局的。这里我选中的是一个文本框,文本框的高度是固定死的,因此我只需要设置三个相对位置即可,三条红线所示。
注意:Constrain to margins复选框,这个选项默认是选中的,这事iOS8之后的属性,这里我希望最低支持iOS7,所以把这个选项去掉。
设置好之后,点击Add 3 Constraints按钮,之所以这里是三,是因为这里我只加了三条约束。
看看结果:
布局OK之后,出现了三条蓝线,说明我的布局没问题。如果出现红线或者黄线,说明还有问题。
如法炮制,将其它组件也布局好,运行看看结果:
界面基本OK了。然后再次选中第一个文本框,更改键盘类型,以方便输入数字:
这样的话,界面就基本完成了。
第三步:UI响应
我们的功能是要实现两数字相加,文本框已经可以输入数字了,主要是实现计算按钮的响应和结果的显示了。
首先,响应计算按钮:
注意:
1、拖动的时候要按住Ctrl键;
2、按钮响应在弹出框的第一个选项connection里面选的是action。
然后,将两个文本框及显示结果的label也拖过来:
注意:这里在弹出框的connection选项里使用默认,即outlets。
最终结果如下:
@interface ViewController ()- (IBAction)computeBtnAction:(id)sender;@property (weak, nonatomic) IBOutlet UITextField *number1;@property (weak, nonatomic) IBOutlet UITextField *number2;@property (weak, nonatomic) IBOutlet UILabel *labResult;@end
- (IBAction)computeBtnAction:(id)sender { NSInteger result; result = [self.number1.text integerValue] + [self.number2.text integerValue]; self.labResult.text = [NSString stringWithFormat:@"%ld",(long)result];}
结果:
本篇知识点整理:
1、拖放基本UI组件,进行简单布局;
2、UIButton的点击响应,UI组件关联对象;
3、字符串转整数,整数转字符串。
- 第三篇 基本UI组件
- 黑莓开发第三篇:常用UI组件
- Android开发 第三方免费UI组件
- UI基本组件和几大布局
- UI 基本组件 笔记 待整理
- Android常用布局和基本UI组件
- Android开发 第三方免费UI组件 大全
- UI组件篇(上)
- UI组件篇(下)
- Andriod编程基础(三):Android UI 基本常用组件实例
- 7个jquery easy ui 基本组件图解
- 基本的UI组件(TextView、EditText、Button、ImageView、SeekBar)学习
- React Native 原生UI组件的基本使用
- Unity UI系统-NGUI-基本组件(一)
- Unity UI系统-NGUI-基本组件(二)
- Android UI开源组件库BottomView ,第三方自定义UI控件
- Android UI开源组件库BottomView ,第三方自定义UI控件
- Android UI开源组件库BottomView ,第三方自定义UI控件
- 日经春秋 20160122
- perfect-scrollbar 插件初始滚动条不显示问题。
- 关于Activity(活动)
- 相机和镜头选择时的一些参数
- rac修改instance_name
- 第三篇 基本UI组件
- Eclipse创建Maven项目
- iOS的集中collection布局
- 将语言编译为 Lambda Calculus(译)
- JAVA设计模式之:备忘录模式
- 百度经验分享NGUI3.7.4屏幕适配方案
- Maven较完整教程
- 日期汇总
- RAC votedisk和OCR还原