作为一个初学者,我们无法立即“认识”一个事物的本质,只能去“感知”它.
只有当对事物的认知以一种更高的形式存在的时候,我们才能脱离“感知”,真正的“认识”它.
如上所述,视觉上的感知是我们接触iOS的最好的切入点.
问:什么是UI?
答:User Interface,用户界面,用来显示内容或者作为容器储存其他UI.我们在手机上看得到的都是UI.问:谁来管理UI?
答:Controller-控制器.控制器作为UI的灵魂,它负责管理UI的生命周期(创建/添加/销毁等),监听并响应用户与UI之间的交互.
Demo01:加法计算器
- 我们采用storyboard与代码结合的方式来理解这个Demo:storyboard负责界面布局,代码负责逻辑实现.
1.在Main.storyboard中拖入UI控件:
TestField 监听用户输入数字
属性:Placeholder 负责在用户输入之前显示提示信息,占位.
Keyboard Type 设置弹出键盘的类型(数字键盘,全键盘等)Label 负责显示文本,比如本个Demo的加号,等号和计算结果
属性:Font 字体大小
Lines 文字行数(如果设置为0,表示自动换行)
Alignment 文字对齐方式Button 点击计算/清空内容
属性:根据State Config来设置
2.关联storyboard和Controller
Command+option+enter 打开辅助编译器
Command+enter 关闭辅助编译器
按住control建立storyboard和Controller的联系
3.代码实现计算逻辑
通过连线创建属性
@interface ViewController ()
//创建属性
@property (weak, nonatomic) IBOutlet UITextField *textNum1;
@property (weak, nonatomic) IBOutlet UITextField *textNum2;
@property (weak, nonatomic) IBOutlet UILabel *labelText;
@end
通过连线创建按钮的点击事件
- (IBAction)calculator:(UIButton *)sender {
//记录TextField数字并计算结果
int n1=[self.textNum1.text intValue];
int n2=[self.textNum2.text intValue];
int sum=n1+n2;
//修改label
self.labelText.text=[NSString stringWithFormat:@"%d",sum];
//撤销第一拥有者身份 隐藏键盘
[self.textNum1 resignFirstResponder];
[self.textNum2 resignFirstResponder];
}
- (IBAction)removeAll:(UIButton *)sender {
//清空
self.textNum1.text=@"";
self.textNum2.text=@"";
self.labelText.text=@"0";
//隐藏键盘
[self.view endEditing:YES];
}
总结:
至此,我们的第一个Demo计算器就完成了,期间我们接触到了一个新名词:第一响应者.
问:什么是第一响应者
答:当前响应用户触摸的屏幕上的对象,在APP生命周期内,First Responder负责用户与UI之间的交互.用户触摸TextField的时候,它就变成了第一响应者,并且成为活动的文本区域(可以输入).
- 问:撤销第一响应者
答:我用了两种方法
[self.textNum1 resignFirstResponder];
[self.view endEditing:YES];
都可以用来撤销TextField的第一响应者身份,达到隐藏键盘的效果.
问:连线的属性为什么不放到.h中?
答:放入延展类,防止外部对象访问,达到私有化效果问:连线方法为什么不放到类扩展中?
答:没有必要声明方法问:什么是IBOutlet和IBAction?
答:IBOutlet表示连线的是一个属性
IBAction表示连线的是一个方法问:控件为什么用weak修饰?
答:weak表示弱引用,相关内容在UI基础-02中详细解答
Tips:
1.删除方法的时候,一定要把storyboard中的连线删除
2.快捷键:
显示/隐藏左侧导航区域 Command+0
显示/隐藏右侧实用工具栏Command+option+0
打开/关闭辅助编译器
打开 Command+option+enter
关闭 Command+enter
查找头文件 shift+Command+o
离线文档 shift+Command+0
Demo02:小飞机
点击方向键,让小飞机移动
1.设置界面
- (void)viewDidLoad {
[super viewDidLoad];
//设置背景
UIImageView *backgroundImage=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,self.view.frame.size.height)];
//创建UIImage
UIImage *image=[UIImage imageNamed:@"background"];
//修改属性
backgroundImage.image=image;
//添加到屏幕上
[self.view addSubview:backgroundImage];
//2.设置小飞机
UIButton *plane=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 48,48)];
self.button=plane;
plane.center=CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
[plane setBackgroundImage:[UIImage imageNamed:@"hero2"] forState:UIControlStateNormal];
[plane setBackgroundImage:[UIImage imageNamed:@"hero1"] forState:UIControlStateHighlighted];
[self.view addSubview:plane];
//3.添加方向键
UIButton *arrow=[[UIButton alloc] initWithFrame:CGRectMake(100, 100, 48,48)];
[arrow setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
[arrow setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
[self.view arrow];
//添加按钮的监听
[arrow addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
}
2.实现按钮的点击事件
-(void)clickButton:(UIButton *)button{
CGRect tempFrame=self.button.frame;
tempFrame.origin.y-=10;
self.button.frame=tempFrame;
}
Tips
1.按钮的状态和相关设置:
Default:默认
Highlighted:被点击高亮
Selected:id类型的Sender就是表示按钮本身,按钮selected属性,默认为No,修改为YES表示被选中,isSelected属性判断是否被选中
Disable:enabled属性,默认值为YES,可以接收用户点击事件,修改为NO,不可以接收用户点击事件,isEnabled判断是否能够点击
background image和image:
设置background image和title:background image在底层,title在图片上层
设置image和title:image在左侧,title在右侧(默认状态,可以通过offset修改位置)
设置background image:图片按照按钮尺寸
设置按钮的image:按钮按照图片尺寸
按钮使用注意:image/backgroundimage/title,一定要分状态设置
2.OC中的坐标系
我们以这个项目为例
frame:表示子view在父view的位置
center:子view中心在父view的位置,根据frame确定
bounds:view相对于自身,左上角为坐标原点,根据frame确定
修改frame:不能直接修改对象结构体中的内容
基本实现:获取对象的frame赋值给临时frame-修改临时frame-给frame赋值
CGRect tempFrame=self.OBJect.frame;
CGRect tempFrame=self.OBJect.frame;
self.NSObject.frame=tempFrame;
3.UIView的Tag:view的标记
