iOS小Demo1：星星评级效果

前言

早上的时光总是很漫长，距上班还有两个小时，睡不着觉来搞点事情做，写了一个星星评级的小demo，实现的比较简单，哈哈，话不多说。

实现的原理

我们在很多商城类的app上面都会看到这种效果，在完成一个商品交易之后，会有个售后评分的页面，上面是你对本次交易的评级。

22C268C4F7CC9F23A05694207545BDB6.png

我的实现原理非常的简单：就是在一个视图上面添加一个相同的视图，然后通过view的clipsToBounds属性，通过touch方法改变上面view的width即可。方式很简单，我就直接粘贴代码了(星星的图片是我自己用sketch做的,可能有点丑..哈哈哈)。

具体代码实现：

#import "SHStarView.h"

@interface SHStarView ()

@property (nonatomic,strong) UIView *foregroundView;

@property (nonatomic,assign) NSInteger starNum;

@end

@implementation SHStarView

static NSString *normalName = @"star_nomal";
static NSString *selectName = @"star_selecte";


#pragma mark --- lazz --
-(UIView *)foregroundView{
    if (!_foregroundView) {
        _foregroundView = [UIView new];
        _foregroundView.clipsToBounds = YES;
        [self addSubview:_foregroundView];
    }
    
    return _foregroundView;
}


-(instancetype)initWithFrame:(CGRect)frame starNum:(NSInteger)starNum{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor redColor];
        _starNum = starNum;
        [self setupSubviews];
    }
    
    return self;
}



-(void)setupSubviews{

    CGRect frame = self.bounds;
    CGFloat imageH = frame.size.width / self.starNum;
    CGFloat imageY = (frame.size.height - imageH) * 0.5;
    for (int i = 0; i < self.starNum; i ++) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:normalName]];
       // imageView.contentMode = UIViewContentModeCenter;
        imageView.frame = CGRectMake(i * (frame.size.width / self.starNum) , imageY ,imageH, imageH);
        [self addSubview:imageView];
    }
}


-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    NSSet *allTouches = [event allTouches];    //返回与当前接收者有关的所有的触摸对象
    UITouch *touch = [allTouches anyObject];   //视图中的所有对象
    CGPoint point = [touch locationInView:[touch view]];
    if (CGRectContainsPoint(self.bounds, point)) {
        [self changeStarColor:point];
    }
}


-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    NSSet *allTouches = [event allTouches];    //返回与当前接收者有关的所有的触摸对象
    UITouch *touch = [allTouches anyObject];   //视图中的所有对象
    CGPoint point = [touch locationInView:[touch view]];
    if (CGRectContainsPoint(self.bounds, point)) {
        [self changeStarColor:point];
    }
}



-(void)changeStarColor:(CGPoint)point{
    CGRect frame = self.bounds;

    CGFloat imageH = frame.size.width / self.starNum;
    CGFloat imageY = (frame.size.height - imageH) * 0.5;
    for (int i = 0; i < self.starNum; i ++) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:selectName]];
        
        imageView.frame = CGRectMake(i * (frame.size.width / self.starNum) , imageY ,imageH, imageH);
        [self.foregroundView addSubview:imageView];
    }
    
    self.foregroundView.frame = CGRectMake(0, 0, point.x,frame.size.height);
  
}

.h文件：

#import <UIKit/UIKit.h>

@interface SHStarView : UIView



-(instancetype)initWithFrame:(CGRect)frame starNum:(NSInteger)starNum;


@end

效果：

星星截屏.png

图片资源：

star_nomal@2x.png star_nomal@3x.png star_selecte@2x.png star_selecte@3x.png

第二种实现方法

最近在看coreGraphics框架的东西，其实用这个画图的框架也能实现上面的功能，这个部分的代码如下:

