16－1）UIButton开发中常见使用

UIButton自定义图片文字位置

运行如下代码：

 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
 button.frame = CGRectMake(40, 100, 200, 70);
 // button.center = self.view.center;
 [button setImage:[UIImage imageNamed:@"icon1"] forState:UIControlStateNormal];
 [button setTitle:@"按钮1" forState:UIControlStateNormal];
 button.backgroundColor = [UIColor grayColor];
 [self.view addSubview:button];

可以看出UIButton的默认显示样式是图片居左，文字居右，如下图1：

image.png

我们操作什么属性能够更改其设置呢？

水平方向的设置我们可以通过：`UIControlContentHorizontalAlignment`

  typedef NS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {
        UIControlContentHorizontalAlignmentCenter = 0,
        UIControlContentHorizontalAlignmentLeft   = 1,
        UIControlContentHorizontalAlignmentRight  = 2,
        UIControlContentHorizontalAlignmentFill   = 3,
        UIControlContentHorizontalAlignmentLeading  API_AVAILABLE(ios(11.0), tvos(11.0)) = 4,
        UIControlContentHorizontalAlignmentTrailing API_AVAILABLE(ios(11.0), tvos(11.0)) = 5,
    };

button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

UIControlContentHorizontalAlignmentLeft.png

UIControlContentHorizontalAlignmentCenter.png

UIControlContentHorizontalAlignmentRight.png

UIControlContentHorizontalAlignmentFill（发生了重叠，图片会变形）.png

UIControlContentHorizontalAlignmentLeading.png

UIControlContentHorizontalAlignmentTrailing.png

垂直方向的设置我们可以通过：`UIControlContentVerticalAlignment`

 typedef NS_ENUM(NSInteger, UIControlContentVerticalAlignment) {
        UIControlContentVerticalAlignmentCenter  = 0,
        UIControlContentVerticalAlignmentTop     = 1,
        UIControlContentVerticalAlignmentBottom  = 2,
        UIControlContentVerticalAlignmentFill    = 3,
  };

UIControlContentVerticalAlignmentCenter.png

UIControlContentVerticalAlignmentTop.png

UIControlContentVerticalAlignmentBottom.png

UIControlContentVerticalAlignmentFill(会变形).png

但是有时候我们根据需求需要调整按钮中图片和标题的位置，最常见的就是图片居上，文字居下显示的按钮，如下图所示：

image.png

实现这种居中显示的图上文下的按钮方式有很多，比如最简单的方法：自定义View，上面放一个UIButton一个UILabel子控件。

通过UIEdgeInsets调整位置

UIEdgeInsets有四个参数：top, left, bottom, right，分别代表上左下右的偏移量。

top : 为正数的时候,是往下偏移,为负数的时候往上偏移;
left : 为正数的时候往右偏移,为负数的时候往左偏移;
bottom : 为正数的时候往上偏移,为负数的时候往下偏移;
right :为正数的时候往左偏移,为负数的时候往右偏移;

@property(nonatomic)          UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero. On tvOS 10 or later, default is nonzero except for custom buttons.
@property(nonatomic)          UIEdgeInsets titleEdgeInsets;                // default is UIEdgeInsetsZero
reverses to shift between engrave and emboss appearance
@property(nonatomic)          UIEdgeInsets imageEdgeInsets;

修改图片标题的位置主要是用了UIButton的两个位置属性：
titleEdgeInsets
imageEdgeInsets。

左文字右图片

 UIImage *image = button.imageView.image;
 [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, image.size.width)];
 [button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];

左文字右图片.png

在这里我们相当于把文字向左移动可一个图片都宽度，而图片向右移动了文字的宽度。在此我们还可以设置图片和文字之间的间距：

[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width - 10, 0, image.size.width)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width + 10, 0, -button.titleLabel.bounds.size.width)];

image.png

上图片下文字

  [button setTitleEdgeInsets:UIEdgeInsetsMake(button.imageView.frame.size.height ,-button.imageView.frame.size.width, 0.0,0.0)];
  [button setImageEdgeInsets:UIEdgeInsetsMake(-button.imageView.frame.size.height, 0.0,0.0, -button.titleLabel.bounds.size.width)];

image.png

上文字下图片

  [button setTitleEdgeInsets:UIEdgeInsetsMake(-button.imageView.frame.size.height ,-button.imageView.frame.size.width, 0,0)];
  [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0,-button.imageView.frame.size.height, -button.titleLabel.bounds.size.width)];

image.png

UIButton渐变色

废话不多，上代码

