当前位置： 移动技术网 > 移动技术>移动开发>IOS > 基于UIControl控件实现ios点赞功能

基于UIControl控件实现ios点赞功能

2019年07月24日  | 移动技术网移动技术  | 我要评论

在开发当中，可能很多时候都需要做个点赞的需求，如果用按钮实现，按钮作为一个系统复合控件，外部是一个 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

这是一个简单的实现，最大的优势，也是这篇文章的目的，就是在切换效果上的自定义和自由度！
抛砖引玉，希望大家都能做出复合自己心中所想的点赞按钮！

希望大家对本文所述感兴趣。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网