IOS开发笔记-基础UI(3)按钮的使用(放大缩小、改变位置,首尾式动画)和学习案例

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

UIKit框架提供了非常多的UI控件,但并不是每一个都很常用,有些控件可能1年内都用不上,有些控件天天用,比如UIButton、UILabel、UIImageView、UITableView等等,按钮控件是非常重要且比较基础的一个UI控件---UIButton,一般情况下,点击某个控件后,会做出相应反应的都是按钮,按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置。

案例:

功能分析

(1)左下角4个方向按钮,控制头像按钮的位置

(2)右下角分别是放大、缩小按钮,控制头像的尺寸

(3)头像按钮既有背景图片,又有文字

步骤分析

(1)搭建UI界面

(2)监听按钮点击

(3)修改头像按钮的属性来调整位置和尺寸

1、先准备素材

Xcode5之后,都是把图片素材,统一放到

点击,拖拽即可

2、进行 UI 设计

按钮的点击状态

在 ios7之后,出现的一个设置,在属性查看器里,type 下默认选择的是 system,就是让系统去改变,如果改为 custom,就是自定义,可以自己定义变化,而不让系统去帮我们改变。

比如:设计一个图片式的按钮之后,点的刹那是高亮的,松开就是恢复到原样。

点击之前的样子

点击下去的样子,按钮显式高亮状态,松开之后,回复到原样

把属性 type 改为 custom ,进行自定义的修改,同时修改state config 选项,也就是要修改 高亮状态,还有同时修改文本标题,文本颜色,按钮的背景等。如下:

运行,再次点击下去,高亮就不是以前那样了,改变为:

松开之后,恢复原样。

设置上下左右四个方向键(当相同的控件很多的时候,使用复制,粘贴,比较省事),同时记得修改高亮状态下背景,点击下,变为绿色。

连线,进行监听

先设置 up 方向,学习修改控件属性的过程三步骤:

@PRoperty(nonatomic) CGRect frame;

控件所在矩形框在父控件中的位置和尺寸(以父控件的左上角为坐标原点),可以定义位置(origin),大小(size),frame 本身是结构体,里面的成员都是结构体属性的成员。

1//2//ViewController.m3//按钮使用14//5//Created by 大帅 on 15-2-28.6//Copyright (c) 2015年 dashuai. All rights reserved.7//89#import"ViewController.h"1011@interfaceViewController ()12@property (weak, nonatomic) IBOutlet UIButton *HeadImageView;1314@end1516@implementationViewController17//up方向键进行连线18-(IBAction)move19{20//使用 frame 修改headimageview 的位置21//注意,在 oc 中,不可以直接修改"对象"的"结构体属性"的"成员"22//frame 是结构体,里面的 orign 等等都是结构体23//并且,这里 orign 是 frame 的成员,不能直接去修改,如下写法在 oc 是不对的2425//self.HeadImageView.frame.origin.y = self.HeadImageView.frame.origin.y - 10;2627//应该间接修改28//1、取出结构体属性29CGRect rect =self.HeadImageView.frame;30//2、修改结构体里面的成员,此时取出之后,frame已经不是对象了31rect.origin.y -=20;32//3、把值赋回来,就是这三个步骤。必须有这步。33self.HeadImageView.frame =rect;34}3536@end

三步骤:取出结构体属性,修改结构体的成员,把值赋回来。

好嘞,熟悉之后,重新连接四个控件,把 move 对象方法修改为带参数

-(IBAction)move:(UIButton *)button

删掉旧的连接,重新连接新的 move 方法,点击上下左右,都可以调用 move 方法,只要能区分就行了。使用 tag:

@property(nonatomic) NSInteger tag;

控件的ID(标识),父控件可以通过tag来找到对应的子控件,在属性查看器里,依次设置修改即可让控件 button 通过 tag 的值,找到不同的子控件。

button.tag

魔法数字的概念(避免硬编码)

术语:其他程序员看到后,不能见名知意的数字,不是好习惯,在程序开发中需要避免出现魔法数字(Magic Number),在 oc ,可以使用枚举类型,宏定义来避免在程序中出现魔法数字。 在其它一些编程语言里,也类似,要避免硬编码。

1> 枚举类型实质上就是一个整数,其作用就是用来替代魔法数字

2> 枚举类型中,指定了第一个整数之后,后面的数字会递增

记住,定死的一些东西,统一放到程序主体的上面,统一定义,避免硬编码

