iOS实现高性能简单易用的星星评分控件

前言

做为老司机的你们有没有遇到过这样的需求?每个商品或者商家的item都有个星级或者其他评分,大概像以下的效果图

实现方案:

  • 大神自己写个通用空间(在时间充足的情况下)
  • 网上找个比较好的第三方 (时间比较紧凑的情况下)
  • 更直接的,自己直接放几个ImageView或者Layer

思考:功能是实现了,但是性能好像有点受影响。具体原因要看第三方框架的实现原理,当然了也有做的很好的。我是个性能控,当我拿到这个需求的时候,也尝试用一些第三方,但结果不尽人意。最后XWStarView就此产生了。

XWStarView(高性能星星控件)

推荐理由:

  • 简单易用
  • 高性能,采用yyLabel异步绘制
  • 支持自定义星星样式,间距

局限性:

  • 目前只支持半星,一星评分
  • 目前只支持图片
  • 依赖YYLabel

XWStarMaker(外观配置)

开发者可以配置间距,最大值,默认图片,选中图片

@interface XWStarMaker : NSObject
@property (nonatomic, assign) CGFloat space;
@property (nonatomic, strong) NSString *defaultImage;
@property (nonatomic, strong) NSString *selectImage;
@property (nonatomic,assign) NSInteger maxValue;
@end

XWStarView.m(核心代码)

眼尖的同学已经看到了,XWStarView直接继承了YYLabel,熟悉YYLaebl的开发者可能知道我要干嘛了。

#import "YYLabel.h"
#import "XWStarMaker.h"
@class XWStarView;
@protocol XWStarViewDelegate <NSObject>
@optional
-(void)xw_starView:(XWStarView*)tagView star:(NSInteger)star;
@end
@interface XWStarView : YYLabel
@property (nonatomic, assign) NSInteger score;
@property (nonatomic,weak) id<XWStarViewDelegate> delegate;
-(instancetype)initWithFrame:(CGRect)frame maker:(void (^)(XWStarMaker *))makeBlock;
@end

具体的实现细节看.m文件

@interface XWStarView ()
@property (nonatomic,strong) XWStarMaker *maker;
@end
@implementation XWStarView
-(instancetype)initWithFrame:(CGRect)frame maker:(void (^)(XWStarMaker *))makeBlock{
 if (self = [super initWithFrame:frame]) {
   self.maker = [[XWStarMaker alloc] init];
  if (makeBlock) {
   makeBlock(self.maker);
  }
  self.displaysAsynchronously = YES;
  self.fadeOnAsynchronouslyDisplay = NO;
  [self creatScoreAttr];
 }
 return self;
}
#pragma mark - private
-(void)creatScoreAttr{
 NSMutableAttributedString *text = [NSMutableAttributedString new];
 UIFont *font = [UIFont systemFontOfSize:0];
 for (int i = 0; i < self.maker.maxValue; i++) {
  UIImage *image = [UIImage imageNamed:self.maker.defaultImage];
  NSMutableAttributedString *attachText = [NSMutableAttributedString yy_attachmentStringWithContent:image contentMode:UIViewContentModeLeft attachmentSize:CGSizeMake(image.size.width + self.maker.space, image.size.height) alignToFont:font alignment:YYTextVerticalAlignmentCenter];
//添加点击事件
  __weak typeof(&*self) weakSelf = self;
  [attachText yy_setTextHighlightRange:NSMakeRange(0, 1) color:nil backgroundColor:nil tapAction:^(UIView *containerView, NSAttributedString *text, NSRange range, CGRect rect){
   if (weakSelf.delegate && [weakSelf.delegate respondsToSelector:@selector(xw_starView:star:)]) {
    [weakSelf.delegate xw_starView:weakSelf star:i];
   }
  }];
  [text appendAttributedString:attachText];
 }
 self.attributedText = text;
}