#import <UIKit/UIKit.h>
#import "UIButton+Extensions.h"
#import "Helper.h"

NS_ASSUME_NONNULL_BEGIN

@interface ColorButton : UIButton

/**
 初始化 button (生成渐变色图片填充button背景图片)
 */
+ (instancetype)buttonWithFrame:(CGRect)frame layerColors:(NSArray *)layerColors;

@end

NS_ASSUME_NONNULL_END


#import "ColorButton.h"

@implementation ColorButton

+ (instancetype)buttonWithFrame:(CGRect)frame layerColors:(NSArray *)layerColors {
    ColorButton *button = [self buttonWithType:UIButtonTypeCustom];
    button.backgroundColor = [UIColor clearColor];
    button.frame = frame;
    button.titleLabel.font = [UIFont systemFontOfSize:30];
    button.titleLabel.textColor = [UIColor whiteColor];
    button.layer.cornerRadius = 20;
    button.layer.masksToBounds = YES;
    // 设置渐变色
    NSArray *defaultPercentArray = @[@(0.18),@(1)];
    if (!layerColors) {
        layerColors = @[(id)UIColorRGB(0x6B8FFE),(id)UIColorRGB(0x574FF2)];
    }
    [button gradientButtonWithSize:CGSizeMake(button.frame.size.width, button.frame.size.height)
                        colorArray:layerColors
                   percentageArray:defaultPercentArray
                      gradientType:GradientFromLeftBottomToRightTop];
    return button;
}

@end

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSInteger, GradientType) {
    GradientFromTopToBottom = 1,            //从上到下
    GradientFromLeftToRight,                //从做到右
    GradientFromLeftTopToRightBottom,       //从上到下
    GradientFromLeftBottomToRightTop        //从上到下
};

@interface UIImage (Util)

/**
 *  根据给定的颜色，生成渐变色的图片
 *  @param imageSize        要生成的图片的大小
 *  @param colors         渐变颜色的数组
 *  @param percents          渐变颜色的占比数组
 *  @param gradientType     渐变色的类型
 */
- (UIImage *)imageWithSize:(CGSize)imageSize
            gradientColors:(NSArray *)colors
                percentage:(NSArray *)percents
              gradientType:(GradientType)gradientType;
@end

NS_ASSUME_NONNULL_END

#import "UIImage+Util.h"

@implementation UIImage (Util)


/**
 *  根据给定的颜色，生成渐变色的图片
 *  @param imageSize        要生成的图片的大小
 *  @param colorArr         渐变颜色的数组
 *  @param percents          渐变颜色的占比数组
 *  @param gradientType     渐变色的类型
 */
- (UIImage *)imageWithSize:(CGSize)imageSize
            gradientColors:(NSArray *)colors
                percentage:(NSArray *)percents
              gradientType:(GradientType)gradientType {
    
    NSAssert(percents.count <= 5, @"输入颜色数量过多，如果需求数量过大，请修改locations[]数组的个数");
    
    NSMutableArray *ar = [NSMutableArray array];
    for(UIColor *c in colors) {
        [ar addObject:(id)c.CGColor];
    }
    
    CGFloat locations[5];
    for (int i = 0; i < percents.count; i++) {
        locations[i] = [percents[i] floatValue];
    }
    
    
    UIGraphicsBeginImageContextWithOptions(imageSize, YES, 1);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorGetColorSpace([[colors lastObject] CGColor]);
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)ar, locations);
    CGPoint start;
    CGPoint end;
    switch (gradientType) {
        case GradientFromTopToBottom:
            start = CGPointMake(imageSize.width/2, 0.0);
            end = CGPointMake(imageSize.width/2, imageSize.height);
            break;
        case GradientFromLeftToRight:
            start = CGPointMake(0.0, imageSize.height/2);
            end = CGPointMake(imageSize.width, imageSize.height/2);
            break;
        case GradientFromLeftTopToRightBottom:
            start = CGPointMake(0.0, 0.0);
            end = CGPointMake(imageSize.width, imageSize.height);
            break;
        case GradientFromLeftBottomToRightTop:
            start = CGPointMake(0.0, imageSize.height);
            end = CGPointMake(imageSize.width, 0.0);
            break;
        default:
            break;
    }
    CGContextDrawLinearGradient(context, gradient, start, end, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    CGGradientRelease(gradient);
    CGContextRestoreGState(context);
    CGColorSpaceRelease(colorSpace);
    UIGraphicsEndImageContext();
    return image;
}
@end

#import <UIKit/UIKit.h>
#import "UIImage+Util.h"
#import "Helper.h"

