iOS上下文实现评价星星示例代码

常规思路:

创建两个 view,通过 for 循环创建 imageView,未点亮星星视图在下、点亮星星视图在上重合在一起,当用户点击视图时,通过改变点亮星星视图的 width 实现功能

本文思路:

直接重写 drawrect 方法,在 drawrect 用 drawimage 画出星星,根据 currentValue 画出不同类型的星星,当用户点击视图时,改变 currentValue,并根据改变后的 currentValue 重新画出星星。

展示图:

代码:

自定义一个继承 UIView 的 CYStarView

属性:

/** 完成后执行的block */
@property (copy, nonatomic) void(^completionBlock)(NSInteger);
/** 是否可以点击 */
@property (assign, nonatomic) BOOL clickable;
/** 星星个数 */
@property (assign, nonatomic) NSInteger numberOfStars;
/** 星星边长 */
@property (assign, nonatomic) CGFloat lengthOfSide;
/** 评价值 */
@property (assign, nonatomic) NSInteger currentValue;
/** 星星间隔 */
@property (assign, nonatomic) CGFloat spacing;

重写 setter 方法,在 setter 方法中调用 setNeedsDisplay,会执行 drawrect:

- (void)setLengthOfSide:(CGFloat)lengthOfSide {

  // 超过控件高度
  if (lengthOfSide > self.frame.size.height) {
    lengthOfSide = self.frame.size.height;
  }

  // 超过控件宽度
  if (lengthOfSide > self.frame.size.width / _numberOfStars) {
    lengthOfSide = self.frame.size.width / _numberOfStars;
  }

  _lengthOfSide = lengthOfSide;
  _spacing = (self.frame.size.width - lengthOfSide * _numberOfStars) / _numberOfStars;

  [self setNeedsDisplay];
}

在 drawrect 中画星星:

- (void)drawRect:(CGRect)rect {

  UIImage *lightImage = [UIImage imageNamed:@"star_light"];
  UIImage *darkImage = [UIImage imageNamed:@"star_dark"];

  // 获取当前上下文
  CGContextRef context = UIGraphicsGetCurrentContext();

  for (int i = 0; i < self.numberOfStars; i ++) {
    // 根据 currentValue 选择是画亮的还是暗的星星
    UIImage *image = i >= self.currentValue ? darkImage : lightImage;
    CGRect imageRect = CGRectMake(self.spacing / 2 + (self.lengthOfSide + self.spacing) * i, (self.frame.size.height - self.lengthOfSide) / 2, self.lengthOfSide, self.lengthOfSide);

    CGContextSaveGState(context);

    // 坐标系Y轴是相反的,进行翻转
    CGContextScaleCTM(context, 1.0, - 1.0);
    CGContextTranslateCTM(context, 0, - rect.origin.y * 2 - rect.size.height);

    CGContextDrawImage(context, imageRect, image.CGImage);
    CGContextRestoreGState(context);
  }
}

使用:

在要使用的控制器中:

#import "CYStarView.h"
// 初始化,传入必要参数
CYStarView *starView = [[CYStarView alloc] initWithFrame:frame numberOfStars:number lengthOfSide:length];
// 设置 clickable,评论界面设置为YES,展示界面设置为NO
self.starView.clickable = YES;
//
// 设置 completionBlock
self.starView.completionBlock = ^(NSInteger currentValue) {
  // 点击后的操作放这里
};

项目地址:点我点我!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

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

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

  • iOS上下文实现评价星星示例代码

    常规思路: 创建两个 view,通过 for 循环创建 imageView,未点亮星星视图在下.点亮星星视图在上重合在一起,当用户点击视图时,通过改变点亮星星视图的 width 实现功能 本文思路: 直接重写 drawrect 方法,在 drawrect 用 drawimage 画出星星,根据 currentValue 画出不同类型的星星,当用户点击视图时,改变 currentValue,并根据改变后的 currentValue 重新画出星星. 展示图: 代码: 自定义一个继承 UIView 的

  • java接收ios文件上传的示例代码

    本文实例为大家分享了java如何接收ios文件上传的具体代码,供大家参考,具体内容如下 ios Multipart/form-data POST请求java后台spring接口一直出错,搞了两天,终于解决了,积累下来 package com.xx.controller; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.Iterator

  • iOS中正则表达式的运用示例代码

    前言 有时我们需要在一大段长文本中过滤出我们需要的字段,或者检验该文本是否符合要求(该文本是否是邮箱,链接,电话号码或身份证),这时候就需要用到正则表达式了,iOS中也加入了相关的类来支持正则表达式的使用.本文详细介绍了关于iOS正则表达式运用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.NSRegularExpression 1. 正则表达式的创建 + (nullable NSRegularExpression *)regularExpressionWith

  • ios实现底部PopupWindow的示例代码(底部弹出菜单)

    前言 在Android中要实现底部弹出菜单很容易,有专门的PopupWindow类,我们只需要用xml订制好其内容View以及设置其弹出位置即可,非常容易.但是,在ios中就不能这么直接了,没有现成的东西,需要自己想办法来实现. 思路分析 反正最终一定要实现效果,那么内容View一定要解决掉,那么是在Interface Builder编辑实现还是直接用代码实现呢?答案是都可以,但为了方便和订制相对比较规范,建议用interface Builder编辑. 内容ok了,那么内容放在哪里?这是个核心问

  • iOS实现模拟定位功能的示例代码

    前言 App中越来越多的功能依赖用户实际的位置,例如基于用户位置提供推荐数据.基于定位判断某些功能是否可用,但是在开发调试中XCode却没有提供自定义的模拟定位的功能,所以本文主要的目的是现实一个可以在开发调试过程中随时模拟定位的功能. 思路 我们在iOS的app开发中通常采用的是CLLocationManager来获取用户当前的位置,当然也可以采用MKMapView的showUserLocation来获取用户的位置,所以我们分别针对这两种情况分析. CLLocationManager 采用CL

  • iOS 图片压缩方法的示例代码

    两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size). 压缩图片质量 NSData *data = UIImageJPEGRepresentation(image, compression); UIImage *resultImage = [UIImage imageWithData:data]; 通过 UIImage 和 NSData 的相互转化,减小 JPEG 图片的质量来压缩图片.UIImageJPEGRepresentation:: 第二个参数 compressi

  • iOS实现导航栏透明示例代码

    在最近一个项目中碰到这样一个场景,在被push进来的一个页面设置导航栏透明,且要求控制对tableview组的头视图进行悬停显示,nav随着tableview偏移量改变透明度,当然这样的需求确实不是什么难事,但是如果当前页面继续push一个不需要此类效果的页面,当在返回当前页面的时候就会出现一个坑,nav的展示很突兀,下面是直接上解决方法...ps:假设A页面为需要设置透明,B页面被Apush且不需要设置透明 首先在需要设置导航栏透明的页面的viewDidload中写上 self.title =

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

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

  • iOS如何为圆角添加阴影效果示例代码

    前言 大家都知道在iOS中为UIView添加阴影还是比较简单的,只需要设置layer的shadow属性就可以了,但是问题在于设置阴影之后,必须设置masksToBounds为NO,而圆角图片则要求masksToBounds必须为YES,两者相互冲突,会导致无法正确的添加阴影.下面就来给大家介绍正确为圆角添加阴影的效果,话不多说了,来一起看看详细的介绍吧. 先来看看效果图: 正确的做法: 先创建一个透明的UIView,并添加阴影,设置masksToBounds为NO: 然后在透明的UIView上添

随机推荐