-(void)setScore:(NSInteger)score{
 if (_score == score)
 {
  return;
 }
 _score = score;
 //获取图片资源
 NSArray *attachments = self.textLayout.attachments;
 for (int i = 0; i < attachments.count; i++) {
  YYTextAttachment *attachment = attachments[i];
  attachment.content = [UIImage imageNamed:i <= _score ? self.maker.selectImage : self.maker.defaultImage];
 }

}
@end

只要你是个iOS程序员大概都看得懂代码吧。实现很简单,但是效果却不一般,特别在复杂列表使用的时候很明显。

XWStarView使用

 _scoreView = [[XWStarView alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 40, self.frame.size.width, 40) maker:^(XWStarMaker *maker){
   maker.defaultImage = @"goods_score_empt.png";
   maker.selectImage = @"goods_score_full.png";
   maker.space = 10;
  }];
  _scoreView.delegate = self;

XWStarView是YYLabel的爱好者不错的选择哦,如果满足你的业务需求,性能方面会让你很满意的,不信你就试试(哈哈,调皮了)。当然了萝卜青菜各有所爱,不喜勿喷。

总结

程序员的快乐应该是每天不断的学习,不断的发现新东西,让自己不被抛弃,至少我是那么认为的(嘻嘻),你呢?

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

您可能感兴趣的文章:

  • iOS评分(评价)星星图打分功能
  • iOS中在APP内加入AppStore评分功能的实现方法
  • iOS如何跳转到App Store下载评分页面示例代码
  • iOS实现支持小数的星星评分组件实例代码
(0)