@implementation SHStarView{
    int _currentStar;
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
    [super drawRect:rect];
    
    //star_selecte  star_nomal
    CGFloat starHeight = self.bounds.size.height;
    CGImageCreateWithImageInRect([[UIImage imageNamed:@"star_selecte"] CGImage], CGRectMake(0, 0, starHeight, starHeight));
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
    CGContextScaleCTM(context, 1, -1);
    
    for (int i = 0; i < 5; i ++) {
        CGRect imageRect = CGRectMake(starHeight * i, 0, starHeight, starHeight);
        CGContextDrawImage(context, imageRect, [[UIImage imageNamed:@"star_nomal"] CGImage]);
    }
    
    for (int i = 0; i < (int)_currentStar; i++) {
        if (i < 5) {
            CGRect imageRect = CGRectMake(starHeight * i, 0, starHeight, starHeight);
            
            CGContextDrawImage(context, imageRect, [[UIImage imageNamed:@"star_selecte"] CGImage]);
        }
        
    }
    
    CGContextRestoreGState(context);
    
}


-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    NSLog(@"touch begin");
    
    CGPoint point = [[touches anyObject] locationInView:self];
    
    CGFloat count = point.x / self.bounds.size.height;
    
    CGFloat sum = count > (int)count + .5 ? (int)count + 1 : (int)count + .5;
    
    if (sum != _currentStar) {
        
        _currentStar = sum;
        
        [self setNeedsDisplay];
    }
}

我在上面写死了五颗星星,可以自己调整.这个原理就是运用了coreGraphics框架中的CGContextDrawImage方法.也是很简单.

swift版的代码如下：

import UIKit

class SHStarView: UIView {
    
    var starNun : NSInteger!
    
    var foregroundView : UIView! = {
        let view = UIView.init()
        view.clipsToBounds = true
        view.backgroundColor = UIColor.clear
        return view
        
    }()
    
    
    //自定义初始化方法:
    init(_ frame: CGRect , _ starNum: NSInteger) {
        super.init(frame: frame)
        self.starNun = starNum;
        self.backgroundColor = UIColor.red
        
        //加载子视图
        setupSubviews()
        
    }

    
    
    func setupSubviews() {
        
        let frame : CGRect = self.bounds
        let imageH : CGFloat = frame.size.width / CGFloat(self.starNun);
        let imageY : CGFloat = (frame.size.height - imageH) * 0.5
        
        
        for i in 0..<self.starNun {
            let imageView = UIImageView.init(image: UIImage.init(named: "star_nomal"))
            imageView.frame = CGRect.init(x: CGFloat(i) * (frame.size.width / CGFloat(self.starNun)), y: imageY, width:imageH , height: imageH)
            self.addSubview(imageView)
        }
        
        //加载前面的视图
        self.addSubview(foregroundView)
        
    }
    
    required init?(coder aDecoder: NSCoder) {
      fatalError("init(coder:) has not been implemented")
    }

    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch: AnyObject in touches {
             let t : UITouch = touch as! UITouch
             let point = t.location(in: self)
             if self.bounds.contains(point) {
                changeStarColor(point: point)
            }
            
        }
    }
    
    
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch: AnyObject in touches {
            let t : UITouch = touch as! UITouch
            let point = t.location(in: self)
            if self.bounds.contains(point) {
                changeStarColor(point: point)
            }
            
        }

        
    }
    
    //改变坐标
    func changeStarColor(point : CGPoint) {
        //先移除，再创建
        for subview in self.foregroundView.subviews {
            subview.removeFromSuperview()
        }
        
        let frame : CGRect = self.bounds
        let imageH : CGFloat = frame.size.width / CGFloat(self.starNun);
        let imageY : CGFloat = (frame.size.height - imageH) * 0.5
        
        for i in 0..<self.starNun {
            let imageView = UIImageView.init(image: UIImage.init(named: "star_selecte"))
            imageView.frame = CGRect.init(x: CGFloat(i) * (frame.size.width / CGFloat(self.starNun)), y: imageY, width:imageH , height: imageH)
            self.foregroundView.addSubview(imageView)
        }
        
        
        UIView.animate(withDuration: 0.3) {
            self.foregroundView.frame = CGRect.init(x: 0, y: 0, width: point.x, height: frame.size.height)
        }
        
    
    }
    
    

大家加油！！