IOS-一步一步教你自訂評分星級條RatingBar

標籤：ios   控制項   ratingbar   星級評等條   

由於項目的需要，需要設計能評分、能顯示評分資料的星級評等條，但是IOS上好像沒有這個控制項，Android是有RatingBar這個控制項的（又發現一個IOS不如Android好的），那就只能自訂了，在網上也找了相關的例子，發現都是很老的版本了，非ARC版本的，而且不能評分成0分，還沒有indicator效果，於是我自己重新寫了一個控制項，命名為RatingBar

先上一張我們做之後的：

第一步：

寫一個繼承自UIView的RatingBar子控制項

第二步：

聲明一個RatingBar修改評分的代理，就是評分修改後把最新的評分告訴對方

第三步：

在.h檔案中聲明一些要暴漏給別人調用的方法

第四步：

在.m檔案中實現評分條

具體代碼如下：

RatingBar.h檔案代碼

//
//  RatingBar.h
//
//  Created by HailongHan on 15/1/1.
//  Copyright (c) 2015年 cubead. All rights reserved.
//

#import <UIKit/UIKit.h>

/**
 *  星級評等條代理
 */
@protocol RatingBarDelegate <NSObject>

/**
 *  評分改變
 *
 *  @param newRating 新的值
 */
- (void)ratingChanged:(float)newRating;

@end

@interface RatingBar : UIView

/**
 *  初始化設定未選中圖片、半選中圖片、全選中圖片，以及評分值改變的代理（可以用
 *  Block）實現
 *
 *  @param deselectedName   未選中圖片名稱
 *  @param halfSelectedName 半選中圖片名稱
 *  @param fullSelectedName 全選中圖片名稱
 *  @param delegate          代理
 */
- (void)setImageDeselected:(NSString *)deselectedName halfSelected:(NSString *)halfSelectedName fullSelected:(NSString *)fullSelectedName andDelegate:(id<RatingBarDelegate>)delegate;

/**
 *  設定評分值
 *
 *  @param rating 評分值
 */
- (void)displayRating:(float)rating;

/**
 *  擷取當前的評分值
 *
 *  @return 評分值
 */
- (float)rating;

/**
 *  是否是指標，如果是指標，就不能滑動了，只顯示結果，不是指標的話就能滑動修改值
 *  預設為NO
 */
@property (nonatomic,assign) BOOL isIndicator;

@end

代碼中注釋的很詳細了，這我就不多解釋了，看注釋吧，真看不懂，阿門，我也救不了你！廢話不多說，再貼RatingBar.m檔案代碼：

//  RatingBar.m
//
//  Created by HailongHan on 15/1/1.
//  Copyright (c) 2015年 cubead. All rights reserved.
//

#import "RatingBar.h"

@interface RatingBar (){
    float starRating;
    float lastRating;
    
    float height;
    float width;
    
    UIImage *unSelectedImage;
    UIImage *halfSelectedImage;
    UIImage *fullSelectedImage;
}

@property (nonatomic,strong) UIImageView *s1;
@property (nonatomic,strong) UIImageView *s2;
@property (nonatomic,strong) UIImageView *s3;
@property (nonatomic,strong) UIImageView *s4;
@property (nonatomic,strong) UIImageView *s5;

@property (nonatomic,weak) id<RatingBarDelegate> delegate;

@end

@implementation RatingBar

/**
 *  初始化設定未選中圖片、半選中圖片、全選中圖片，以及評分值改變的代理（可以用
 *  Block）實現
 *
 *  @param deselectedName   未選中圖片名稱
 *  @param halfSelectedName 半選中圖片名稱
 *  @param fullSelectedName 全選中圖片名稱
 *  @param delegate          代理
 */
