iOS自定义button抖动效果并实现右上角删除按钮

https://www.jianshu.com/p/033a502e9ccd

 

2017.01.12 17:35* 字数 780 阅读 654评论 1

 

 
1.长按抖动;

 

2.抖动时出现一个X;

3.点击x,删除button;

4.抖动时,点击按钮,停止抖动;

下面是我的设计思路:

1.继承UIButton;

2.给button在右上角添加一个按钮;

3.给button添加长按手势;

4.给button添加遮盖,抖动时可以拦截点击事件;

有更好的做法,还请斧正。

// .m文件

#import "DZDeleteButton.h"

#import "UIView+Extension.h" // 这个只是为了方便取宽高的一个分类,代码就不贴了

@interface DZDeleteButton ()

// 是否抖动

@property (nonatomic, assign, getter=isShaking)BOOLshaking;

// 右上角的按钮,

@property (nonatomic, weak) UIImageView *iconBtn;

// 遮盖,在抖动时出现

@property (nonatomic, weak) UIView *coverView;

@end

@implementation DZDeleteButton

- (UIImageView *)iconBtn {

if(!_iconBtn) {

UIImageView *iconBtn = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"delete"]];

iconBtn.userInteractionEnabled = YES;

iconBtn.hidden = YES;

_iconBtn = iconBtn;

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(iconClick)];

[iconBtn addGestureRecognizer:tap];

[self addSubview:iconBtn];

}

return_iconBtn;

}

- (UIView *)coverView {

if(!_coverView) {

UIView *view = [[UIView alloc] init];

view.backgroundColor = [UIColor clearColor];

view.hidden = YES;

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(coverClick)];

[view addGestureRecognizer:tap];

[self addSubview:view];

_coverView = view;

}

return_coverView;

}

- (instancetype)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if(self) {

[self addLongPressGestureRecognizer];

}

returnself;

}

- (instancetype)init

{

self = [super init];

if(self) {

[self addLongPressGestureRecognizer];

}

returnself;

}

- (instancetype)initWithCoder:(NSCoder *)coder

{

self = [super initWithCoder:coder];

if(self) {

[self addLongPressGestureRecognizer];

}

returnself;

}

// 添加长按手势

- (void)addLongPressGestureRecognizer {

UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longClick)];

[self addGestureRecognizer:longPress];

}

- (void)delete{

[self.iconBtn.superview removeFromSuperview];

}

// 是否执行动画

- (void)setShaking:(BOOL)shaking {

if(shaking) {

[self shakingAnimation];

self.coverView.hidden = NO;

self.iconBtn.hidden = NO;

}else{

[self.layer removeAllAnimations];

self.coverView.hidden = YES;

self.iconBtn.hidden = YES;

}

}

#pragma mark - 抖动动画

#define Angle2Radian(angle) ((angle) / 180.0 * M_PI)

- (void)shakingAnimation {

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

anim.keyPath = @"transform.rotation";

anim.values = @[@(Angle2Radian(-5)), @(Angle2Radian(5)), @(Angle2Radian(-5))];

anim.duration = 0.25;

// 动画次数设置为最大

anim.repeatCount = MAXFLOAT;

// 保持动画执行完毕后的状态

anim.removedOnCompletion = NO;

anim.fillMode = kCAFillModeForwards;

[self.layer addAnimation:anim forKey:@"shake"];

}

- (void)longClick {

if(self.shaking)return;

self.shaking = YES;

}

// 点击右上角按钮

- (void)iconClick {

[self removeFromSuperview];

// 设计一个代理,为了在自己被删除后做一些事情(例如,对页面进行布局)

if([self.delegate respondsToSelector:@selector(deleteButtonRemoveSelf:)]) {

[self.delegate deleteButtonRemoveSelf:self];

}

}

- (void)coverClick {

self.shaking = NO;

}

- (void)layoutSubviews {

[super layoutSubviews];

// 调整位置

self.imageView.x = 0;

self.imageView.y = 0;

self.imageView.width = self.width;

self.imageView.height = self.width;

self.titleLabel.x = 0;

self.titleLabel.width = self.width;

if(self.width >= self.height) {

self.titleLabel.height = 20;

self.titleLabel.y = self.height - self.titleLabel.height;

}else{

self.titleLabel.y = self.imageView.height;

self.titleLabel.height = self.height - self.titleLabel.y;

}

self.titleLabel.textAlignment = NSTextAlignmentCenter;

self.iconBtn.size = CGSizeMake(self.width * 0.3, self.width * 0.3);

self.iconBtn.x = self.width - self.iconBtn.width;

self.iconBtn.y = 0;

self.coverView.frame = self.bounds;

[self bringSubviewToFront:self.iconBtn];

}

@end

// .h文件 只有一个代理

#import 

@classDZDeleteButton;

@protocol DZDeleteButtonDelegate 

@optional

- (void)deleteButtonRemoveSelf:(DZDeleteButton *)button;

@end

@interface DZDeleteButton : UIButton

@property (nonatomic, weak) id delegate;

@end

 

上面效果图在vc中的代码

- (void)viewDidLoad {

[super viewDidLoad];

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

[button setImage:[UIImage imageNamed:@"bj"] forState:UIControlStateNormal];

[button setTitle:@"百思"forState:UIControlStateNormal];

button.delegate = self;

button.frame = CGRectMake(20, 20, 60, 80);

[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

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

[self.view addSubview:button];

}

- (void)btnClick {

NSLog(@"点击button");

}

- (void)deleteButtonRemoveSelf:(DZDeleteButton *)button {

NSLog(@"已经删除,要做什么事");

}

posted @ 2018-07-02 09:25  sundaysios  阅读(738)  评论(0编辑  收藏  举报