1#import"ViewController.h"23//10是 up,11是 down,12是 left,13是 right4//枚举,5typedefenum6{7kMovingDirTop =10,8kMovingDirBottom,9kMovingDirLeft,10kMovingDirRight11} kMovingDir;12//宏定义 偏移量13#definekMovingDelta 201415@interfaceViewController ()16@property (weak, nonatomic) IBOutlet UIButton *HeadImageView;1718@end1920@implementationViewController21//方向键进行连线22-(IBAction)move:(UIButton *)button23{24//1、取出结构体属性25CGRect rect =self.HeadImageView.frame;26//2、修改结构体里面的成员,此时取出之后,frame已经不是对象了27switch(button.tag) {28casekMovingDirTop:29rect.origin.y -=kMovingDelta;30

break;31casekMovingDirBottom:32rect.origin.y +=kMovingDelta;33

break;34casekMovingDirLeft:35rect.origin.x -=kMovingDelta;36

break;37casekMovingDirRight:38rect.origin.x +=kMovingDelta;39

break;40default:41

break;42}43//3、把值赋回来,就是这三个步骤。必须有这步。44self.HeadImageView.frame =rect;45}

效果如下 :

继续,放大缩小的功能实现

不要和 move 的方法混在一起,因为做的是两类事情,分来实现。类似位置的改变,orign

//该位置是 orign,改大小是 size属性- (IBAction)zoom:(UIButton *)button {

CGRect rect=self.HeadImageView.frame;//如果为1,则是放大,否则缩小if(button.tag) {

rect.size.height+=kMovingDelta;

rect.size.width+=kMovingDelta;

}else{

rect.size.height-=kMovingDelta;

rect.size.width-=kMovingDelta;

}

self.HeadImageView.frame=rect;

}

oc 从 Xcode4.6开始,有了一个自动布局系统 autolayout,由于这个系统,一些设置和改变,就不会起效,苹果规定,当使用了自动布局系统之后,就不要在使用代码控制位置了。在程序运行中,每个控件的大小和位置,都应该交给自动布局系统来决定。所以不会发生改变。

把它勾掉,就可以起效了

那么问题来了,缩小放大的时候原点不变。因为改变的是 size 属性,没有改变原点位置,记住:

1> frame可以修改对象的位置和尺寸

2> bounds可以修改对象的尺寸(这里使用 bounds 可以实现四周的增大缩小,而不是原点不变了,bounds 的宽高和边框是相等的!先记住。)

3> center可以修改对象的位置

- (IBAction)zoom:(UIButton *)button {

CGRect rect=self.HeadImageView.bounds;//如果为1,则是放大,否则缩小if(button.tag) {

rect.size.height+=kMovingDelta;

rect.size.width+=kMovingDelta;

}else{

rect.size.height-=kMovingDelta;

rect.size.width-=kMovingDelta;

}

self.HeadImageView.bounds=rect;

}

这样修改之后效果就是四周的变大缩小,而不是原点不变

介绍一个动画效果:首尾式动画效果代码实现

//beginAnimations表示此后的代码要“参与到”动画中[UIView beginAnimations:nil context:nil];//setAnimationDuration用来指定动画持续时间[UIView setAnimationDuration:2.0];

self.headImageView.bounds=rect;

......//commitAnimations,将beginAnimation之后的所有动画提交并生成动画[UIView commitAnimations];

有了动画效果之后,是先修改宽和高,再修改中心点,可以设置持续的时间。不加动画之前,看不出来,很快。

//该位置是 orign,改大小是 size属性- (IBAction)zoom:(UIButton *)button {

CGRect rect=self.HeadImageView.bounds;//如果为1,则是放大,否则缩小if(button.tag) {

rect.size.height+=kMovingDelta;

rect.size.width+=kMovingDelta;

}else{

rect.size.height-=kMovingDelta;

rect.size.width-=kMovingDelta;

}//动画开始,以后的代码全部参与到动画里[UIView beginAnimations:nil context:nil];//设置动画持续时间2秒[UIView setAnimationDuration:2.0];

self.HeadImageView.bounds=rect;//oc里透明度,1是完全看见,0是完全看不见,变变化大小,边消失的效果self.HeadImageView.alpha =0;//提交,并生成动画[UIView commitAnimations];

}

也可以使用 center 属性改变对象位置(只能改变位置,不能改变大小,而 orign 可以改变大小和位置)

关于 git

点击上图中的标志,可以查看和上次提交的版本不一样的地方,也就是修改的情况的查看

通过此操作,来实现代码的版本提交

如下,文件后面有 m 表示这个文件被修改过。

一旦 xcode 退出后,在使用撤销就不管用了,那么此时 git 出来了,通过查看和上次版本的变化,很有用,帮助提高开发效率,和改错,回顾。故创建项目的时候,要勾选 git,当阶段性开发告一段落,选择提交到 git,饼编写注释,下次通过版本查看即可。即使关闭 xcode,打开之后还能撤销上次的修改,很方便。

