自定义点赞切换控件

场景：

点赞功能这样的需求很常见，一般我们会考虑是否可以直接用 UIButton 实现，UIButton 作为一个系统复合控件，外部是一个 View ＋ UIControl 的容器，内部包含了 UILabel 和 UIImage、以及排版规则。用 UIButton 不好控制去做『赞』和『取消赞』切换时的动画效果。

可是我们又很需要 UIButton 控件的事件响应机制。怎么办呢？

这时我们可以考虑使用 UIControl，在这里有两个突出的优势：

1、作为 UIButton 的父控件，具有 UIButton 一样的事件响应机制

2、作为 UIView 的简单子控件，具有作为容器视图的潜质

实现方式：

继承 UIControl 的自定义控件包含多个图片视图，通过控制多个图片视图的透明度和缩放动画效果来切换。这里抛砖引玉，只是一种实现思路。

效果如下：



KMFlagView.h

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, FlagMode) {
FlagModeNO = 0,
FlagModeYES = 1,
FlagModeDefault = 2
};

@interface KMFlagView : UIControl
{
@private
UIImageView *_imgVNO;
UIImageView *_imgVYES;
UIImageView *_imgVDefault;
}

@property (strong, nonatomic) UIImage *imgNO;
@property (strong, nonatomic) UIImage *imgYES;
@property (strong, nonatomic) UIImage *imgDefault;
@property (assign, nonatomic) FlagMode flag;

- (instancetype)initWithFrame:(CGRect)frame withImgNO:(UIImage *)imgNO withImgYES:(UIImage *)imgYES withImgDefault:(UIImage *)imgDefault;
- (void)changeToFlag:(FlagMode)flag withAnimation:(BOOL)animation;

@end

KMFlagView.m

#import "KMFlagView.h"

@interface KMFlagView ()

@end

@implementation KMFlagView

#pragma mark - Override Property Method
- (void)setImgNO:(UIImage *)imgNO {
if (!_imgVNO) {
_imgVNO = [[UIImageView alloc] initWithFrame:self.bounds];
_imgVNO.contentMode = UIViewContentModeCenter;
_imgVNO.alpha = 0.0;
[self addSubview:_imgVNO];
}
_imgVNO.image = imgNO;
_imgNO = imgNO;
}

- (void)setImgYES:(UIImage *)imgYES {
if (!_imgVYES) {
_imgVYES = [[UIImageView alloc] initWithFrame:self.bounds];
_imgVYES.contentMode = UIViewContentModeCenter;
_imgVYES.alpha = 0.0;
[self addSubview:_imgVYES];
}
_imgVYES.image = imgYES;
_imgYES = imgYES;
}

- (void)setImgDefault:(UIImage *)imgDefault {
if (!_imgVDefault) {
_imgVDefault = [[UIImageView alloc] initWithFrame:self.bounds];
_imgVDefault.contentMode = UIViewContentModeCenter;
_imgVDefault.alpha = 1.0;
[self addSubview:_imgVDefault];
}
_imgVDefault.image = imgDefault;
_imgDefault = imgDefault;
}

#pragma mark - Public Method
- (instancetype)initWithFrame:(CGRect)frame withImgNO:(UIImage *)imgNO withImgYES:(UIImage *)imgYES withImgDefault:(UIImage *)imgDefault {
if (self = [super initWithFrame:frame]) {
//In order to use [Override Property Method]
self.imgNO = imgNO;
self.imgYES = imgYES;
self.imgDefault = imgDefault;

_flag = FlagModeDefault;
}
return self;
}

- (void)changeToFlag:(FlagMode)flag withAnimation:(BOOL)animation {
if (animation) {
if (flag == FlagModeYES) {
_imgVYES.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:0.5
animations:^{
_imgVYES.alpha = 1.0;
_imgVNO.alpha = 0.0;
_imgVDefault.alpha = 0.0;

_imgVYES.transform = CGAffineTransformMakeScale(1.0, 1.0);
_imgVNO.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:^(BOOL finished) {
_imgVYES.transform = CGAffineTransformMakeScale(1.0, 1.0);
_imgVNO.transform = CGAffineTransformMakeScale(1.0, 1.0);
}];
} else {
_imgVNO.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:0.5
animations:^{
_imgVYES.alpha = 0.0;
_imgVNO.alpha = 1.0;
_imgVDefault.alpha = 0.0;

_imgVYES.transform = CGAffineTransformMakeScale(2.0, 2.0);
_imgVNO.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {
_imgVYES.transform = CGAffineTransformMakeScale(1.0, 1.0);
_imgVNO.transform = CGAffineTransformMakeScale(1.0, 1.0);
}];
}
} else {
if (flag == FlagModeYES) {
_imgVYES.alpha = 1.0;
_imgVNO.alpha = 0.0;
_imgVDefault.alpha = 0.0;
} else {
_imgVYES.alpha = 0.0;
_imgVNO.alpha = 1.0;
_imgVDefault.alpha = 0.0;
}
_imgVYES.transform = CGAffineTransformMakeScale(1.0, 1.0);
_imgVNO.transform = CGAffineTransformMakeScale(1.0, 1.0);
_imgVDefault.transform = CGAffineTransformMakeScale(1.0, 1.0);
}
_flag = flag;
}

@end

ViewController.h

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

@interface ViewController : UIViewController
@property (strong, nonatomic) KMFlagView *flagView;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()
- (void)layoutUI;
- (void)flagViewDidPush:(KMFlagView *)sender;
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

[self layoutUI];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

- (void)layoutUI {
UIImage *imgNO = [UIImage imageNamed:@"OrderDetails_Like"];
UIImage *imgYES = [UIImage imageNamed:@"OrderDetails_LikePress"];
UIImage *imgDefault = [UIImage imageNamed:@"OrderDetails_Default"];

_flagView = [[KMFlagView alloc] initWithFrame:CGRectMake(0, 0, 80.0, 80.0)
withImgNO:imgNO
withImgYES:imgYES
withImgDefault:imgDefault];
_flagView.center = self.view.center;
[_flagView addTarget:self
action:@selector(flagViewDidPush:)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:_flagView];
}

- (void)flagViewDidPush:(KMFlagView *)sender {
FlagMode flag = sender.flag != FlagModeYES ? FlagModeYES : FlagModeNO;
[sender changeToFlag:flag withAnimation:YES];
}

@end