基础控件-->>UIButton详解

继基础控件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 

@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 后续上传>

基础控件-->>UIButton详解

1、UIButton基础属性

按钮状态分析

2、UIButton进阶阶段-->>文字,图片的上下左右排布

理解Button上面的titleLabel和imageView的位置关系

Button左右排布

Button上下排布

你可能感兴趣的:(基础控件-->>UIButton详解)