NS_ASSUME_NONNULL_BEGIN

@interface UIButton (Extensions)

/**
 *  根据给定的颜色，设置按钮的颜色
 *  @param btnSize  这里要求手动设置下生成图片的大小，防止coder使用第三方layout,没有设置大小
 *  @param clrs     渐变颜色的数组
 *  @param percent  渐变颜色的占比数组
 *  @param type     渐变色的类型
 */
- (UIButton *)gradientButtonWithSize:(CGSize)btnSize
                          colorArray:(nullable NSArray *)clrs
                     percentageArray:(nullable NSArray *)percent
                        gradientType:(GradientType)type;

@end

NS_ASSUME_NONNULL_END

#import "UIButton+Extensions.h"

@implementation UIButton (Extensions)

- (UIButton *)gradientButtonWithSize:(CGSize)btnSize
                          colorArray:(NSArray *)clrs
                     percentageArray:(NSArray *)percent
                        gradientType:(GradientType)type {
    static UIImage *defaultImage = nil;
    UIImage *backImage = nil;
    if (!percent) {
        percent = @[@(0.18),@(1)];
    }
    if (!clrs) {
        clrs = @[(id)UIColorRGB(0x6B8FFE),(id)UIColorRGB(0x574FF2)];
        if (!defaultImage) {
            defaultImage = [[UIImage alloc] imageWithSize:btnSize gradientColors:clrs percentage:percent gradientType:type];
        }
        backImage = defaultImage;
    } else {
        backImage = [[UIImage alloc] imageWithSize:btnSize gradientColors:clrs percentage:percent gradientType:type];
    }
    [self setBackgroundImage:backImage forState:UIControlStateNormal];
    return self;
}

@end

UIButton扩大按钮点击区域

按钮扩大点击区域，具体原理可查看iOS中触摸事件传递和响应原理


#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ExpandTouchButton : UIButton

/**
 扩大热区范围 例如上下左右各扩大10 (-10 , -10, -10 , -10) 如果设置正值则会将按钮可点击区域缩小
 */
@property (nonatomic, assign) UIEdgeInsets expandEdgeInsets;

/**
 实际可点击范围
 */
@property (nonatomic, assign, readonly) CGRect realTouchBouns;


@end

NS_ASSUME_NONNULL_END

#import "ExpandTouchButton.h"

@implementation ExpandTouchButton

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    
    return CGRectContainsPoint(self.realTouchBouns, point);
}

- (CGRect)realTouchBouns {
    
    return CGRectMake(_expandEdgeInsets.left,
                      _expandEdgeInsets.top,
                      self.frame.size.width - _expandEdgeInsets.left - _expandEdgeInsets.right,
                      self.frame.size.height - _expandEdgeInsets.top - _expandEdgeInsets.bottom);
}

- (BOOL)isExclusiveTouch {
    return YES;
}

@end

示例：

/**
 *  扩大按钮点击区域
 */
- (void)test3 {
    
    ExpandTouchButton *button = [ExpandTouchButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(100, 100, 200, 70);
    // button.center = self.view.center;
    [button setImage:[UIImage imageNamed:@"order_waiting_pay"] forState:UIControlStateNormal];
    [button setTitle:@"我是扩大点击范围按钮" forState:UIControlStateNormal];
    button.backgroundColor = [UIColor grayColor];
    button.expandEdgeInsets = UIEdgeInsetsMake(-50, -50, -50, -50);
    [self.view addSubview:button];
    [button addTarget:self action:@selector(logtest) forControlEvents:UIControlEventTouchUpInside];
}

- (void)logtest {
    NSLog(@"按钮被点击了-----------");
}

Demo地址

最后编辑于：2020.06.14 22:21:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,560评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,104评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,297评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,869评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,275评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,563评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,833评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,543评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,245评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,512评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,011评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,359评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,006评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,062评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,825评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,590评论 2赞 273
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,501评论 2赞 268

16－1）UIButton开发中常见使用

UIButton自定义图片文字位置

水平方向的设置我们可以通过：UIControlContentHorizontalAlignment

垂直方向的设置我们可以通过：UIControlContentVerticalAlignment

通过UIEdgeInsets调整位置

左文字 右图片

上图片 下文字

上文字 下图片

UIButton渐变色

UIButton扩大按钮点击区域

推荐阅读更多精彩内容

水平方向的设置我们可以通过：`UIControlContentHorizontalAlignment`

垂直方向的设置我们可以通过：`UIControlContentVerticalAlignment`

左文字右图片

上图片下文字

上文字下图片