iOS UIButton中Image&label布局

开胃菜:button修改image的大小

button 可以设置为图片,但是如果图片过小,那么不管 button 设置的 frame 大小是多少,都是显示的图片的大小,这样就需要用代码调整图片的大小。

1、设置图片大小
这个方法我定义到了Image类的扩展里面了

-(UIImage*)scaleToSize:(CGSize)size
{
    // 创建一个bitmap的context
    // 并把它设置成为当前正在使用的context
    UIGraphicsBeginImageContext(size);
    // 绘制改变大小的图片
    [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
    // 从当前context中创建一个改变大小后的图片
    UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    // 使当前的context出堆栈
    UIGraphicsEndImageContext();
    // 返回新的改变大小后的图片
    return scaledImage;
}

2、调用方法
需要导入Image类的扩展那个头文件

UIImage *image = [UIImage imageNamed:@"set"];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(50, 50, 100, 50);
    button.backgroundColor = [UIColor yellowColor];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitle:@"title" forState:UIControlStateNormal];
    [button setImage:[image scaleToSize:CGSizeMake(50, 50)] forState:UIControlStateNormal];
    [self.view addSubview:button];

重点来啦

屏幕快照 2017-02-15 上午11.07.33.png

广大的程序员们肯定都遇到过这种布局把,一开始我是重新自定义一个view,然后有两个属性label和imageView,然后设置位置布局,再添加单击手势,这个方法需要写很多的代码。其实button已经给我们提供了这样的布局,有时候我们只是还不了解

在开始正文之前需要先介绍两个概念:

button可以设置 titleEdgeInsets属性和 imageEdgeInsets属性来调整其image和label相对位置
titleEdgeInsets是titleLabel相对于其上下左右的inset,如果只有title,那titleLabel的 上下左右 都是 相对于Button 的;如果只有image,那imageView的 上下左右 都是 相对于Button 的;如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。

在我们不做任何处理的时候同时设置image和title可以看出,image是在左边,label是在右边,所以“如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的”这句话是很好理解的。

CGFloat imageViewWidth = CGRectGetWidth(button.imageView.frame);

CGFloat labelWidth = CGRectGetWidth(button.titleLabel.frame);

CGFloat buttonWidth = CGRectGetWidth(button.frame);

默认状态UIButton 的  imageEdgeInsets = UIEdgeInsetsMake(0,0,0,0);

titleEdgeInsets = UIEdgeInsetsMake(0,0,0,0);

比如按钮的初始位置是这样
效果图:


屏幕快照 2017-02-15 上午11.18.11.png

这时候如果我们想要改变button的样式,就可以通过imageEdgeInsets&titleEdgeInsets来设置啦
譬如设置image在右,label在左边:
效果图:


屏幕快照 2017-02-15 上午11.21.06.png

想要变成上面的形式,需要设置image的偏移量上下不变,向右偏移一个label宽度,button.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth);
label的上下偏移量也是不变的,但是需要向左偏移一个image的宽度
button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageViewWidth, 0, imageViewWidth);

代码示例:

UIImage *image = [UIImage imageNamed:@"set"];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(50, 50, 100, 50);
    button.backgroundColor = [UIColor yellowColor];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitle:@"title" forState:UIControlStateNormal];
    [button setImage:image forState:UIControlStateNormal];
    [self.view addSubview:button];
    
  //获得imageView&label的宽度
    CGFloat imageViewWidth = CGRectGetWidth(button.imageView.frame);
    CGFloat labelWidth = CGRectGetWidth(button.titleLabel.frame);
   //设置偏移,必须上下左右都设置,不然出不来效果,小伙伴们可以尝试一下不设置image的右偏移量和label的左偏移量,看看效果
    button.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth);
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageViewWidth, 0, imageViewWidth);

为了方便我们能够一直使用修改的button,我们可以写一个button的扩展

1、创建一个Button的Category,.h文件如下,定义一个Enum,用于决定image和label的样式;一个方法用于调用设置。

#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
    MKButtonEdgeInsetsStyleTop, // image在上,label在下
    MKButtonEdgeInsetsStyleLeft, // image在左,label在右
    MKButtonEdgeInsetsStyleBottom, // image在下,label在上
    MKButtonEdgeInsetsStyleRight // image在右,label在左
};
@interface UIButton (ImageTitleSpacing)
/**
 *  设置button的titleLabel和imageView的布局样式,及间距
 *
 *  @param style titleLabel和imageView的布局样式
 *  @param space titleLabel和imageView的间距
 */
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space;

2、.m文件如下,实现方法

#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)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 MKButtonEdgeInsetsStyleTop:
        {
            imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
        }
            break;
        case MKButtonEdgeInsetsStyleLeft:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
        }
            break;
        case MKButtonEdgeInsetsStyleBottom:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
        }
            break;
        case MKButtonEdgeInsetsStyleRight:
        {
            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;
}

点关注,不迷路

推荐阅读更多精彩内容