-(void)setImageDeselected:(NSString *)deselectedName halfSelected:(NSString *)halfSelectedName fullSelected:(NSString *)fullSelectedName andDelegate:(id<RatingBarDelegate>)delegate{
        
    self.delegate = delegate;
    
    unSelectedImage = [UIImage imageNamed:deselectedName];
    halfSelectedImage = halfSelectedName == nil ? unSelectedImage : [UIImage imageNamed:halfSelectedName];
    fullSelectedImage = [UIImage imageNamed:fullSelectedName];
    
    height = 0.0,width = 0.0;
    
    if (height < [fullSelectedImage size].height) {
        height = [fullSelectedImage size].height;
    }
    if (height < [halfSelectedImage size].height) {
        height = [halfSelectedImage size].height;
    }
    if (height < [unSelectedImage size].height) {
        height = [unSelectedImage size].height;
    }
    if (width < [fullSelectedImage size].width) {
        width = [fullSelectedImage size].width;
    }
    if (width < [halfSelectedImage size].width) {
        width = [halfSelectedImage size].width;
    }
    if (width < [unSelectedImage size].width) {
        width = [unSelectedImage size].width;
    }
    
    starRating = 0.0;
    lastRating = 0.0;
    
    _s1 = [[UIImageView alloc] initWithImage:unSelectedImage];
    _s2 = [[UIImageView alloc] initWithImage:unSelectedImage];
    _s3 = [[UIImageView alloc] initWithImage:unSelectedImage];
    _s4 = [[UIImageView alloc] initWithImage:unSelectedImage];
    _s5 = [[UIImageView alloc] initWithImage:unSelectedImage];
    
    [_s1 setFrame:CGRectMake(0,         0, width, height)];
    [_s2 setFrame:CGRectMake(width,     0, width, height)];
    [_s3 setFrame:CGRectMake(2 * width, 0, width, height)];
    [_s4 setFrame:CGRectMake(3 * width, 0, width, height)];
    [_s5 setFrame:CGRectMake(4 * width, 0, width, height)];
    
    [_s1 setUserInteractionEnabled:NO];
    [_s2 setUserInteractionEnabled:NO];
    [_s3 setUserInteractionEnabled:NO];
    [_s4 setUserInteractionEnabled:NO];
    [_s5 setUserInteractionEnabled:NO];
    
    [self addSubview:_s1];
    [self addSubview:_s2];
    [self addSubview:_s3];
    [self addSubview:_s4];
    [self addSubview:_s5];
    
    CGRect frame = [self frame];
    frame.size.width = width * 5;
    frame.size.height = height;
    [self setFrame:frame];
    
}

/**
 *  設定評分值
 *
 *  @param rating 評分值
 */
-(void)displayRating:(float)rating{
    [_s1 setImage:unSelectedImage];
    [_s2 setImage:unSelectedImage];
    [_s3 setImage:unSelectedImage];
    [_s4 setImage:unSelectedImage];
    [_s5 setImage:unSelectedImage];
    
    if (rating >= 0.5) {
        [_s1 setImage:halfSelectedImage];
    }
    if (rating >= 1) {
        [_s1 setImage:fullSelectedImage];
    }
    if (rating >= 1.5) {
        [_s2 setImage:halfSelectedImage];
    }
    if (rating >= 2) {
        [_s2 setImage:fullSelectedImage];
    }
    if (rating >= 2.5) {
        [_s3 setImage:halfSelectedImage];
    }
    if (rating >= 3) {
        [_s3 setImage:fullSelectedImage];
    }
    if (rating >= 3.5) {
        [_s4 setImage:halfSelectedImage];
    }
    if (rating >= 4) {
        [_s4 setImage:fullSelectedImage];
    }
    if (rating >= 4.5) {
        [_s5 setImage:halfSelectedImage];
    }
    if (rating >= 5) {
        [_s5 setImage:fullSelectedImage];
    }
    
    starRating = rating;
    lastRating = rating;
    [_delegate ratingChanged:rating];
}

/**
 *  擷取當前的評分值
 *
 *  @return 評分值
 */
-(float)rating{
    return starRating;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    [super touchesBegan:touches withEvent:event];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    [super touchesEnded:touches withEvent:event];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    
    if (self.isIndicator) {
        return;
    }
    
    CGPoint point = [[touches anyObject] locationInView:self];
    int newRating = (int) (point.x / width) + 1;
    if (newRating > 5)
        return;
    
    if (point.x < 0) {
        newRating = 0;
    }
    
    if (newRating != lastRating){
        [self displayRating:newRating];
    }
}

@end

   將上面的.h和.m拷貝到項目中就可以直接用了，在viewController.m中調用代碼如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    RatingBar *ratingBar = [[RatingBar alloc] init];
    ratingBar.frame = CGRectMake(100, 100, 200, 50);
    
    [self.view addSubview:ratingBar];
    ratingBar.isIndicator = YES;//指標，就不能滑動了，只顯示評分結果
    [ratingBar setImageDeselected:@"ratingbar_unselected" halfSelected:nil fullSelected:@"ratingbar_selected" andDelegate:self];
}

好了，自訂控制項就結束了，謝謝大家！

IOS-一步一步教你自訂評分星級條RatingBar