製作原理:

1. 使用xib繪製5個星星(圖片檢視),一個動態顯示分數label
2. 計算出最大,小的X,和星星寬度,建立一個顯示總分數label
3. 主要是手勢觸控時當觸控開始時控制如何顯示星星,當移動時控制如何顯示星星,當觸控結束時,給定動態顯示的分數
4. 如何顯示星星:根據觸控點的X確定總分數,再讓根據總分數判斷呼叫顯示幾個星星的方法.

具體demo的程式碼實現:

xib圖:

#import <UIKit/UIKit.h>
@interface HHFStarView : UIView
+(instancetype) starView;
@end

//
//  HHFStarView.m
 

//  HHFStarDemo
//
//  Created by mac on 16/8/11.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "HHFStarView.h"
#import "UIViewExt.h"

#define kScreenHeight  CGRectGetHeight([UIScreen mainScreen].bounds)
#define kScreenWidth  CGRectGetWidth([UIScreen mainScreen].bounds)

/**
 *設定顏色的值
 */
#define RGBCOLOR(r,g,b,_alpha) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:_alpha]
 

@interface HHFStarView()
//5顆星星
@property (weak, nonatomic) IBOutlet UIImageView *firstStar;

@property (weak, nonatomic) IBOutlet UIImageView *secondStar;

@property (weak, nonatomic) IBOutlet UIImageView *threeStar;

@property (weak, nonatomic) IBOutlet UIImageView *fourthStar;

@property (weak, nonatomic
 
) IBOutlet UIImageView *fiveStar;
//顯示分數
@property (weak, nonatomic) IBOutlet UILabel *scoreLabel;
//動態顯示分數label
@property(nonnull,strong) UILabel *label;
//分數
@property(nonatomic,assign) NSInteger leveal;


@end
//最大的x值
static CGFloat maxX;
//最小的x值
static CGFloat minX;
//邊距
static const CGFloat margin = 8.0;
//星星的寬度
static CGFloat everyWidth;

@implementation HHFStarView
//類方法
+(instancetype) starView{


    HHFStarView *startView = [[[NSBundle mainBundle] loadNibNamed:@"HHFStarView" owner:self options:nil] lastObject];
    startView.frame = CGRectMake(0, kScreenHeight-200, kScreenWidth, 200);
    //初始化maxX,minX,everyWidth
    [startView initValues];

    //建立動態顯示分數的label
    [startView createUI];
    return startView;
}
//初始化maxX,minX,everyWidth
- (void) initValues {

    maxX = self.fiveStar.right + margin/2;
    minX = self.firstStar.left - margin/2;
    everyWidth = (self.firstStar.width + margin) / 2;

}
//建立動態顯示分數的label
- (void) createUI {
    _label = [[UILabel alloc] init];
    _label.bounds = CGRectMake(0, 0, 40, 20);
    _label.textAlignment = NSTextAlignmentCenter;
    _label.font = [UIFont systemFontOfSize:14];
    _label.textColor = [UIColor whiteColor];
    [self addSubview:_label];
}

//設定單個星星的圖片
- (UIImage *) setImagesWithName:(NSString *) imgName {

    NSString *path = [[NSBundle mainBundle] pathForResource:imgName ofType:nil];
    UIImage *image = [UIImage imageWithContentsOfFile:path];
    return image;
}
//手勢觸控,當觸控開始時控制如何顯示星星
- (void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self setImagesWithTouchs:touches];
}
//手勢觸控,當移動時控制如何顯示星星
- (void) touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self setImagesWithTouchs:touches];
}
//當觸控結束時,給定動態顯示的分數
- (void) touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    _label.text = [NSString stringWithFormat:@"%d分",(int)_leveal];
    //若_leveal的值是不為偶數就減1
    NSInteger n = _leveal;
    if (!(n%2)) {
        n --;
    }
    //動態分數label會隨著顯示幾個星星改變中心點
    _label.center = CGPointMake(n*everyWidth+minX, _fiveStar.top-20);
    _label.alpha = 1;
    [UIView animateWithDuration:1 animations:^{
        //動態消失
        _label.alpha = 0;
        //動態上升星星
        _label.center = CGPointMake(n*everyWidth+minX, _fiveStar.top-60);
    }];
}

- (void) setImagesWithTouchs:(NSSet *)touches {

    UITouch *touch = [touches anyObject];
    CGFloat touchX = [touch locationInView:self].x;
    CGFloat touchY = [touch locationInView:self].y;
    //固定觸控範圍,若以下兩個條件滿足就什麼也不做
    if (touchY < self.fiveStar.top - 10 || touchY > self.fiveStar.bottom +10) {
        return;
    }

    if (touchX < minX || touchX > maxX) {
        return;
    }
    //確定分數
    CGFloat dis = (touchX - minX) / everyWidth;

    [self setFiveKongImg];
    //分數
    _leveal = (NSInteger)dis + 1;


    if (dis >= 10.0) {
        _leveal = 10;
    }
    //根據分數,顯示幾個星星
    switch (_leveal) {
        case 1:
            [self setFistBanImg];
            break;
        case 2:
            [self setOneZhengImg];
            break;
        case 3:
            [self setSecondBanImg];
            break;
        case 4:
            [self setTwoZhengImg];
            break;
        case 5:
            [self setThreeBanImg];
            break;
        case 6:
            [self setThreeZhengImg];
            break;
        case 7:
            [self setFourthBanImg];
            break;
        case 8:
            [self setFourZhengImg];
            break;
        case 9:
            [self setFifthBanImg];
            break;
        case 10:
            [self setFiveZhengImg];
            break;

        default:
            break;
    }
    //顯示共幾分
    _scoreLabel.text = [NSString stringWithFormat:@"共%d分",(int)_leveal];
}
//設定原始5個空心星星
- (void) setFiveKongImg {

    _firstStar.image = [self setImagesWithName:@"[email protected]"];
    _secondStar.image = [self setImagesWithName:@"[email protected]"];
    _threeStar.image = [self setImagesWithName:@"[email protected]"];
    _fourthStar.image = [self setImagesWithName:@"[email protected]"];
    _fiveStar.image = [self setImagesWithName:@"[email protected]"];

}
//設定圓心星星
- (void) setOneZhengImg {

    _firstStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setTwoZhengImg {

    [self setOneZhengImg];
    _secondStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setThreeZhengImg {

    [self setTwoZhengImg];
    _threeStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setFourZhengImg {


    [self setThreeZhengImg];
    _fourthStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setFiveZhengImg {

    [self setFourZhengImg];
    _fiveStar.image = [self setImagesWithName:@"[email protected]"];
}
//設定圓心加空心的星星
- (void) setFistBanImg {

    _firstStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setSecondBanImg {

    [self setOneZhengImg];
    _secondStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setThreeBanImg {

    [self setTwoZhengImg];
    _threeStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setFourthBanImg {

    [self setThreeZhengImg];
    _fourthStar.image = [self setImagesWithName:@"[email protected]"];
}

- (void) setFifthBanImg {

    [self setFourZhengImg];
    _fiveStar.image = [self setImagesWithName:@"[email protected]"];
}
@end

#import "ViewController.h"
#import "HHFStarView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    HHFStarView *startView = [HHFStarView starView];
    [self.view addSubview:startView];
}

@end

執行效果: