UIKit之UIButton篇

作者: 陈胜华 | 来源:发表于2016-02-25 16:34 被阅读633次

UIKit之UIButton篇
UIButton困惑
UIKit之UIButton
iOS 获取验证码倒计时方法
庖丁UIKit之UIButton
UIKit——UIButton
设置UIButton内图文位置
UIButton(AFNetworking)扩展说明
iOS - Core Graphics
UIButton

1.初始化控件（按钮控件）

方式1:
UIButton *etbtn1 = [UIButton alloc]initWithFrame:CGRectMake(x起点, y起点, 宽度, 高度);
方式2:(常用方式)
UIButton *etbtn1 = [UIButton buttonWithType:UIButtonTypeCustom];

UIButtonTye	按钮风格
UIButtonTypeCustom	自定义，无风格
UIButtonTypeRoundedRect	白色圆角矩形，类似偏好设置表格单元或者地址簿卡片
UIButtonTypeDetailDisclosure	蓝色小箭头按钮，主要做详细说明用
UIButtonTypeInfoDark	白色背景下使用的深色圆圈信息按钮
UIButtonTypeContactAdd	蓝色加号(+)按钮，可以放在任何文字旁

2.基本属性及用法

设置UILable的frame ( 即显示起点坐标（x,y）和宽高(width,height) )

etbtn.frame = CGRectMake(<#x起点#>,<#y起点#>,<#宽度#>,<#高度#>);

设置背景颜色

etbtn.backgroundColor = [UIColor redColor];

设置标签（即tag值）: 标记当前UIButton 对象,用于其它位置获取改对象使用

etbtn1.tag = 100;

设置UIButton的标题及不同状态(正常／选中)下的显示样式

UIControlState状态枚举

/***************UIButton点击状态****************/
    UIControlStateApplication;
    UIControlStateDisabled;      //禁用状态  
    UIControlStateFocused;
    UIControlStateReserved;
    UIControlStateHighlighted;  // 高亮状态 
    UIControlStateSelected;     // 选择中状态
    UIControlStateNormal;       // 正常显示状态
/*********************************************/

/****************************方法介绍************************************/
//设置对应状态的标题内容(默认为空)
- (void)setTitle:(NSString *)title forState:(UIControlState)state;  
//设置对应状态的标题颜色           
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;   
//设置对应状态的按钮的图片
- (void)setImage:(UIImage *)image forState:(UIControlState)state;        
//设置对应状态的按钮背景图片
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;    
//设置对应状态的标题阴影颜色 (在ios3.0使用，配合titleShadowOffset一起使用)     
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state;

    /*************************属性使用********************************/
    //文字（正常/高亮 两种状态）
    [etbtn1 setTitle:@"正常状态文字" forState:UIControlStateNormal];
    [etbtn1 setTitle:@"点击状态文字" forState:UIControlStateHighlighted];
    //文字颜色（正常/高亮 两种状态）
    [etbtn1 setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];
    [etbtn1 setTitleColor:[UIColor purpleColor] forState:UIControlStateHighlighted];
    //显示图片（正常/高亮 两种状态）
    [etbtn1 setImage:[UIImage imageNamed:@"btn_normal.png"] forState:UIControlStateNormal];
    [etbtn1 setImage:[UIImage imageNamed:@"btn_selected.png"] forState:UIControlStateHighlighted];
    //显示背景图片（正常/高亮 两种状态）
    [etbtn1 setBackgroundImage:[UIImage imageNamed:@"btn_nomarl_Background"] forState:UIControlStateNormal];
    [etbtn1 setBackgroundImage:[UIImage imageNamed:@"btn_selected_Background"] forState:UIControlStateHighlighted];

5 获取及时属性

属性列表如下

/**************************************UIButton当前状态下的各种属性（对象）*****************************************************************/
//    currentTitle;              //当前状态下标题     normal/highlighted/selected/disabled. can return nil                                 /
//    currentTitleColor;         //当前状态下标题颜色  normal/highlighted/selected/disabled. always returns non-nil. default is white(1,1)  /
//    currentImage;              //当前状态下图片     normal/highlighted/selected/disabled. can return nil                                 /
//    currentBackgroundImage;    //当前状态下背景图片  normal/highlighted/selected/disabled. can return nil                                 /
/***************************************************************************************************************************************/

使用方法：

UIButton *etbtn = [UIButton buttonWithType:UIButtonTypeCustom];
etbtn.currentTitle;              //当前标题，可以是正常或者点击状态
etbtn.currentTitleColor;         //当前标题颜色
etbtn.currentImage;              //当前图片
etbtn.currentBackgroundImage;    //当前背景图片

6.添加点击事件（或者说按钮触发事件）

使用方法如下：

[etbtn1 addTarget:self
           action:@selector(_efOnClick:withEvent:)       //触发的函数
 forControlEvents:UIControlEventTouchUpInside];//设置出发触发状态

- (void)_efOnClick:(UIButton*)btn withEvent:(UIEvent*)event{
    //触发函数，在里面进行其它操作
    //注意了!!!!!!!!!
    //说明：防止用户恶意暴力点击按钮
    UITouch *touch = [[event allTouches] anyObject];
    if (touch.tapCount == 1) {//当用户瞬间点击次数为1的时候触发
    }
}

Button的UIControlEvent触发状态

/********************************UIControlEvent状态列表*************************************/
    UIControlEventTouchDown           ;      // 用户按下时触发
    UIControlEventTouchDownRepeat     ;      // 点击次数大于1时触发
    UIControlEventTouchDragInside     ;      // 当触摸在控件内拖动时触发
    UIControlEventTouchDragOutside    ;      // 当触摸在控件之外拖动时触发
    UIControlEventTouchDragEnter      ;      // 当触摸从控件外拖动到内部时
    UIControlEventTouchDragExit       ;      // 当触摸从控件内拖动到外部时
    UIControlEventTouchUpInside       ;      // 在控件内触摸抬起时
    UIControlEventTouchUpOutside      ;      // 在控件外触摸抬起时
    UIControlEventTouchCancel         ;      // 触摸取消事件，设备被锁上或者电话呼叫打断
    UIControlEventValueChanged        ;      // 当控件的值发生改变时
    UIControlEventEditingDidBegin     ;      // 文本控件开始编辑时
    UIControlEventEditingChanged      ;      // 文本控件的文本改变
    UIControlEventEditingDidEnd       ;      // 文本控件结束编辑时
    UIControlEventEditingDidEndOnExit ;      // 文本控件内通过按下回车键结束编辑时
    UIControlEventAllTouchEvents      ;      // 所有触摸事件
    UIControlEventAllEditingEvents    ;      // 文本编辑的所有事件，for UITextField
    UIControlEventAllEvents           ;      // 所有事件
/****************************************************************************************/

特殊属性

// 每边（左，右，顶部和底部）可以有不同的值。使用UIEdgeInsetsMake功能设置图片和文字的位置(默认为UIEdgeInsetsZero)
UIEdgeInsets contentEdgeInsets;
// 设置标题、图片的边缘值（默认UIEdgeInsetsZero）
UIEdgeInsets titleEdgeInsets;
BOOL reversesTitleShadowWhenHighlighted; // 决定是否点击按钮会导致其发光
BOOL adjustsImageWhenHighlighted; // 决定是否按钮时，突出显示图像的变化。
BOOL adjustsImageWhenDisabled; // 决定是否形象的变化时，该按钮被禁用
BOOL showsTouchWhenHighlighted; // 决定是否点击按钮会导致其发光


* 最后需要将控件添加到父视图上


### 3.扩展类
****
* 延伸UIButton的热感应范围（或者说扩展点击范围，不改变原来frame的大小）
* block方式调用与常规方式调用对比

//使用前提条件:导入UIButton+Extern扩展类
//扩展点击范围
[self.evbtn setEnlargeEdgeWithTop:<＃上线距离＃>
right:<＃向右距离＃>
bottom:<＃向下距离＃>
left:<＃向左距离＃>];
//block与常规方式调用对比
/**************************常规方式*****************************/
UIButton *etbtn = [UIButton buttonWithType:UIButtonTypeCustom];
[etbtn1 addTarget:self
action:@selector(_efOnClick:withEvent:) //触发的函数
forControlEvents:UIControlEventTouchUpInside];//设置出发触发状态

(void)_efOnClick:(UIButton)btn withEvent:(UIEvent)event{
//触发函数，在里面进行其它操作
}
/**************************block方式*****************************/
UIButton *etbtn = [UIButton buttonWithType:UIButtonTypeCustom];
__block typeof(self) weakSelf = self;//注意：！！！！避免循环引用造成内测不及时释放
[etbtn addBlockTarget:UIControlEventTouchUpInside block:^(UIEvent *touch) {
//触发函数，在里面进行其它操作
//weakSelft方式调用
}];


>UIButton+Extern .h文件

import <UIKit/UIKit.h>

typedef void (^btnOnClick)(UIEvent*event);

@interface UIButton (Extern)
/**

扩展Buttom的点击范围
@param top top 方向延伸
@param right right 方向延伸
@param bottom bottom 方向延伸
@param left left 方向延伸
*/

(void) setEnlargeEdgeWithTop:(CGFloat)top
right:(CGFloat)right
bottom:(CGFloat)bottom
left:(CGFloat)left;
/**

使用Block语法块,addTarget方法
@param event events
@param action block action
*/

(void) addBlockTarget:(UIControlEvents)event
block:(btnOnClick)action;
@end


>UIButton+Extern .m文件

import "UIButton+Extern.h"

import <objc/runtime.h>

@implementation UIButton (Extern)

pragma mark 添加点击范围扩展

static char topNameKey;
static char rightNameKey;
static char bottomNameKey;
static char leftNameKey;

(void) setEnlargeEdgeWithTop:(CGFloat) top right:(CGFloat) right bottom:(CGFloat) bottom left:(CGFloat) left{
objc_setAssociatedObject(self, &topNameKey, [NSNumber numberWithFloat:top], OBJC_ASSOCIATION_COPY_NONATOMIC);
objc_setAssociatedObject(self, &rightNameKey, [NSNumber numberWithFloat:right], OBJC_ASSOCIATION_COPY_NONATOMIC);
objc_setAssociatedObject(self, &bottomNameKey, [NSNumber numberWithFloat:bottom], OBJC_ASSOCIATION_COPY_NONATOMIC);
objc_setAssociatedObject(self, &leftNameKey, [NSNumber numberWithFloat:left], OBJC_ASSOCIATION_COPY_NONATOMIC);
}
(CGRect) enlargedRect{
NSNumber* topEdge = objc_getAssociatedObject(self, &topNameKey);
NSNumber* rightEdge = objc_getAssociatedObject(self, &rightNameKey);
NSNumber* bottomEdge = objc_getAssociatedObject(self, &bottomNameKey);
NSNumber* leftEdge = objc_getAssociatedObject(self, &leftNameKey);
if (topEdge && rightEdge && bottomEdge && leftEdge){
return CGRectMake(self.bounds.origin.x - leftEdge.floatValue,
self.bounds.origin.y - topEdge.floatValue,
self.bounds.size.width + leftEdge.floatValue + rightEdge.floatValue,
self.bounds.size.height + topEdge.floatValue + bottomEdge.floatValue);
} else {
return self.bounds;
}
}
(UIView) hitTest:(CGPoint) point withEvent:(UIEvent) event{
CGRect rect = [self enlargedRect];
if (CGRectEqualToRect(rect, self.bounds)){
return [super hitTest:point withEvent:event];
}
return CGRectContainsPoint(rect, point) ? self : nil;
}

pragma mark 添加addTarget Block方法

static char overviewKey;

(void)addBlockTarget:(UIControlEvents)event block:(btnOnClick)action{
//用于给对象添加关联对象，传入 nil 则可以移除已有的关联对象
objc_setAssociatedObject(self, &overviewKey, action, OBJC_ASSOCIATION_COPY_NONATOMIC);

[self addTarget:self action:@selector(_efOnClick: event:) forControlEvents:event];
}
(void)_efOnClick:(id)sender event:(UIEvent*)event{
btnOnClick block = (btnOnClick)objc_getAssociatedObject(self, &overviewKey);
if (block) {
block(event);
}
}
@end


### 4.引用其它人扩展类

> UIButton包含图片和文字的同时，自定义两元素的布局位置

//使用前提条件：导入下面的Button+CenterImageAndTitle扩展类
UIButton *etbtn = [UIButton buttonWithType:UIButtonTypeCustom];
/**
 .
 .
 .
 */
[etbtn setTitle:@"显示文字" forState:UIControlStateNormal];
[etbtn setImage:[UIImage imageNamed:@"btnImageNoamrl.png"] forState:UIControlStateNormal];

/*************************************使用方式如下5种****************************/
//1.系统默认图片在左，文字在右，间隔为0
[etbtn verticalCenterImageAndTitle:10.0f];          //2.上下居中，图片在上，文字在下
[etbtn horizontalCenterTitleAndImage:50.0f];        //3.左右居中，文字在左，图片在右
[etbtn horizontalCenterImageAndTitle:50.0f];        //4.左右居中，图片在左，文字在右
[etbtn horizontalCenterTitleAndImageLeft:50.0f];    //5.文字居中，图片在左边
[etbtn horizontalCenterTitleAndImageRight:50.0f];   //6.文字居中，图片在右边


> .h文件

import <UIKit/UIKit.h>

@interface UIButton (CenterImageAndTitle)

//上下居中，图片在上，文字在下

(void)verticalCenterImageAndTitle:(CGFloat)spacing;
(void)verticalCenterImageAndTitle; //默认6.0

//左右居中，文字在左，图片在右

(void)horizontalCenterTitleAndImage:(CGFloat)spacing;
(void)horizontalCenterTitleAndImage; //默认6.0

//左右居中，图片在左，文字在右

(void)horizontalCenterImageAndTitle:(CGFloat)spacing;
(void)horizontalCenterImageAndTitle; //默认6.0

//文字居中，图片在左边

(void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing;
(void)horizontalCenterTitleAndImageLeft; //默认6.0

//文字居中，图片在右边

(void)horizontalCenterTitleAndImageRight:(CGFloat)spacing;
(void)horizontalCenterTitleAndImageRight; //默认6.0

@end


>.m文件

import "UIButton+CenterImageAndTitle.h"

@implementation UIButton (CenterImageAndTitle)

(void)verticalCenterImageAndTitle:(CGFloat)spacing
{
// get the size of the elements here for readability
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;

// lower the text and push it left to center it
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing/2), 0.0);

// the text width might have changed (in case it was shortened before due to
// lack of space and isn't anymore now), so we get the frame size again
titleSize = self.titleLabel.frame.size;

// raise the image and push it right to center it
self.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing/2), 0.0, 0.0, - titleSize.width);
}
(void)verticalCenterImageAndTitle
{
const int DEFAULT_SPACING = 6.0f;
[self verticalCenterImageAndTitle:DEFAULT_SPACING];
}

(void)horizontalCenterTitleAndImage:(CGFloat)spacing
{
// get the size of the elements here for readability
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;

// lower the text and push it left to center it
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, imageSize.width + spacing/2);

// the text width might have changed (in case it was shortened before due to
// lack of space and isn't anymore now), so we get the frame size again
titleSize = self.titleLabel.frame.size;

// raise the image and push it right to center it
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + spacing/2, 0.0, - titleSize.width);
}
(void)horizontalCenterTitleAndImage
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterTitleAndImage:DEFAULT_SPACING];
}

(void)horizontalCenterImageAndTitle:(CGFloat)spacing;
{
// get the size of the elements here for readability
// CGSize imageSize = self.imageView.frame.size;
// CGSize titleSize = self.titleLabel.frame.size;

self.titleEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, - spacing/2);
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing/2, 0.0, 0.0);
}
(void)horizontalCenterImageAndTitle;
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterImageAndTitle:DEFAULT_SPACING];
}

(void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing
{
// get the size of the elements here for readability
// CGSize imageSize = self.imageView.frame.size;
// CGSize titleSize = self.titleLabel.frame.size;

self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing, 0.0, 0.0);
}
(void)horizontalCenterTitleAndImageLeft
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterTitleAndImageLeft:DEFAULT_SPACING];
}

