简介
在项目开发中无时不刻的用到了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为例)
- 导入JMButton
#import "JMButton.h"， - 初始化JMBootstrapButtonConfig并配置属性
JMBootstrapButtonConfig *buttonConfig = [JMBootstrapButtonConfig buttonConfig];
buttonConfig.bootstrapType = JMBootstrapTypeDefault;
- 初始化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
网友评论