Implementation of thumb ups in ios -- UIControl

Implementation of thumb ups in ios -- UIControl

During development, you may need to make a thumbs up request many times. If you use a button to implement it, the button serves as a system composite control, and the outside is a View-> UIControl container,

Including UILabel and UIImage, as well as some typographical rules. With UIButton, it is difficult to implement some effects when switching between "like" and "cancel like.

However, we need a UIButton-like event response mechanism.

What should I do?

Yes! Is to use UIControl.

UIControl has two outstanding advantages:

1. As the parent control of UIButton, it has the same event response mechanism as UIButton.

2. As a simple sub-Control of UIView, it has the potential to act as a container View

Design Concept: implement a custom control and inherit from UIControl. It contains some views. What views are determined by your needs. Mine is two images. Then, the two images are switched during the event response. You can customize the animation switch. In this way, a thumbs-up button with a great degree of freedom for switching results is implemented!

The reference code is as follows:

#import 
 
  typedef NS_ENUM(NSInteger, UIControlFlagMode) {    FlagModelNO,    FlagModelYES,    FlagModelDefalt};@interface UIControlFlagView : UIControl@property (nonatomic, strong) UIImage*noStateImg;@property (nonatomic, strong) UIImage*yesStateImg;@property (nonatomic, strong) UIImage*defaultStateImg;@property (nonatomic, assign) UIControlFlagMode flag;- (void)setFlag:(UIControlFlagMode)flag withAnimation:(BOOL)animation;@end
 

M file:

#import "UIControlFlagView.h"@interface UIControlFlagView()@property (nonatomic, strong) UIImageView*noStateImgV;@property (nonatomic, strong) UIImageView*yesStateImgV;@property (nonatomic, strong) UIImageView*defaultStateImgV;@end@implementation UIControlFlagView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        // Initialization code    }    return self;}- (void)setNoStateImg:(UIImage *)noStateImg{    if (!self.noStateImgV)    {        self.noStateImgV = [[UIImageView alloc] initWithFrame:self.bounds];        self.noStateImgV.contentMode = UIViewContentModeCenter;        [self addSubview:self.noStateImgV];        self.flag = FlagModelNO;//default style    }    self.noStateImgV.image = noStateImg;    _noStateImg = noStateImg;}- (void)setYesStateImg:(UIImage *)yesStateImg{    if (!self.yesStateImgV)    {        self.yesStateImgV = [[UIImageView alloc] initWithFrame:self.bounds];        self.yesStateImgV.contentMode = UIViewContentModeCenter;        [self addSubview:self.yesStateImgV];        self.yesStateImgV.alpha = 0.0;    }     self.yesStateImgV.image = yesStateImg;    _yesStateImg = yesStateImg;}- (void)setDefaultStateImg:(UIImage *)defaultStateImg{    if (!self.defaultStateImgV)    {        self.defaultStateImgV = [[UIImageView alloc] initWithFrame:self.bounds];        self.defaultStateImgV.contentMode = UIViewContentModeCenter;        [self addSubview:self.defaultStateImgV];    }    self.defaultStateImgV.image = defaultStateImg;    _defaultStateImg = defaultStateImg;}- (void)setFlag:(UIControlFlagMode)flag withAnimation:(BOOL)animation{           if (animation)    {       //no-->yes        if (_flag == FlagModelNO && flag == FlagModelYES)        {          self.yesStateImgV.transform = CGAffineTransformMakeScale(0.1f, 0.1f);                      [UIView animateWithDuration:0.3 animations:^{                           self.noStateImgV.alpha = 0.0;              self.yesStateImgV.alpha = 1.0;              self.yesStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);              self.noStateImgV.transform = CGAffineTransformMakeScale(2.0f, 2.0f);                        }        completion:^(BOOL finished)        {              self.yesStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);              self.noStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);          }];                    }        //yes-->no        else if(_flag == FlagModelYES && flag == FlagModelNO)        {            self.noStateImgV.transform = CGAffineTransformMakeScale(0.1f, 0.1f);                        [UIView animateWithDuration:0.3 animations:^{                                self.noStateImgV.alpha = 1.0;                self.yesStateImgV.alpha = 0.0;                self.yesStateImgV.transform = CGAffineTransformMakeScale(2.0f, 2.0f);                self.noStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);                            }              completion:^(BOOL finished)             {                 self.yesStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);                 self.noStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);             }];        }            }    else    {        //no-->yes        if (_flag == FlagModelNO && flag == FlagModelYES)        {                self.noStateImgV.alpha = 0.0;                self.yesStateImgV.alpha = 1.0;                self.yesStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);                self.noStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);        }        //yes-->no        else if(_flag == FlagModelYES && flag == FlagModelNO)        {            self.noStateImgV.alpha = 1.0;            self.yesStateImgV.alpha = 0.0;            self.yesStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);            self.noStateImgV.transform = CGAffineTransformMakeScale(1.0f, 1.0f);        }    }         _flag = flag;}@end

This is a simple implementation, the biggest advantage, and the purpose of this article is to customize the switching effect and the degree of freedom!

I hope everyone can make a combination of the likes they want!