自定义点赞切换控件

场景：

点赞功能这样的需求很常见，一般我们会考虑是否可以直接用 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