相关推荐

  • iOS如何跳转到App Store下载评分页面示例代码

    前言 目前很多应用是要求点击事件直接跳转到App Store,最近工作中就遇到了一个跳转 App Store 评分或者下载更新的功能,网上查到很多跳转方法,这里记录一下,下面话不多说了,来一起看看详细的介绍吧. 主要跳转方法有两种 使用官方 StoreKit.framework 框架 应用间跳转直接跳到 App Store 应用,并携带自己 App 的 AppID. 使用官方框架 苹果提供了StoreKit.framework框架,工程中可以导入这个框架的主头文件 #import <StoreK

  • iOS实现支持小数的星星评分组件实例代码

    前言 评分功能是我们大家都不陌生的一个功能,现在在很多电商,外卖,餐饮型应用里随处可见,都会在商品结束后评价中有一个星星组件.核心思路就是用UIControl并自定义实现其中的trackTouch的几个方法.而显示不到一个的星星,比如半个星星的思路是根据分数切割星星的图像并显示其中一部分. 实现后效果如下: 单个星星的实现 对于单个星星的实现,先考虑星星有三个状态,完全置灰状态,完全高亮状态,根据百分比半高亮状态.而我这边用的是UIButton来实现,因为UIButton本身已经有普通,高亮,选

  • iOS评分(评价)星星图打分功能

    下载地址:https://github.com/littleSunZheng/StarGradeView 起因:项目中往往涉及到用户的评分反馈,在我的"E中医"项目中,涉及到几处.对此我参考了美团和滴滴的评分图. 评分视图分为展示和评分两种: (1)多数情况下"评分功能"是要简介易用的.那种 星星准确显示百分比(分数)的功能反而不好用,这种多数用在显示评分上,不需要用户去点击,因为用户想评价"9.8分",手指头是不能准确点击的.但是显示的时候你根

  • iOS中在APP内加入AppStore评分功能的实现方法

    iOS应用内部实现App Store评分功能,笔着整理总结有三种方式,各位可根据自己需求自己选择.先介绍下评分功能实现的三种方式. 1,通用方式通过App内部打开网页形式,跳转到AppStore编辑评论,可评分,可评论. 优点:方便,快捷,不受系统版本限制,目前最常用的方式. 缺点:内部网页形式加载缓慢,等待时间长,加载失败概率大. 2,iOS 6.0以后 在app内部加载AppStore 展示app信息 优点:展示速度比方法三块快 缺点:不能直接跳转到评论编辑页面,需要手动点击评论+编辑评论

  • iOS实现高性能简单易用的星星评分控件

    前言 做为老司机的你们有没有遇到过这样的需求?每个商品或者商家的item都有个星级或者其他评分,大概像以下的效果图 实现方案: 大神自己写个通用空间(在时间充足的情况下) 网上找个比较好的第三方 (时间比较紧凑的情况下) 更直接的,自己直接放几个ImageView或者Layer 思考:功能是实现了,但是性能好像有点受影响.具体原因要看第三方框架的实现原理,当然了也有做的很好的.我是个性能控,当我拿到这个需求的时候,也尝试用一些第三方,但结果不尽人意.最后XWStarView就此产生了. XWSt

  • Android开发之自定义星星评分控件RatingBar用法示例

    本文实例讲述了Android开发之自定义星星评分控件RatingBar用法.分享给大家供大家参考,具体如下: 星级评分条RatingBar类似于SeekBar.ProgressBar'等等都可以自定义样式 它的主要用途就比如淘宝.景点 满意度等 这里给出两种自定义效果 如图所示 第一种是通过RatingBar获得分数 第二个是通过RatingBar动态调节控件属性(透明度) 由于RatngBar使用简单 自定义样式方法和 https://www.jb51.net/article/158338.h

  • Android自定义星星评分控件

    下面为控件的实现历程: 此控件高效,直接使用ondraw绘制,先亮照: 由于Android自身的星星评分控件样式可以改,但是他的大小不好调整的缺点,只能用small normal这样的style调整,自定义不强,因此击发了我自定义星星控件的欲望. 星星评分控件的设计,大体规划为: 需要两张图片,一颗亮星星,一颗空星星:(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样. 星星控件大体分为

  • Android自定义View仿大众点评星星评分控件

    本文实例为大家分享了Android仿大众点评星星评分控件的具体代码,供大家参考,具体内容如下 话不多说,直接上代码,这里采用的是自定View public class RatingBar extends View { // 正常.半个和选中的星星 private Bitmap mStarNormal, mStarHalf, mStarSelected; //星星的总数 private int mStartTotalNumber = 5; //选中的星星个数 private float mSele

  • Android RatingBar星星评分控件实例代码

    效果图: 直接上代码: xml文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http:

  • Android自定义星星可滑动评分控件

    本文实例为大家分享了Android自定义星星可滑动评分控件的具体方法,供大家参考,具体内容如下 此控件通过线性布局结合ImageView来实现. 具有展示分数,滑动评分功能,可设置0-10分,自行设置星星图片,是否可点击与滑动,星星间距. 效果如下: 需准备好下面三张图片 先看自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name

  • Android编程基础之简单Button事件响应综合提示控件Toast应用示例

    本文实例讲述了Android简单Button事件响应综合提示控件Toast应用.分享给大家供大家参考,具体如下: 前面讲述了在main.xml里定义了Button对象,这里我们来学习Button如何实现事件响应. Button按钮所触发的事件处理,我们称之为Event Handle,只不过在Android当中,按钮事件是由系统的Button.OnClickListener所控制,熟悉Java程序设计的读者对OnXxxListener应该不陌生.以下的Demo,我们将实现当点击Button时,Te

  • iOS开发中使用Quartz2D绘图及自定义UIImageView控件

    绘制基本图形 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上. Quartz2D提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Grap

  • iOS应用UI开发中的字体和按钮控件使用指南

    UILabel的使用 一.初始化 复制代码 代码如下: UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 40, 120, 44)];      [self.view addSubview:myLabel]; 二.设置文字 ①.设置默认文本 复制代码 代码如下: NSString *text = @"标签文本"; myLabel.text = text; 效果: ②.设置标签文本(此属性是iOS6.0之后才

  • iOS中UIScrollerView的用法及基于AotoLayout的控件悬停

    UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容.Scroll View为你处理缩小放大手势,UIScrollView实现了这些手势,并且替你处理对于它们的探测和回应.其中需要注意的子类是UITableView以及UITextView(用来显示大量的文字).还有一个UIWebView,尽管那不是UIScrollView的直接子类,它适用UIScrollView去显示网页内容contentsize是内容的宽和高,contentsize.width是内容的宽度,cont

随机推荐