您的位置:首页 > 产品设计 > UI/UE

自定义UIButton,文字图片位置设置 例:图片在上文字在下

2016-11-25 15:18 288 查看
#import
<UIKit/UIKit.h>

typedef
NS_ENUM(NSUInteger, JKButtonEdgeInsetsStyle) {

    JKButtonEdgeInsetsStyleTop,
// image在上,label在下

    JKButtonEdgeInsetsStyleLeft,
// image在左,label在右

    JKButtonEdgeInsetsStyleBottom,
// image在下,label在上

    JKButtonEdgeInsetsStyleRight
// image在右,label在左

};

@interface UIButton (JKImageTitleSpacing)

+ (UIButton *)buttonWithTitle:(NSString
*)title ImageName:(NSString *)imageName ButtonEdgeInsetsStyle:(JKButtonEdgeInsetsStyle)edgeInsetsStyle
Frame:(CGRect)frame actionBlock:(void(^)(UIButton
*sender))actionBlock;

@end

#import
"UIButton+JKImageTitleSpacing.h"

typedef
void (^ActionBlock)(UIButton *);

@implementation UIButton (JKImageTitleSpacing)

static
ActionBlock _actionBlock;

+ (UIButton *)buttonWithTitle:(NSString
*)title

                    ImageName:(NSString *)imageName

        ButtonEdgeInsetsStyle:(JKButtonEdgeInsetsStyle)edgeInsetsStyle

                        Frame:(CGRect)frame

                  actionBlock:(void(^)(UIButton
*sender))actionBlock {

   
UIButton *button = [[UIButton
alloc]
init];

    [button
setTitle:title
forState:UIControlStateNormal];

    [button
setImage:[UIImage
imageNamed:imageName]
forState:UIControlStateNormal];

    _actionBlock = actionBlock;

    button.frame = frame;

    [button
addTarget:self
action:@selector(buttonClickAction:)
forControlEvents:UIControlEventTouchUpInside];

    [button
layoutButtonWithEdgeInsetsStyle:edgeInsetsStyle
imageTitleSpace:10];

    return button;

}

+ (void)buttonClickAction:(UIButton
*)sender {

   
if (_actionBlock) {

        _actionBlock(sender);

    }

}

- (void)layoutButtonWithEdgeInsetsStyle:(JKButtonEdgeInsetsStyle)style

                        imageTitleSpace:(CGFloat)space

{

   
//    self.backgroundColor = [UIColor cyanColor];

    

    /**

     *  前置知识点:titleEdgeInsets是title相对于其上下左右的inset,跟tableView的contentInset是类似的,

     *  如果只有title,那它上下左右都是相对于button的,image也是一样;

     *  如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。

     */

    

    

   
// 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
JKButtonEdgeInsetsStyleTop:

        {

            imageEdgeInsets =
UIEdgeInsetsMake(-labelHeight-space/2.0,
0,
0, -labelWidth);

            labelEdgeInsets =
UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0,
0);

        }

            break;

       
case
JKButtonEdgeInsetsStyleLeft:

        {

            imageEdgeInsets =
UIEdgeInsetsMake(0, -space/2.0,
0, space/2.0);

            labelEdgeInsets =
UIEdgeInsetsMake(0, space/2.0,
0, -space/2.0);

        }

            break;

       
case
JKButtonEdgeInsetsStyleBottom:

        {

            imageEdgeInsets =
UIEdgeInsetsMake(0,
0, -labelHeight-space/2.0, -labelWidth);

            labelEdgeInsets =
UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith,
0,
0);

        }

            break;

       
case
JKButtonEdgeInsetsStyleRight:

        {

            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;

}

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息