简介

在项目开发中无时不刻的用到了UIButton,如果需要实现一些特殊的效果就需要自定义按钮(例如图片在上,图片在下,配置角标等),如果每一个效果都要自定义按钮的话,那文件显然就很多了,所以我对button进行了封装, 在开发中带来了便捷并减少代码量)

一张图看懂JMButton

JMButton.png

JMBadgeValue详解

JMbadgeValue继承自UIlabel,内置三种样式和三种动画, 是按钮上的一个角标, 独立于JMButton, 默认不展示这个角标的

/** badgeValue样式 */
typedef NS_ENUM(NSInteger, JMBadgeValueType) {
    JMBadgeValueTypePoint, //点
    JMBadgeValueTypeNew, //new
    JMBadgeValueTypeNumber, //number
};

/** badgeValue 动画样式 */
typedef NS_ENUM(NSInteger, JMBadgeValueAnimationType) {
    JMBadgeValueAnimationTypeNone, //无动画
    JMBadgeValueAnimationTypeShake, //抖动
    JMBadgeValueAnimationTypeOpacity, //透明过渡动画
    JMBadgeValueAnimationTypeScale, //缩放动画
};

@interface JMBadgeValue : UIView

/** badgeL */
@property (nonatomic, strong) UILabel *badgeL;
/** type */
@property (nonatomic, assign) JMBadgeValueType type;
/** animationType */
@property (nonatomic, assign) JMBadgeValueAnimationType animationType;
/** badgeValue */
@property (nonatomic, copy) NSString *badgeValue;
@property (nonatomic, assign) CGFloat badgeRadius;


- (void)showAnimation;

@end

JMButton详解

JMButton是一个自定义View,主要的功能是负责展示自定义Button, 自定义BadgeVlaue以及对点击事件, 下面是代码块中有一个初始化方式和一些对badgeValue的配置,如显示new关键字的BadgeValue- (void)showNewBadgeValue;你还可以显示badgeValue的动画效果- (void)showBadgeAnimation;

@interface JMButton : UIView

- (instancetype)initWithFrame:(CGRect)frame ButtonConfig:(JMBaseButtonConfig *)buttonConfig;


/**
 点击事件
 @param target 事件目标
 @param action 事件方法
 @param controlEvents 事件类型
 */
- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;




/********** 按钮角标配置及显示, 默认不显示角标, 如需要可通过如下方法设置 (frame必需要有值) **********/

/*****  请注意, 如果需要自定义角标的样式(如调用时下面五个属性时必需在show方法之前设置调用 *****/

/** 角标的文字颜色 (默认 #FFFFFF) */
@property (nonatomic, strong) UIColor *badgeTextColor;
/** 角标的背景颜色 (默认 #FF4040) */
@property (nonatomic, strong) UIColor *badgeBackgroundColor;
/** badgeTextFont (如没有特殊需求, 请勿修改此属性, 此属性只有在控制器加载完成后有效)*/
@property (nonatomic, strong) UIFont *badgeTextFont;
/** badgeSize (如没有特殊需求, 请勿修改此属性, 此属性只有在控制器加载完成后有效)*/
@property (nonatomic, assign) CGSize badgeSize;
/** badgeOffset (如没有特殊需求, 请勿修改此属性, 此属性只有在控制器加载完成后有效) */
@property (nonatomic, assign) CGPoint badgeOffset;
/** badge圆角大小 (如没有特殊需求, 请勿修改此属性, 此属性只有在控制器加载完成后有效, 一般配合badgeSize或badgeOffset使用) */
@property (nonatomic, assign) CGFloat badgeRadius;

/*****  请注意, 如果需要自定义角标的样式(如调用时上面五个属性时必需在show方法之前设置调用 *****/

/** 动画类型 */
@property (nonatomic, assign) JMBadgeValueAnimationType badgeAnimationType;
/** badgeValue(角标数值, 仅对 数值样式有效) */
@property (nonatomic, copy) NSString *badgeValue;

/**
 显示小红点样式
 */
- (void)showPointBadgeValue;

/**
 显示New样式
 */
- (void)showNewBadgeValue;

/**
 显示数值样式
 @param badgeValue 数值
 */
- (void)showNumberBadgeValue:(NSString *)badgeValue;

/**
 删除小红点
 */
- (void)removeBadgeValue;

