美文网首页
iOS自定义星星评分

iOS自定义星星评分

作者: Sh1mmer | 来源:发表于2019-07-16 10:55 被阅读0次

一个使用星星评分的控件 (星星的图片在最后面)
StarRatingView.h

#import <UIKit/UIKit.h>

/**
 协议方法
 */
@protocol StarRatingDelegate <NSObject>

- (void)sendGrade:(NSString *)grade;

@end

typedef void(^returnGrade)(NSString *grade);

/**
 star的位置默认为居中显示
 */
@interface StarRatingView : UIView
/// @brief 传递评星分数协议方法
@property(nonatomic, weak)id<StarRatingDelegate>delegate;
/// @brief 是否需要半颗星(默认需要)
@property(nonatomic, assign)BOOL isNeedHalf;
/// @brief 评分图片的宽和高(默认总宽度/5)
@property(nonatomic, assign)CGFloat imageWidth;
/// @brief 评分图片的宽和高(默认与self的高度一样)
@property(nonatomic, assign)CGFloat imageHeight;
/// @brief 图片数量(默认是5)
@property(nonatomic, assign)NSInteger imageCount;
/// @brief block 回调
@property returnGrade returnGrade;
@end

StarRatingView.m


#import "StarRatingView.h"

@implementation StarRatingView

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (instancetype)initWithFrame:(CGRect)frame{
    
    self = [super initWithFrame:frame];
    if (self) {
        self.imageWidth = frame.size.width/5;
        self.imageHeight = frame.size.height;
        self.imageCount = 5;
        self.isNeedHalf = YES;
    }
    
    return self;
}


- (void)layoutSubviews{
    
    for (NSInteger i = 0; i < self.imageCount; i++) {
        UIImageView *imageView = [[UIImageView alloc]init];
        imageView.image = [UIImage imageNamed:@"star1"];
        imageView.tag = 1000+i;
        imageView.frame = CGRectMake(self.frame.size.width/2-(self.imageCount/2.0-i)*self.imageWidth, self.frame.size.height/2-self.imageHeight/2, self.imageWidth, self.imageHeight);
        [self addSubview:imageView];
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    [self getStarGradeForTouches:touches];
} 

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    if (self.returnGrade) {
        self.returnGrade([NSString stringWithFormat:@"%ld",[self getStarGradeForTouches:touches]]);
    }
}

- (NSInteger)getStarGradeForTouches:(NSSet *)touches{
    //随着手的移动,移动到相应的位置
    //获取触摸对象
    UITouch *touch = [touches anyObject];
    //获取移动之后的坐标变化
    CGPoint newPoint = [touch locationInView:self];
    //计算第一个star的起始位置
    newPoint = CGPointMake(newPoint.x-[self viewWithTag:1000].frame.origin.x, newPoint.y);
    //以star的宽度一半作为单位
    //计算当前滑动位置所在star的位置(+1是因为要从1开始)
    NSInteger temp = newPoint.x / (self.imageWidth/2)+1;
    //已经划过的变为实心star
    for (NSInteger i = 0; i < (temp)/2; i++) {
        UIImageView *image = (UIImageView *)[self viewWithTag:1000+i];
        image.image = [UIImage imageNamed:@"star3"];
    }
    //判断最后停留位置
    if (temp%2 == 1) {
        UIImageView *image = (UIImageView *)[self viewWithTag:1000+temp/2];
        //判断是否是半xstar
        if (!self.isNeedHalf) {
            image.image = [UIImage imageNamed:@"star3"];
        }else{
            image.image = [UIImage imageNamed:@"star2"];
        }
    }
    //将剩下的变为空心star
    for (NSInteger i = (temp+1)/2; i < self.imageCount; i++) {
        UIImageView *image = (UIImageView *)[self viewWithTag:1000+i];
        image.image = [UIImage imageNamed:@"star1"];
    }
    //
    if (temp < 0) {
        temp = 0;
    }else if (temp > self.imageCount*2){
        temp =  self.imageCount*2;
    }
    //不需要半星star时如果点在半星上+1/2结果是一样的(4/2,5/2 都等于2)
    if (!self.isNeedHalf) {
        temp =(temp +1);
        temp /=2;
    }
  
  return temp;
} 
@end

使用方法(默认是5颗星,星星的宽度是控件的5/1,高度与控件一样)

StarRatingView *tempAtar = [[StarRatingView alloc]initWithFrame:CGRectMake(50, 100, 300,44)];
//    tempAtar.backgroundColor = [UIColor blackColor];
//    tempAtar.imageWidth = 48.0;
//    tempAtar.imageHeight = 22;
//    tempAtar.imageCount = 6;
//    tempAtar.isNeedHalf = NO;
//    tempAtar.delegate = self;
//    tempAtar.frame = CGRectMake(100, 100, tempAtar.imageWidth*5,tempAtar.imageHeight);
    [self.view addSubview:tempAtar];
    tempAtar.returnGrade = ^(NSString *grade) {
        NSLog(@"%@",grade);
    };
star1@2x.png star1@3x.png star2@2x.png star2@3x.png star3@2x.png star3@3x.png

相关文章

  • iOS自定义星星评分

    一个使用星星评分的控件 (星星的图片在最后面)StarRatingView.h StarRatingView.m ...

  • iOS 星星评分控件

    简单的自用星星控件,有空再加上手势 星星的间距取的是星星的宽度的五分之一,view的宽度等于五个星星加上四个空隙 ...

  • LBStarView 星星iOS评分

    效果图 Github : https://github.com/LeonLeeboy/LBStarView 只需要...

  • 评分功能

    iOS系统中没有自带的星星评分功能,需要自己封装。星星评分功能是整个工程的一个需求,但是代码的封装则是一个代码功底...

  • iOS评分星星允许半颗

    你的喜欢是我的坚持的动力! .m如下 .h如下 如何使用呢?一句话

  • iOS之星星评分(一)

    今天我们说的第一种评分,是不可以点击评分的。 也就是说星星点亮的多少不是我们手动点击的,而是服务器返回一个数字,然...

  • iOS之星星评分(二)

    首先我们创建一个基于UIView的类,就叫YYStarView吧。在YYStarView.h文件中我们写下如下代码...

  • iOS - 仿淘宝星星评分

    前言: 最近项目中做商城,涉及到订单评价,评分的问题,网上参考了别人的一些资料,然后封装了一套可以实现评分功能的方...

  • ios-提示星星评分

  • 自定义星星评分控件续集

    前一篇文章写了评分控件,说好要补上半颗星的,其实早就补上了,只不过最近在忙找工作的事,没来得及写而已 其实主要只是...

网友评论

      本文标题:iOS自定义星星评分

      本文链接:https://www.haomeiwen.com/subject/jdhokctx.html