关于ios中的点赞控件效果的实现--UIControl

来自： http://blog.csdn.net//likendsl/article/details/38730425

在开发当中，可能很多时候都需要做个点赞的需求，如果用按钮实现，按钮作为一个系统复合控件，外部是一个 View--》UIControl的容器，

内部包含了UILabel和UIImage，以及一些排版规则。用UIButton就很难去做一些在“赞”和“取消赞”切换时的效果。

可是我们又很需要UIButton似的事件响应机制。

怎么办？

对！ 就是使用UIControl。

UIControl在这里有两个突出的优势：

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

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

设计思路：实现一个自定义控件，继承UIControl，里面包含一些视图，包含什么视图由你的需求决定，我的是两张图片。 然后在事件响应时，两张图片进行切换。切换动画可以自定义。这样就实现了一个切换效果自由度很大的点赞按钮哦！

参考代码如下：

#import <UIKit/UIKit.h>    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文件：

#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

这是一个简单的实现，最大的优势，也是这篇文章的目的，就是在切换效果上的自定义和自由度！

抛砖引玉，希望大家都能做出复合自己心中所想的点赞按钮！