前言
早上的时光总是很漫长，距上班还有两个小时，睡不着觉来搞点事情做，写了一个星星评级的小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)
}
}
大家加油！！
