4. UIButton的使用

时间:2021-10-13 21:29:57

1. UIButton的初认识

来自:http://www.cnblogs.com/mcj-coding/p/5103891.html QQ:853740091

1.1 UIButton 是iOS 开发中常用的控件之一,主要用于用户触摸屏幕触发相应的事件,比如你点击了app一个界面就会跳转到另一个界面,这个功能很有可能就是使用了UIButton.

UIButton 继承自UIControl类,UIControl类主要的作用是将复杂的触摸事件封装成了简单的易于使用的控件事件。例如通过UIControl对象处理后,按下按钮的事件就被封装成一个控件事件,而不用去判断触摸屏幕的整个操作过程。

2. UIButton的使用

2.1 自定义按钮

- (void)viewDidLoad

{

[super viewDidLoad];

// 创建自定义BUtton

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(10, 200, 100, 50)];

// 设置button填充图片和背景图片

  [buttonsetImage:[UIImageimageNamed:@"checkmarkControllerIcon"]forState:UIControlStateNormal];

  [buttonsetBackgroundImage:[UIImageimageNamed:@"checkmarkControllerIcon"]forState:UIControlStateNormal];

  // 设置button标题和标题颜色

  [button1 setTitle:@"点击" forState:UIControlStateNormal];

  [buttonsetTitleColor:[UIColorredColor]forState:UIControlStateNormal];

  // 添加或删除事件处理

  [button1 addTarget:self action:@selector(butClick:) forControlEvents:UIControlEventTouchUpInside];

  [btn removeTarget:nil action:nil forControlEvents:UIControlEventTouchUpInside];

  //  设置按钮内部图片间距和标题间距

  UIEdgeInsets insets; // 设置按钮内部图片间距

  insets.top = insets.bottom = insets.right = insets.left = 10;

  bt.contentEdgeInsets = insets;

  bt.titleEdgeInsets = insets; // 标题间距

// 设置背景色

button.backgroundColor = [UIColor redColor];

// UIControlState 不同的状态 在不同的状态可以设置控件显示不同的样式

// enum {

// UIControlStateNormal = 0, 常规状态显现

// UIControlStateHighlighted = 1 << 0, 高亮状态显现

// UIControlStateDisabled = 1 << 1, 禁用的状态才会显现

// UIControlStateSelected = 1 << 2, 选中状态

// UIControlStateApplication = 0x00FF0000, 当应用程序标志时

// UIControlStateReserved = 0xFF000000 为内部框架预留,可以不管他

// };

// 设置标题

// 设置正常状态下的标题

[button setTitle:@"点我" forState:UIControlStateNormal];

// 设置高亮状态的标题

[button setTitle:@"点我了" forState:(UIControlStateHighlighted)];

// 设置禁用状态下的标题

[button setTitle:@"禁用" forState:UIControlStateDisabled];

button.enabled = YES;

// 设置不同状态下标题的颜色

[button setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];

// 设置标题字体

button.titleLabel.font = [UIFont systemFontOfSize:20];

// 设置不同状态的图片

[button setImage:[UIImage imageNamed:@"dog.jpg"] forState:UIControlStateNormal];

[button setImage:[UIImage imageNamed:@"bug.jpg"] forState:UIControlStateHighlighted];

// 设置按钮为选中状态(YES 为选中状态 NO 为未选中状态)

button.selected = YES;

// UIControlEvents(不同的触发事件,可以设置这个控件在对应的触发条件下相应的事件)

//    UIControlEventTouchDown

//    单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候。

//    UIControlEventTouchDownRepeat

//    多点触摸按下事件,点触计数大于1:用户按下第二、三、或第四根手指的时候。

//    UIControlEventTouchDragInside

//    当一次触摸在控件窗口内拖动时。

//    UIControlEventTouchDragOutside

//    当一次触摸在控件窗口之外拖动时。

//    UIControlEventTouchDragEnter

//    当一次触摸从控件窗口之外拖动到内部时。

//    UIControlEventTouchDragExit

//    当一次触摸从控件窗口内部拖动到外部时。

//

//    UIControlEventTouchUpInside

//    所有在控件之内触摸抬起事件。

//    UIControlEventTouchUpOutside

//    所有在控件之外触摸抬起事件(点触必须开始与控件内部才会发送通知)。

//    UIControlEventTouchCancel

//    所有触摸取消事件,即一次触摸因为放上了太多手指而被取消,或者被上锁或者电话呼叫打断。

//    UIControlEventTouchChanged