(void)horizontalCenterTitleAndImageRight:(CGFloat)spacing
{
// get the size of the elements here for readability
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;

// lower the text and push it left to center it
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, 0.0);

// the text width might have changed (in case it was shortened before due to
// lack of space and isn't anymore now), so we get the frame size again
titleSize = self.titleLabel.frame.size;

// raise the image and push it right to center it
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + imageSize.width + spacing, 0.0, - titleSize.width);
}
(void)horizontalCenterTitleAndImageRight
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterTitleAndImageRight:DEFAULT_SPACING];
}

@end

UIKit之UIButton篇
1.初始化控件（按钮控件）方式1:UIButton *etbtn1 = [UIButton alloc]init...
UIButton困惑
首先在这里表示在下面引用的作者的文章的感谢。陈胜华UIKit之UIButton篇基本上已解释UIbutton的属...
UIKit之UIButton
iOS 获取验证码倒计时方法
import @interface UIButton (YasinTimerCat...
庖丁UIKit之UIButton
App中最常见的也是基本少不了的交互，就是按钮了。UIKit通过UIButton来提供按钮服务。UIButton的...
UIKit——UIButton
【译】为避免撕逼，提前声明：本文纯属翻译，仅仅是为了学习，加上水平有限，见谅！ UIButton 控制你自定义代码...
设置UIButton内图文位置
UIButton图片位置 ``` // TitleButton.swift import UIKit class ...
UIButton(AFNetworking)扩展说明
声明处：UIButton+AFNetworking.h 概述这个分类在UIKit框架的UIButton类添加方法...
iOS - Core Graphics
iOS绘图系统简介 UIKit：最常用的视图框架，如UIView、UIButton等UIKit元素 Core An...
UIButton
UIButton的官方文档https://developer.apple.com/reference/uikit/...

UIKit之UIButton篇

1.初始化控件（按钮控件）

2.基本属性及用法

import <UIKit/UIKit.h>

import "UIButton+Extern.h"

import <objc/runtime.h>

pragma mark 添加点击范围扩展

pragma mark 添加addTarget Block方法

import <UIKit/UIKit.h>

import "UIButton+CenterImageAndTitle.h"

相关文章

UIKit之UIButton篇

UIButton困惑

UIKit之UIButton

iOS 获取验证码倒计时方法

庖丁UIKit之UIButton

UIKit——UIButton

设置UIButton内图文位置

UIButton(AFNetworking)扩展说明

iOS - Core Graphics

UIButton

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS学习