返回顶部
首页 > 资讯 > 移动开发 >基于UIControl控件实现ios点赞功能
  • 674
分享到

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

ios点赞 2022-05-27 09:05:09 674人浏览 八月长安
摘要

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

开发当中,可能很多时候都需要做个点赞的需求,如果用按钮实现,按钮作为一个系统复合控件,外部是一个 View--》UIControl的容器,内部包含了UILabel和UIImage,以及一些排版规则。用UIButton就很难去做一些在“赞”和“取消赞”切换时的效果。 可是我们又很需要UIButton似的事件响应机制。

怎么办?

对! 就是使用UIControl。

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

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

作为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

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

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

--结束END--

本文标题: 基于UIControl控件实现ios点赞功能

本文链接: https://lsjlt.com/news/30125.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 基于UIControl控件实现ios点赞功能
    在开发当中,可能很多时候都需要做个点赞的需求,如果用按钮实现,按钮作为一个系统复合控件,外部是一个 View--》UIControl的容器,内部包含了UILabel和UIImage,...
    99+
    2022-05-27
    ios 点赞
  • iOS实现抖音点赞功能
    目录前言实现原理三角形的贝塞尔曲线原理代码实现创建 CAShapeLayer创建初始位置的贝塞尔path结束前言 很多人肯定都是玩过抖音的吧,那也肯定为了某位美女或者帅哥偷偷作死的点...
    99+
    2024-04-02
  • java实现点赞功能
    本文实例为大家分享了java实现点赞功能的具体代码,供大家参考,具体内容如下 实现思路: 将点赞的数据先保存到redis中,然后定时同步到数据库 第一步: 在redis中创建二个ha...
    99+
    2024-04-02
  • 基于redis实现的点赞功能设计思路详解
    前言 点赞其实是一个很有意思的功能。基本的设计思路有大致两种, 一种自然是用mysql等 数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq...
    99+
    2022-06-04
    详解 思路 功能设计
  • Redis中怎么实现点赞、取消点赞功能
    Redis中怎么实现点赞、取消点赞功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、Redis 缓存设计及实现1.1 Redis 安装及运...
    99+
    2024-04-02
  • SpringBoot实现物品点赞功能
    前后端分离项目–二手交易平台小程序 SpringBoot----物品收藏功能实现 SpringBoot----评论回复功能实现(数据库设计) SpringBoot----文件(图片)...
    99+
    2024-04-02
  • java实现简单点赞功能
    本文实例为大家分享了java实现简单点赞功能的具体代码,供大家参考,具体内容如下 需求分析 分析: 1.必须先登录,否则提示2.第一次点赞(顶),点赞操作,点赞数+1,提示顶成功3...
    99+
    2024-04-02
  • vue实现静态页面点赞和取消点赞功能
    本文实例为大家分享了vue实现静态页面点赞和取消点赞的具体代码,供大家参考,具体内容如下 效果如下: 点击之后 点赞数量+1,红心亮再次点击,点赞数量-1,红心灭 逻辑: 由于列...
    99+
    2024-04-02
  • Android中Listview点赞功能的实现
    最近这段时间一直在看Android,利用Listview去实现点赞功能,下面给大家介绍下基本思路。 基本思路: 进入界面–》获取数据–》 在Listview中显示–》 通过...
    99+
    2022-06-06
    listview Android
  • Android PraiseTextView实现朋友圈点赞功能
    PraiseTextView 说明 我是将朋友圈分成了几个独立模块单独自定义的View,通过回调完成交互,耦合性算是非常低了,主要有以下及部分: 1.评论布局(自定义TextV...
    99+
    2022-06-06
    朋友圈 Android
  • JavaScript如何实现评论点赞功能
    这篇文章主要为大家展示了“JavaScript如何实现评论点赞功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现评论点赞功能”这篇文...
    99+
    2024-04-02
  • php如何实现点赞取消功能
    本篇内容介绍了“php如何实现点赞取消功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php实现点赞取消功能的方法:首先判断用户是否点赞;...
    99+
    2023-06-20
  • 怎么利用Redis实现点赞功能
    这篇文章主要介绍“怎么利用Redis实现点赞功能”,在日常操作中,相信很多人在怎么利用Redis实现点赞功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么利用Redis实现点赞功能”的疑惑有所帮助!接下来...
    99+
    2023-07-02
  • vue怎么实现静态页面点赞和取消点赞功能
    本文小编为大家详细介绍“vue怎么实现静态页面点赞和取消点赞功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现静态页面点赞和取消点赞功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果如下:点击...
    99+
    2023-06-29
  • iOS基于 UILabel实现文字添加描边功能
    可以达到文字描一圈黑边的效果: 继承UILabel以后重载drawTextInRect: - (void)drawTextInRect:(CGRect)rect { C...
    99+
    2022-05-20
    ios uilabel 文字 描边
  • Spring Cloud中怎么使用Redis实现点赞和取消点赞功能
    Spring Cloud中怎么使用Redis实现点赞和取消点赞功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、Redis 缓存设计及实现...
    99+
    2024-04-02
  • vue实现文章点赞和差评功能
    本文实例为大家分享了vue实现文章点赞和差评功能的具体代码,供大家参考,具体内容如下 纯前端实现文章点赞与差评(支持与不支持)。 需求:状态1:用户没有操作过,即既没点赞和差评;状态...
    99+
    2024-04-02
  • Springboot+ElementUi实现评论、回复、点赞功能
    目录1.概述2.前端代码1.html2.css3.js4.api调用后台接口3.后端代码1.数据库SQL2.实体类3.daoMapper4.daoMapper实现5.service接...
    99+
    2024-04-02
  • Ajax实现phpcms点赞功能的示例方法
    这篇文章给大家分享的是有关Ajax实现phpcms点赞功能的示例方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先 是将后台中 模块--->新闻心情--->心情配置  去掉多余的剩一个,...
    99+
    2023-06-08
  • 非常全面的Java SpringBoot点赞功能实现
    目录前言解决方案青铜版白银版黄金版源码总结前言 最近公司在做一个NFT商城的项目,大致就是一个只买卖数字产品的平台,项目中有个需求是用户可以给商品点赞,还需要获取商品的点赞总数,类似...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作