iOS-一个简单,功能强大的星级评分的小框架,类似淘宝评论时的打星

前几天做项目时需要用到一个星级评分的展示以及通过点选来评价的功能,所以就写了一个自定义的小框架来实现,废话不多说,直接进入正题:

先看如何使用与效果展示

Demo地址:https://github.com/WallaceYou/YYStarView
如果觉得有帮助到您,给颗星鼓励一下哦😊
如果您只想使用,而不想知道怎么实现的,那后面的就不需要看啦~


这里主要讲一下如何实现:

  • 在.h文件中先定义一些公开属性:
typedef NS_ENUM(NSUInteger, StarViewType) {
    StarViewTypeShow = 1,
    StarViewTypeSelect = 2,
};

@interface YYStarView : UIView

/** 亮色星图片名称,如果不设置,则使用默认图片 */
@property (nonatomic, copy) NSString *starBrightImageName;

/** 暗色星图片名称,如果不设置,则使用默认图片 */
@property (nonatomic, copy) NSString *starDarkImageName;

/** 星与星之间的间距,如果不设置,则默认为0 */
@property (nonatomic, assign) CGFloat starSpacing;

/** 每颗星的大小,如果不设置,则按照图片大小自适应 */
@property (nonatomic, assign) CGSize starSize;

/** 星的个数,如果不设置,则默认为5颗 */
@property (nonatomic, assign) NSInteger starCount;

/** starView的类型,如果不设置,默认为Select类型 */
@property (nonatomic, assign) StarViewType type;

/** 星级评分,如果不设置,默认为0颗星 */
@property (nonatomic, assign) CGFloat starScore;

/** 点击星回调的block */
@property (nonatomic, copy) void(^starClick)(void);

@end
  • .m文件中:

1、首先在初始化的时候创建所有子视图:

- (void)awakeFromNib {
    [super awakeFromNib];
    [self setUpSubviews];//创建所有子视图
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setUpSubviews];//创建所有子视图
    }
    return self;
}

2、创建好子视图后,默认全部是暗星:

- (void)setUpSubviews {
    
    if (self.starCount <= 0) {
        _starCount = 5;
    }
    
    for (int i = 0; i < self.starCount; i++) {
        UIButton *starBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [starBtn addTarget:self action:@selector(starBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:starBtn];
        [self.buttons addObject:starBtn];
    }
    
    self.starScore = 0;//默认设置显示亮星为0,即全部显示暗星
}

3、在设置starScore的时候,先做区间判断,如果小于0则等于0,大于星的个数时则等于星的个数,设置完后再设置图片:

- (void)setStarScore:(CGFloat)starScore {
    _starScore = floorf(starScore);//先向下取整
    if (starScore < 0) {
        _starScore = 0;
    }
    
    if (starScore > self.starCount) {
        _starScore = self.starCount;
    }
    
    [self setStarImage];//设置图片
}

4、设置图片,如果用户有设置,则用,没有,则用默认的,同时支持亮星与暗星的高亮图片的设置(只需将高亮图片的名字改为普通图片后面加"_highlighted"即可自动设置):

- (void)setStarImage {
    
    NSBundle *resourcesBundle = [NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"YYStarView" ofType:@"bundle"]];
    
    if (!self.starBrightImageName) {
        self.starBrightImageName = @"yy_star_bright";
    }

    if (!self.starDarkImageName) {
        self.starDarkImageName = @"yy_star_dark";
    }
    
    //1.首先准备星要显示的图片
    UIImage *starBrightImage = [UIImage imageNamed:self.starBrightImageName];
    UIImage *starDarkImage = [UIImage imageNamed:self.starDarkImageName];
    
    UIImage *starBrightHighlightedImage = [UIImage imageNamed:[self.starBrightImageName stringByAppendingString:@"_highlighed"]];
    UIImage *starDarkHighlightedImage = [UIImage imageNamed:[self.starDarkImageName stringByAppendingString:@"_highlighed"]];;
    
    if (starBrightImage == nil) {
        starBrightImage = [UIImage imageNamed:@"yy_star_bright" inBundle:resourcesBundle compatibleWithTraitCollection:nil];
        starBrightHighlightedImage = nil;
    }
    
    if (starDarkImage == nil) {
        starDarkImage = [UIImage imageNamed:@"yy_star_dark" inBundle:resourcesBundle compatibleWithTraitCollection:nil];
        starDarkHighlightedImage = nil;
    }
    
    for (int i = 0; i < self.buttons.count; i++) {
        
        UIButton *starBtn = [self.buttons objectAtIndex:i];
        
        //根据当前的score数来选择显示亮星还是暗星
        if (i < self.starScore) {
            [starBtn setBackgroundImage:starBrightImage forState:UIControlStateNormal];
            [starBtn setBackgroundImage:starBrightHighlightedImage forState:UIControlStateHighlighted];
        } else {
            [starBtn setBackgroundImage:starDarkImage forState:UIControlStateNormal];
            [starBtn setBackgroundImage:starDarkHighlightedImage forState:UIControlStateHighlighted];
        }
    }
}

5、在layoutSubviews中使用VFL布局,因为要做到不依赖其他框架,所以使用VFL布局:

