iOS一个用于星星评价展示的视图(类似淘宝饿了吗等星星评价)

选择的废话不多说先上图

Demo效果图

GitHub地址：成品使用或者查看完整代码

• 简单的结构

自定义一个StarEvaluationView即可

• 直接使用

//一步初始化同时带上点击回调，参数是本次的星星数量，目的是评价完毕可以做一些操作

self.tggStarEvaView = [TggStarEvaluationView evaluationViewWithChooseStarBlock:^(NSUInteger count) {
NSLog(@"\n\n给了铁哥哥：%ld星好评！！!\n\n",count);
}];
self.tggStarEvaView.frame= (CGRect){self.view.frame.size.width/ 2 - 23 * 5,320,23 * 10,45};
[self.viewaddSubview:self.tggStarEvaView];

// 直接设置展示的星星数量，目的是为了直接用作Get数据的时候直接展示之前的评价星星数量，可以配合关闭视图交互来用作展示

self.tggStarEvaView.starCount = 3;

// 星星之间的间距，默认0.5，大小为：0～1，超过1则置为1，例如spaceing ＝ 0.1则间隙为星星的宽度的0.1倍，整个View宽度不变，间距变小，星星宽度变大

self.tggStarEvaView.spacing = 0.1;

// 星星的点击使能,默认YES，关闭配合展示时用

self.tggStarEvaView.tapEnabled = NO;

• 主要思路

1.实现展示UI
重写UIView的 - (void)drawRect:(CGRect)rect 方法在UIView上draw5个底部空白的星星，同时在通过当前的选择draw上当前数量的实心星星。
2.实现选择的用户交互
通过手势捕捉- (void)touchesEnded:(NSSet ＊)touches withEvent:(UIEvent ＊)event当前的选择的评价星星，到底当前是选择了几颗？给了几星的评价？

• 具体实现

1. 先翻转坐标系，然后通过上下文绘制图片

-(void)drawImage:(CGContextRef)context
CGImageRef:(CGImageRef)image
CGRect:(CGRect)rect {
CGContextSaveGState(context);
CGContextTranslateCTM(context, rect.origin.x, rect.origin.y);
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(context, rect, image);
CGContextRestoreGState(context);
}

2. for循环绘制所需图片

    for (NSInteger i = 0; i < 5; i ++) {
        UIImage *drawImage = i < self.index ? selImage : norImage;
        [self drawImage:context CGImageRef:drawImage.CGImage CGRect:CGRectMake((i == 0) ? spacing : 2 * i * spacing + spacing + starWidth * i, top, starWidth, starWidth)];
    }

3. 捕捉屏幕位置然后重刷图片

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    self.index = point.x / (self.frame.size.width / 5) + 1;
    if (self.index == 6) {
        self.index --;
    }
    [self setNeedsDisplay];
    if (self.evaluateViewChooseStarBlock) {
        self.evaluateViewChooseStarBlock(self.index);
    }
}

GitHub地址：具体细节查看完整代码