05-按钮的基本使用

按钮的基本使用

什么是按钮

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

小案例

• 接下来通过一个小案例来研究按钮的基本使用
• 

掌握

• 使用代码创建、添加控件
• 分别通过 storyboard 和 代码 设置按钮在不同状态的背景、文字、文字颜色
• 分别通过 storyboard 和 代码 监听按钮点击
• 修改控件的位置和尺寸
• 制作简单的动画效果
• 掌握frame、center、bounds、transform的使用

作业

• 使用纯代码的方式重写关于按钮使用的小案例（不要拖控件）

添加图片资源

• 从Xcode5开始，图片资源都放到Images.xcassets中进行管理
• 添加项目中用到的图片到Images.xcassets中

修改控件的尺寸

• 下图是在设置控件的尺寸为35x35
• 

去除autolayout

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

UIButton的状态

• normal（普通状态）

1. 默认情况（Default）
2. 对应的枚举常量：UIControlStateNormal

• highlighted（高亮状态）

1. 按钮被按下去的时候（手指还未松开）
2. 对应的枚举常量：UIControlStateHighlighted

• disabled（失效状态，不可用状态）

1. 如果enabled属性为NO，就是处于disable状态，代表按钮不可以被点击
2. 对应的枚举常量：UIControlStateDisabled

设置按钮的背景图片

• 设置按钮在不同状态下的背景图片 （为了保证高亮状态下的图片正常显示，必须设置按钮的type为custom）

设置头像按钮

• 普通状态：红色文字“点我啊”
• 高亮状态：蓝色文字“摸我干嘛”

修改头像按钮的位置

• 通过修改控件的frame属性就可以修改控件在屏幕上的位置和尺寸
• 比如点击“向上”按钮，让按钮的y值减小即可

   - (IBAction)top:(UIButton *)sender

  {

 　　　　 CGRect btnFrame = self.headBtn.frame;

　　　 　 btnFrame.origin.y -= 10;

　　　　 self.headBtn.frame = btnFrame;

 }

• 下面代码是错误的，OC语法规定：不允许直接修改对象的结构体属性的成员

self.headBtn.frame.origin.y -= 10;

代码创建按钮

• 在开发过程中，并不是每次都通过storyboard拖控件完成UI界面，因为storyboard上面的界面是“固定死”的，有时候可能会在程序运行过程中动态地添加一些新的控件到界面上
• 比如QQ的聊天信息，是有人发出一条信息后才动态显示出来的。因此，需要掌握如何用代码动态地添加控件
• 实际上，storyboard的本质就是根据图形界面描述转成相应的代码

Storyboard到代码的转换

实现简单动画

• 在iOS开发中，想实现一些小动画是非常容易的

1. 系统会根据某个属性值的改变自动形成动画
2. 比如x值本来是10，然后x值突然改为了100，系统会通过平移动画的方式让x值慢慢从10变到100

• 简易动画大致有2种方式：

1. 头尾式

　　[UIView beginAnimations:nil context:nil];

　　/** 需要执行动画的代码 **/

　　[UIView commitAnimations];

• Block式

　　[UIView animateWithDuration:0.5 animations:^{

　　　　/** 需要执行动画的代码 **/

　　}];

修改控件的位置和尺寸

• 通过以下属性可以修改控件的位置

1. frame.origin
2. center

• 通过以下属性可以修改控件的尺寸

1. frame.size
2. bounds.size

transform属性

• 利用transform属性可以修改控件的位移（位置）、缩放、旋转
• 创建一个transform属性

1. CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) ;

2. CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);

3. CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)

4. (angle是弧度制，并不是角度制)

• 在某个transform的基础上进行叠加

1. CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty);

2. CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy);

3. CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle);

• 清空之前设置的transform属性

1. view.transform = CGAffineTransformIdentity;

常见类型

• 一个UIColor代表一种颜色，通过UIColor的类方法，可以获得很多常用的颜色

1. + (UIColor *)blackColor; // 0.0 white 黑色
2. + (UIColor *)darkGrayColor; // 0.333 white 深灰色
3. + (UIColor *)lightGrayColor; // 0.667 white 亮灰色
4. + (UIColor *)whiteColor; // 1.0 white 白色
5. + (UIColor *)grayColor; // 0.5 white 灰色
6. + (UIColor *)redColor; // 1.0, 0.0, 0.0 RGB 红色
7. + (UIColor *)greenColor; // 0.0, 1.0, 0.0 RGB 绿色
8. + (UIColor *)blueColor; // 0.0, 0.0, 1.0 RGB 蓝色
9. + (UIColor *)cyanColor; // 0.0, 1.0, 1.0 RGB 青色
10. + (UIColor *)yellowColor; // 1.0, 1.0, 0.0 RGB 黄色
11. + (UIColor *)magentaColor; // 1.0, 0.0, 1.0 RGB 品红
12. + (UIColor *)orangeColor; // 1.0, 0.5, 0.0 RGB 橙色
13. + (UIColor *)purpleColor; // 0.5, 0.0, 0.5 RGB 紫色
14. + (UIColor *)brownColor; // 0.6, 0.4, 0.2 RGB 棕色
15. + (UIColor *)clearColor; // 0.0 white, 0.0 alpha 清除颜色（空色）

• 一个UIImage对象代表一张图片，一般通过imageNamed:方法就可以通过文件名加载项目中的图片

　　（文件名可以省略扩展名）

　　UIImage *image = [UIImage imageNamed:@"btn_01"];

按钮的样式

• 实际上，UIButton自带了很多种不同的样式
• 

• 在用代码创建按钮的同时指定按钮样式

　　 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

1. UIButtonTypeCustom：无类型，按钮的内容需要自定义
2. UIButtonTypeDetailDisclosure：

3. UIButtonTypeInfoLight：

4. UIButtonTypeInfoDark：

5. UIButtonTypeContactAdd