- (void)layoutSubviews {
    [super layoutSubviews];
    
    //1.首先,先删除所有约束
    [self removeConstraints:self.constraints];
    
    //2.然后再添加新的约束
    //2.1.准备VFL中子视图与实际对象引用之间的关联关系的字典
    NSMutableDictionary *diction = [NSMutableDictionary new];
    
    //2.2.准备水平方向的VFL表达式
    NSMutableString *hVFL = [[NSMutableString alloc] initWithString:@"H:|"];
    //2.3.准备竖直方向的VFL表达式
    NSMutableString *vVFL = [[NSMutableString alloc] initWithString:@"V:|"];
    
    //2.3.创建一个VFL中的长度参照表
    NSDictionary *metrics = @{@"left":@0,@"right":@0,@"top":@0,@"bottom":@0,@"space":@(self.starSpacing)};
    
    for (int i = 0; i < self.buttons.count; i++) {
        
        UIButton *starBtn = [self.buttons objectAtIndex:i];
        
        //2.4.关掉自动翻译功能(必须关闭,否则VFL不生效)
        starBtn.translatesAutoresizingMaskIntoConstraints = NO;
        
        //2.5.设置关联关系的字典
        [diction setValue:starBtn forKey:[NSString stringWithFormat:@"button%i",i+1]];
        
        //2.6.设置VFL表达式
        
        CGFloat starWidth = self.starSize.width;
        CGFloat starHeight = self.starSize.height;
        
        if (i == 0) {
            
            if (starWidth > 0) {//如果有设置starSize,则按照starSize显示
                [hVFL appendFormat:@"-left-[button%i(%lf)]",i+1,starWidth];
            } else {//如果没有设置starSize,则按照图片大小自适应
                [hVFL appendFormat:@"-left-[button%i]",i+1];
            }
            
            if (starHeight > 0) {
                [vVFL appendFormat:@"-top-[button%i(%lf,",i+1,starHeight];
            } else {
                [vVFL appendFormat:@"-top-[button%i(",i+1];
            }
            
            if (self.buttons.count == 1) {//对于一颗星要做特殊处理
                
                [vVFL deleteCharactersInRange:NSMakeRange(vVFL.length-1, 1)];
                
                if (starWidth > 0) {
                    [vVFL appendFormat:@")"];
                }
                
                [hVFL appendFormat:@"-bottom-|"];
                [vVFL appendFormat:@"]-bottom-|"];
            }
            
        } else if (i == self.starCount-1) {
            [hVFL appendFormat:@"-space-[button%i(button1)]-right-|",i+1];
            [vVFL appendFormat:@"button%i)]-bottom-|",i+1];
        } else {
            [hVFL appendFormat:@"-space-[button%i(button1)]",i+1];
            [vVFL appendFormat:@"button%i,",i+1];
        }
        
    }
    
    //2.7. 创建约束对象
    NSArray *cs1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllCenterY metrics:metrics views:diction];
    
    //2.8.添加约束
    [self addConstraints:cs1];
    
    //创建竖直方向的约束
    NSArray *cs2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:0 metrics:metrics views:diction];
    
    //添加约束到父视图中
    [self addConstraints:cs2];
}

注:

将添加约束的操作写在layoutSubviews中,这样在重复赋值时,直接调用[self setNeedsLayout]就可以完成重新布局了,另外,补充几个小知识点:


layoutSubviews的调用时机:
  • 被addSubview一定会调用。
  • addSubview一定会调用。
  • 改变其frame大小,如果只改变x值,则不会调用,其余不管改变谁都会调用。
  • 改变其子视图的size大小。
  • 旋转屏幕。
  • 手动调用setNeedsLayout、layoutIfNeeded。

setNeedsLayout与layoutNeeded的区别:
  • setNeedsLayout :标记为需要重新布局,会异步调用layoutIfNeeded刷新布局,不会立即刷新,但layoutSubviews一定会被调用。
  • layoutIfNeeded:如果有需要刷新的标记,立即调用layoutSubViews刷新布局,如果没有标记,什么都不做。

6、知道这些以后剩下的就非常简单了,当外部设置了某个属性,就在这个属性的set方法中做该做的事情,比如说:

  • 如果图片换掉了就设置图片:
- (void)setStarBrightImageName:(NSString *)starBrightImageName {
    _starBrightImageName = starBrightImageName;
    [self setStarImage];
}

- (void)setStarDarkImageName:(NSString *)starDarkImageName {
    _starDarkImageName = starDarkImageName;
    [self setStarImage];
}
  • 如果间隙或星大小重新设置了,就重新布局一下:
- (void)setStarSpacing:(CGFloat)starSpacing {
    _starSpacing = starSpacing;
    [self setNeedsLayout];
}

- (void)setStarSize:(CGSize)starSize {
    _starSize = starSize;
    [self setNeedsLayout];
}
  • 这里需要注意的是如果星的个数重新设置了,仅仅重新布局是不行的,因为整体架构变了,需要重新创建子视图(按钮):
- (void)setStarCount:(NSInteger)starCount {
    _starCount = starCount;
    //将子视图全部移除
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    [self.buttons removeAllObjects];
    //重新创建
    [self setUpSubviews];
}

最后

第一次写文章,希望多多支持哈😊,如果可以,GitHub跪求一颗星~
以后有好的东西,想法,还是要写出来分享一下的,这样记忆才深刻,对人对己都有好处~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容