/**
 展示动画
 */
- (void)showBadgeAnimation;



@end

JMBaseButton详解

JMBaseButton继承自UIButton, 对按钮进行了高度自定义, 包括图片上下左右的控制、图片和文字的间距控制、圆角、背景、边框等，JMBaseButton和JMBaseButtonConfig是不可分离的，后面会讲解到JMBaseButtonConfig，提供了工厂方法和实例方法进行初始化。

#import <UIKit/UIKit.h>
#import "JMBaseButtonConfig.h"

@interface JMBaseButton : UIButton

+ (instancetype)buttonFrame:(CGRect)frame ButtonConfig:(JMBaseButtonConfig *)buttonConfig;

- (instancetype)initWithFrame:(CGRect)frame ButtonConfig:(JMBaseButtonConfig *)buttonConfig;

@end

JMBaseButtonConfig详解

JMBaseButtonConfig和JMBaseButton可以说是一体的，因为它就是一个配置文件，用于对JMBaseButton的样式配置。

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface JMBaseButtonConfig : NSObject

typedef NS_ENUM(NSInteger, JMButtonStyleType) {
    JMButtonStyleTypeTop,  //图片在上, 文字在下
    JMButtonStyleTypeLeft, //图片在左, 文字在右
    JMButtonStyleTypeBottom, //图片在下, 文字在上
    JMButtonStyleTypeRight, //图片在右, 文字在左
};


/** 初始化 */
+ (instancetype)buttonConfig;

/** 按钮类型 (默认图片在左, 文字在右) */
@property (nonatomic, assign) JMButtonStyleType styleType;
/** padding (文字和图片之间的间距, 默认为6.f) */
@property (nonatomic, assign) CGFloat padding;

/************************ 文字相关属性设置 ************************/
/** 文字大小(默认14.f) */
@property (nonatomic, strong) UIFont *titleFont;
/** 文字 (默认为nil) */
@property (nonatomic, copy) NSString *title;
/** 文字颜色(默认白色) */
@property (nonatomic, strong) UIColor *titleColor;
/** 更改文字的origin(无特殊需求,请勿修改此属性, 注意不能设置为0,0) */
@property (nonatomic, assign) CGPoint titleOrigin;


/************************ 图片相关属性设置 ************************/
/** 图片(默认为nil) */
@property (nonatomic, strong) UIImage *image;
/** 图片的大小(无特殊需求, 请勿修改此属性) */
@property (nonatomic, assign) CGSize imageSize;
/** 图片的origin(无特殊需求,请勿修改此属性,注意不能设置为0,0) */
@property (nonatomic, assign) CGPoint imageOrigin;

/************************ 圆角相关属性设置 ************************/
/** 圆角类型 (默认 UIRectCornerAllCorners) */
@property (nonatomic, assign) UIRectCorner corners;
/** 圆角大小 (默认 0) */
@property (nonatomic, assign) CGFloat cornerRadius;

/************************ 背景相关属性设置 ************************/
/** 背景颜色 (默认 白色) */
@property (nonatomic, strong) UIColor *backgroundColor;
/** 背景图片 (默认 无) */
@property (nonatomic, strong) UIImage *backgroundImage;

/************************ 边框相关属性设置 ************************/
/** 边框线条颜色 (默认 clearColor) */
@property (nonatomic, strong) UIColor *borderColor;
/** 边框线条宽度 (默认 0 ) */
@property (nonatomic, assign) CGFloat borderWidth;


@end

JMBootstrapButton以及JMBootstrapButtonConfig详解

JMBootstrapButton继承自JMBaseButton，在拥有JMBaseButton的属性下扩展了自己的样式。
JMBootstrapButtonConfig继承自JMBaseButtonConfig，在拥有JMBaseButtonConfig的属性下扩展了自己的样式。

如何使用 (已使用JMBootstrapButton为例)

1. 导入JMButton#import "JMButton.h"，
2. 初始化JMBootstrapButtonConfig并配置属性

JMBootstrapButtonConfig *buttonConfig = [JMBootstrapButtonConfig buttonConfig];
buttonConfig.bootstrapType = JMBootstrapTypeDefault;

3. 初始化JMButton并添加到视图

JMButton *btn = [[JMButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50) ButtonConfig:buttonConfig];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubView:btn];

效果演示

JMButtonAll.gif