我就直接粘贴代码了(星星的图片是我自己用ske

作者: 时时彩平台-编程  发布:2019-09-13

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

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

图片 122C268C4F7CC9F23A05694207545BDB6.png

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

#import "SHStarView.h"@interface SHStarView ()@property (nonatomic,strong) UIView *foregroundView;@property (nonatomic,assign) NSInteger starNum;@end@implementation SHStarViewstatic NSString *normalName = @"star_nomal";static NSString *selectName = @"star_selecte";#pragma mark --- lazz ---foregroundView{ if (!_foregroundView) { _foregroundView = [UIView new]; _foregroundView.clipsToBounds = YES; [self addSubview:_foregroundView]; } return _foregroundView;}-(instancetype)initWithFrame:frame starNum:(NSInteger)starNum{ if (self = [super initWithFrame:frame]) { self.backgroundColor = [UIColor redColor]; _starNum = starNum; [self setupSubviews]; } return self;}-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]; }}-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]; }}-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]; }}-changeStarColor: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:frame starNum:(NSInteger)starNum;@end

效果:

图片 2星星截屏.png

图片资源:

图片 3star_nomal@2x.png图片 4star_nomal@3x.png图片 5star_selecte@2x.png图片 6star_selecte@3x.png

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

@implementation SHStarView{ int _currentStar;}- drawRect: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; 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 < _currentStar; i++) { if  { CGRect imageRect = CGRectMake(starHeight * i, 0, starHeight, starHeight); CGContextDrawImage(context, imageRect, [[UIImage imageNamed:@"star_selecte"] CGImage]); } } CGContextRestoreGState; }-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 > count + .5 ? count + 1 : count + .5; if (sum != _currentStar) { _currentStar = sum; [self setNeedsDisplay]; }}

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

swift版的代码如下:

import UIKitclass 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 * (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 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 if self.bounds.contains { 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 if self.bounds.contains { 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 * (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) } } 

大家加油!!

本文由时时彩平台发布于时时彩平台-编程,转载请注明出处:我就直接粘贴代码了(星星的图片是我自己用ske

关键词:

上一篇:一年前写过两篇类似的文章
下一篇:没有了