继基础控件UIlabel之后,期待的UIButton详细介绍-->>保证你有意外收获,如有问题欢迎指点。。
1、UIButton基础属性
按钮状态分析
- 正常（Normal）
- 高亮（Highlighted）
- 选中（Selected）
- 禁止（Disabled）
normal（普通状态）
默认情况（Default）
对应的枚举常量：UIControlStateNormal
highlighted（高亮状态）
按钮被按下去的时候（手指还未松开）
对应的枚举常量：UIControlStateHighlighted
Selected（选中状态）
按钮被设置成选中状态
对应的枚举常量：UIControlStateSelected
disabled（失效状态，不可用状态）
如果enabled属性为NO，就是处于disable状态，代表按钮不可以被点击
对应的枚举常量：UIControlStateDisabled
当按钮被点击时，按钮就会进入高亮状态。
当按钮被设置成选中状态时，按钮进入选中状态。
区别就是他们是按钮的不同状态，触发条件不一样。
其实做要在用法上，比如你只是点击按钮，不让他一直变，就设置他的高亮状态的图片，如果点击过后，要求按钮发生变化，松手的时候不在是普通状态的就设置选中状态。
#######代码
//初始化
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
/** 类型
UIButtonTypeCustom：无类型，按钮的内容需要自定义
UIButtonTypeDetailDisclosure：蓝色小箭头按钮,主要用来做详细说明
UIButtonTypeInfoLight：亮色感叹号
UIButtonTypeInfoDark：暗色感叹号
UIButtonTypeContactAdd：十字加号按钮
*/
//位置
button.frame = CGRectMake(100, 100, 100, 20);
//设置文字 正常
[button setTitle:@"按钮" forState:UIControlStateNormal];
//设置按钮文字颜色
[button setTitleColor:[UIColor lightTextColor] forState:UIControlStateNormal];
//设置文字字体大小<需要拿到按钮内部的label来设置>
button.titleLabel.font = [UIFont systemFontOfSize:15];
//设置按钮的背景图片
[button setBackgroundImage:[UIImage imageNamed:@"bg.png"] forState:UIControlStateNormal];
//设置按钮内部的小图片
[button setImage:[UIImage imageNamed:@"太阳.jpg"] forState:UIControlStateNormal];
//通过 按钮状态获取按钮文字
NSString * buttonTitle = [button titleForState:UIControlStateNormal];
//通过 按钮状态获取按钮文字颜色
UIColor * buttonColor = [button titleColorForState:UIControlStateNormal];
//获得按钮内部的小图片
UIImage * buttonImage = [button imageForState:UIControlStateNormal];
//获得按钮的背景图片
UIImage * buttonBgImage = [button backgroundImageForState:UIControlStateNormal];
//按钮是否可用 默认YES NO 不可用 -**- 只能通过enabled = NO达到UIControlStateDisables状态,设置userInterationEnabled = NO,并不能让按钮达到这个状态
button.enabled = YES;
//按钮的监听 只有继承UIControl才能通过addTarget来监听事件
[button addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
2、UIButton进阶阶段-->>文字,图片的上下左右排布
理解Button上面的titleLabel和imageView的位置关系
- titleEdgeInsets是titleLabel相对于其上下左右的insets
- 如果只有title。
①那titleLabel的上下左右都是相对于Button的；
- 如果只有image。
①imageView的上下左右都是相对于Button的；
- 如果同时有image和label。
①image的上下左是相对于Button的,右是相对于label的
②label的上下右是相对于Button的,左是相对于label的。
-
Button左右排布
#######效果---<左图片 右文字>
佰亿猫.png
#######代码
UIButton * testButton = [UIButton buttonWithType:UIButtonTypeCustom];
testButton.frame = CGRectMake(100, 200, 100, 50);
[testButton setTitle:@"佰亿猫" forState:UIControlStateNormal];
[testButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[testButton setImage:[UIImage imageNamed:@"gd_yqhy"] forState:UIControlStateNormal];
testButton.titleEdgeInsets = UIEdgeInsetsMake(-5,10,0,0);//（上top，左left，下bottom，右right）这里可以写负值，对上写－5，那么image就象上移动5个像素
testButton.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
[self.view addSubview:testButton];
#######效果---<右图片 左文字>
90E5467C-B5C6-4F41-84CF-1C53BDD14855.png
#######原理
Button默认是左图片，右文字。并且在设置edge insets之前，位置已经有了设定。所以设置title的edge insets，真实的作用是在原来的边距值基础上增加或减少某个间距，负值便是减少。以title为例，设置右边距增加图片宽度，就使得自己的右边界距离按钮的右边界多了图片的宽度，正好放下图片。此时，title lable变小了，而title lable的左边界还在原来的位置上，所以lable的左边界距离按钮的左边界减少图片的宽度，lable就和原来一样大了，而且左侧起始位置和图片的左侧起始位置相同了。
#######代码
UIButton * testButton = [UIButton buttonWithType:UIButtonTypeCustom];
testButton.frame = CGRectMake(100, 200, 100, 50);
[testButton setTitle:@"佰亿猫" forState:UIControlStateNormal];
[testButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[testButton setImage:[UIImage imageNamed:@"gd_yqhy"] forState:UIControlStateNormal];
[testButton setTitleEdgeInsets:UIEdgeInsetsMake(0, -testButton.imageView.image.size.width, 0, testButton.imageView.image.size.width)];
[testButton setImageEdgeInsets:UIEdgeInsetsMake(0, testButton.titleLabel.bounds.size.width + 10, 0, -testButton.titleLabel.bounds.size.width)];
[self.view addSubview:testButton];
-
Button上下排布
#######前序<实现上下排布的方法很多方案>
- 1、自定义一个UIView，然后有两个属性label和imageView，然后设置位置布局，再添加单击手势，用协议代理回传点击方法。
- 2、写一个继承UIButton的类,有两个属性label和imageView，然后设置布局。不需要设置手势来实现点击,Button有自己的点击事件。
- 3、直接用Button自带的titleLabel和imageView,写个类别，用来设置label和image的排列方式。自己想怎么设置都可以--<最好的办法,此方法我也是无意中看到别人这样写的,在自己项目中也常用>
上面1，2方法都可以实现我以前也用过，但是作为一个码农要把自己的代码优化，所以不建议使用第一,二种方法，确实有点Low但是可以自己尝试。重点讲解第三种方案--
#######效果
36C8D299-EBB0-4AF0-9EC8-92777147832E.png
#######代码 类别.H
#import <UIKit/UIKit.h>
@interface UIButton (Category)
typedef NS_ENUM(NSUInteger, CBBButtonEdgeInsetsStyle) {
CBBButtonEdgeInsetsStyleTop, // image在上
CBBButtonEdgeInsetsStyleLeft, // image在左
CBBButtonEdgeInsetsStyleBottom, // image在下
CBBButtonEdgeInsetsStyleRight // image在右
};
- (void)layoutButtonWithEdgeInsetsStyle:(CBBButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space;
#######代码 类别.M
#import "UIButton+Category.h"
@implementation UIButton (Category)
/**
设置button的titleLabel和imageView的布局<枚举>，及间距
@param style titleLabel和imageView的样式
@param space titleLabel和imageView的间距
*/
- (void)layoutButtonWithEdgeInsetsStyle:(CBBButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space
{
// 1. 得到imageView和titleLabel的宽、高
CGFloat imageWith = self.imageView.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height;
CGFloat labelWidth = 0.0;
CGFloat labelHeight = 0.0;
if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
// 由于iOS8中titleLabel的size为0
labelWidth = self.titleLabel.intrinsicContentSize.width;
labelHeight = self.titleLabel.intrinsicContentSize.height;
} else {
labelWidth = self.titleLabel.frame.size.width;
labelHeight = self.titleLabel.frame.size.height;
}
// 2. 声明全局的imageEdgeInsets和labelEdgeInsets
UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
// 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
switch (style) {
case CBBButtonEdgeInsetsStyleTop:
{
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
}
break;
case CBBButtonEdgeInsetsStyleLeft:
{
imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
}
break;
case CBBButtonEdgeInsetsStyleBottom:
{
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
}
break;
case CBBButtonEdgeInsetsStyleRight:
{
imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
}
break;
default:
break;
}
// 4. 赋值
self.titleEdgeInsets = labelEdgeInsets;
self.imageEdgeInsets = imageEdgeInsets;
}
#######代码 控制器
for (int i = 0; i<4; i++) {
UIButton * testButton = [UIButton buttonWithType:UIButtonTypeCustom];
testButton.frame = CGRectMake(100, 100*(i +1), 100, 50);
[testButton setTitle:@"佰亿猫" forState:UIControlStateNormal];
[testButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[testButton setImage:[UIImage imageNamed:@"gd_yqhy"] forState:UIControlStateNormal];
[testButton layoutButtonWithEdgeInsetsStyle:i imageTitleSpace:10];
[self.view addSubview:testButton];
未完待续。。需要代码的➕QQ1107385382<抱歉目前不会GitHub 后续上传>