//    当控件的值发生改变时,发送通知。用于滑块、分段控件、以及其他取值的控件。你可以配置滑块控件何时发送通知,在滑块被放下时发送,或者在被拖动时发送。

//    UIControlEventEditingDidBegin

//    当文本控件中开始编辑时发送通知。

//    UIControlEventEditingChanged

//    当文本控件中的文本被改变时发送通知。

//    UIControlEventEditingDidEnd

//    当文本控件中编辑结束时发送通知。

//    UIControlEventEditingDidOnExit

//    当文本控件内通过按下回车键(或等价行为)结束编辑时,发送通知。

//    UIControlEventAlltouchEvents

//    通知所有触摸事件。

//    UIControlEventAllEditingEvents

//    通知所有关于文本编辑的事件。

//    UIControlEventAllEvents

//    通知所有事件。

// 注册事件(重点 这个就是设置点击按钮后要做什么操作)

// 第一个参数:接受消息的对象

// 第二个参数:被发送的消息

// 第三个参数:枚举,表示触发事件

// 事件传参的话 只能传自己

[button addTarget:self action:@selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:button];

}

- (void)clickBtn

{

NSLog(@" 点击了按钮");

}

2.2 系统样式的按钮

  UIButton *button=[[UIButton buttonWithType:(UIButtonType);

button.frame = CGRectMake(10, 200, 100, 50);

  能够定义的button类型有以下6种,

  typedef enum {

  UIButtonTypeCustom = 0, 自定义风格

  UIButtonTypeRoundedRect, 圆角矩形

  UIButtonTypeDetailDisclosure, 蓝色小箭头按钮,主要做详细说明用

  UIButtonTypeInfoLight, 亮色感叹号

  UIButtonTypeInfoDark, 暗色感叹号

  UIButtonTypeContactAdd, 十字加号按钮

  } UIButtonType;

2.3 按钮不同状态下外观微调

当按钮高亮或者禁用,UIButton 类可以调整自己的外观,下面几个属性可以让你按照需要对按钮的外观进行微调:
adjustsImageWhenHighlighted
默认情况下,在按钮被禁用时,图像会被画的颜色深一些。要禁用此功能,请将这个属性设置为NO:
btn1.adjustsImageWhenHighlighted = NO;

adjustsImageWhenDisabled
默认情况下,按钮在被禁用时,图像会被画的颜色淡一些。要禁用此功能,请将这个属性设置为NO:
btn1.adjustsImageWhenDisabled = NO;

showsTouchWhenHighlighted
这个
属性设置为YES,可令按钮在按下时发光。这可以用于信息按钮或者有些重要的按钮:
btn1.showsTouchWhenHighlighted = YES;

3. 自定义按钮内部的图片和文字的位置

你可以通过子类化按钮来定制属于你自己的按钮类。在子类化的时候你可以重载下面这些方法,这些方法返回CGRect结构,指明了按钮每一组成部分的边界。
注意:不要直接调用这些方法, 这些方法是你写给系统调用的。
backgroundRectForBounds   //指定背景边界 
contentRectForBounds // 指定内容边界 
titleRectForContentRect    // 指定文字标题边界 
imageRectForContentRect     //指定按钮图像边界

继承UIButton 设置里面图片和文字的位置

例如:设置一个图片在上,文字在下 都居中的按钮

4. UIButton的使用

#import <UIKit/UIKit.h>

@interface MCJButton : UIButton

@end

#import "MCJButton.h"

@implementation MCJButton

#pragma mark - 设置button内部图片的位置

- (CGRect)imageRectForContentRect:(CGRect)contentRect

{

CGFloat imageW = contentRect.size.width;

CGFloat imageH = contentRect.size.height * 0.7;

return CGRectMake(0, 0, imageW, imageH);

}

#pragma mark - 设置button内部labe的位置

- (CGRect)titleRectForContentRect:(CGRect)contentRect

{

CGFloat X = 0;

CGFloat Y = contentRect.size.height * 0.7;

CGFloat lableW = contentRect.size.width;

CGFloat lableH = contentRect.size.height * 0.3;

return CGRectMake(X, Y, lableW, lableH);

}

@end

使用:

MCJButton *btn = [[MCJButton alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];

[btn setImage:[UIImage imageNamed:@"button"] forState:UIControlStateNormal];

[btn setTitle:@"小红帽" forState:UIControlStateNormal];

[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[btn setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];

btn.titleLabel.font = [UIFont systemFontOfSize:10];

// 图片居中

btn.imageView.contentMode = UIViewContentModeCenter;

// 文字居中

btn.titleLabel.textAlignment = NSTextAlignmentCenter;

[self.view addSubview:btn];