小结:

1、cmd+shift+h 是模拟器里 home 健的快捷键

2、当相同的控件很多的时候,使用复制,粘贴,比较省事,但是注意,这样也会把相应的连线给一起复制。

3、oc中,大多数控件的监听方法的第一个参数就是控件本身,也就是 sender 发送者,且回忆,方法名是name:,不要丢冒号。

4、

UIView的常见属性

@property(nonatomic,readonly) UIView *superview;获得自己的父控件对象

@property(nonatomic,readonly,copy) NSArray *subviews;获得自己的所有子控件对象(一个父亲可 u 有多个儿子,但是一个儿子只有一个父亲)

@property(nonatomic) NSInteger tag;控件的ID(标识),父控件可以通过tag来找到对应的子控件

@property(nonatomic) CGAffineTransform transform;控件的形变属性(可以设置旋转角度、比例缩放、平移等属性)

@property(nonatomic) CGRect frame;控件所在矩形框在父控件中的位置和尺寸(以父控件的左上角为坐标原点)

可以定义位置(origin),大小(size)

@property(nonatomic) CGRect bounds;控件所在矩形框的位置和尺寸(以自己左上角为坐标原点,所以bounds的x、y一般为0,这个属性很神奇,暂时先这么理解,以后钻研)

可以定义大小(size),无法定义位置

@property(nonatomic) CGPoint center;控件中点的位置(以父控件的左上角为坐标原点)

可以定义位置,无法定义大小

UIView的常见方法

- (void)addSubview:(UIView *)view;添加一个子控件view

- (void)removeFromSuperview;从父控件中移除

- (UIView *)viewWithTag:(NSInteger)tag;根据一个tag标识找出对应的控件(一般都是子控件)

5、注意指针的问题,修改属性,不是指针和是指针的区别,比如:

//应该间接修改//1、取出结构体属性CGRect rect =self.HeadImageView.frame;//2、修改结构体里面的成员,此时取出之后,frame已经不是对象了rect.origin.y -=20;//3、把值赋回来,就是这三个步骤。必须有这步。self.HeadImageView.frame = rect;

如果没有第三步,则无法成功修改属性,因为 rect 不是指针,地址和 frame 的地址不一样,修改完毕,必须重新赋值回去,才能生效。

修改结构体属性的成员方法如下:

1> 使用临时变量记录对象的结构体属性

2> 修改临时变量的属性

3> 将临时变量重新设置给对象的结构体属性

6、同一个项目中,尽量不要重复的代码去完成类似的功能,不要经常性的复制一样的代码。造成很大冗余。要尽量精简。

7、Xcode5之后,经常会有一些莫名其妙的问题出现,解决不了,可以尝试退出重新打开,再看看。

8、在 oc 中,不可以直接修改"对象"的"结构体属性"的"成员",要三部曲间接修改。

9、switch 语句中的default

当变量的取值不在分支里任何一个case的情况下,语句要做的处理,其实也是一种case,只不过就是指“除了指定的几个case以外的其他情况”,是一个中安全的编程方式。

10、注意魔法数字的问题避免,枚举的作用,宏定义

11、图片素材统一放到images.xcassets里面,从Xcode5开始,图片资源都放到Images.xcassets中进行管理

12、注意三个属性的用处1> frame可以修改对象的位置和尺寸

2> bounds可以修改对象的尺寸

3> center可以修改对象的位置

13、首尾式动画效果,透明度的设置alpha,记住苹果里,动画是廉价的,很容易就能实现非常绚丽的效果。

14、git 入门

15、如果发现通过代码无法修改控件的位置或者尺寸时,应该去掉storyboard里面的autolayout功能,这是自iOS6开始出现的特性,顾名思义,autolayout是用来自动布局的,用来束缚控件的位置和尺寸。去掉这个功能,控件的位置和尺寸就不再有一些固定的束缚。

16、UIButton的状态

normal(普通状态)

默认情况(Default)

对应的枚举常量:UIControlStateNormal

highlighted(高亮状态)

按钮被按下去的时候(手指还未松开)

对应的枚举常量:UIControlStateHighlighted

disabled(失效状态,不可用状态)

如果enabled属性为NO,就是处于disable状态,代表按钮不可以被点击

对应的枚举常量:UIControlStateDisabled

17、设置按钮在不同状态下的背景图片时,为了保证高亮状态下的图片正常显示,必须设置按钮的type为custom(自定义)

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航