初探第一响应者/Frame+按钮添加点击事件

作为一个初学者,我们无法立即“认识”一个事物的本质,只能去“感知”它.
只有当对事物的认知以一种更高的形式存在的时候,我们才能脱离“感知”,真正的“认识”它.
如上所述,视觉上的感知是我们接触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来设置

Snip20170307_19.png

2.关联storyboard和Controller
Command+option+enter 打开辅助编译器
Command+enter 关闭辅助编译器
按住control建立storyboard和Controller的联系

Snip20170307_22.png

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:小飞机

点击方向键,让小飞机移动

plane.gif

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中的坐标系
我们以这个项目为例

Snip20170317_16.png

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的标记