前言
在開發(fā)電商類的app中芜赌，我們經(jīng)常會遇到用戶評價“打星”這樣的需求伴逸，因為iOS上沒有這個控件，所以這時需要我們自定義該控件來滿足需求洲愤。
思路
看到這個需求的時候,我想到了需要自定義此控件來滿足需求。
1)準備兩張"星星"圖片,一張為未選中狀態(tài)下圖片,一張為選中狀態(tài)下的圖片(如下)
在一個view上創(chuàng)建2個新view,一個是未選中的星星view,一個是選中星星的View,根據(jù)所點擊的星星位置用選中星星的View覆蓋未選中的星星view。
2)封裝一個顯示"打星"的界面,來讓星星顯示在需要的界面上
由于項目需要部分界面需要完整評分,部分界面則需要不完整的星級評分,所有寫了個枚舉類型來選中打分樣式肛宋。
使用星級打分打的分數(shù)可以通過代理方式或者block方式來傳遞
實例代碼
#import<UIKit/UIKit.h>
@class CCStarRateView;
typedef void(^finishBlock)(CGFloat currentScore);
typedef NS_ENUM(NSInteger, RateStyle){? ?
WholeStar = 0, //只能整星評論? ?
HalfStar = 1,? //允許半星評論?
IncompleteStar = 2? //允許不完整星評論
};
@protocol CCStarRateViewDelegate<NSObject>
-(void)starRateView:(CCStarRateView *)starRateView currentScore:(CGFloat)currentScore;
@end@interface CCStarRateView : UIView
@property (nonatomic,assign)CGFloat currentScore;? // 當前評分：0-5? 默認0
@property (nonatomic,assign)BOOL isAnimation;? ? ? //是否動畫顯示酝陈，默認NO
@property (nonatomic,assign)RateStyle rateStyle;? ? //評分樣式? ? 默認WholeStar
@property (nonatomic, weak) id<CCStarRateViewDelegate>delegate;-(instancetype)initWithFrame:(CGRect)frame;
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation delegate:(id)delegate;
//block當做一個參數(shù)傳遞
-(instancetype)initWithFrame:(CGRect)frame finish:(finishBlock)finish;//block當做一個參數(shù)傳遞
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation finish:(finishBlock)finish;@end
#import "CCStarRateView.h"
#define ForegroundStarImage @"Selectstar"
#define BackgroundStarImage @"star"
typedef void(^completeBlock)(CGFloat currentScore);
@interface CCStarRateView()
@property (nonatomic, strong) UIView *foregroundStarView;
@property (nonatomic, strong) UIView *backgroundStarView;
@property (nonatomic, assign) NSInteger numberOfStars;
@property (nonatomic,strong)completeBlock complete;
@end
@implementation CCStarRateView
#pragma mark - 代理方式
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
_numberOfStars = 5;
_rateStyle = WholeStar;
[self createStarView];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation delegate:(id)delegate{
if (self = [super initWithFrame:frame]) {
_numberOfStars = numberOfStars;
_rateStyle = rateStyle;
_isAnimation = isAnimation;
_delegate = delegate;
[self createStarView];
}
return self;
}
#pragma mark - block方式
-(instancetype)initWithFrame:(CGRect)frame finish:(finishBlock)finish{
if (self = [super initWithFrame:frame]) {
_numberOfStars = 5;
_rateStyle = WholeStar;
_complete = ^(CGFloat currentScore){
finish(currentScore);
};
[self createStarView];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation finish:(finishBlock)finish{
if (self = [super initWithFrame:frame]) {
_numberOfStars = numberOfStars;
_rateStyle = rateStyle;
_isAnimation = isAnimation;
_complete = ^(CGFloat currentScore){
finish(currentScore);
};
[self createStarView];
}
return self;
}
#pragma mark - private Method
//調(diào)用這個方法來布局
-(void)createStarView{self.foregroundStarView = [self createStarViewWithImage:ForegroundStarImage];
self.backgroundStarView = [self createStarViewWithImage:BackgroundStarImage];
self.foregroundStarView.frame = CGRectMake(0, 0, self.bounds.size.width*_currentScore/self.numberOfStars, self.bounds.size.height);
[self addSubview:self.backgroundStarView];
[self addSubview:self.foregroundStarView];
//添加手勢來取得所點擊的位置
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(userTapRateView:)];tapGesture.numberOfTapsRequired = 1;
[self addGestureRecognizer:tapGesture];
}
//使用這個方法來初始化子View
- (UIView *)createStarViewWithImage:(NSString *)imageName {UIView *view = [[UIView alloc] initWithFrame:self.bounds];
view.clipsToBounds = YES;
view.backgroundColor = [UIColor clearColor];
//根據(jù)傳過來的星星的數(shù)量來布局有幾個星星
for (NSInteger i = 0; i < self.numberOfStars; i ++){
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
imageView.frame = CGRectMake(i * self.bounds.size.width / self.numberOfStars, 0, self.bounds.size.width / self.numberOfStars, self.bounds.size.height);
//? 保持圖片內(nèi)容的縱橫比例，來適應(yīng)視圖的大小遇西。
imageView.contentMode = UIViewContentModeScaleAspectFit;
[view addSubview:imageView];
}
return view;
}
- (void)userTapRateView:(UITapGestureRecognizer *)gesture {
//函數(shù)返回一個CGPoint類型的值粱檀，表示觸摸在view這個視圖上的位置，這里返回的位置是針對view的坐標系的茄蚯。調(diào)用時傳入的view參數(shù)為空的話渗常，返回的時觸摸點在整個窗口的位置。
CGPoint tapPoint = [gesture locationInView:self];
CGFloat offset = tapPoint.x;
CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
switch (_rateStyle) {
case WholeStar:
{
self.currentScore = ceilf(realStarScore);
break;
}
case HalfStar:
self.currentScore = roundf(realStarScore)>realStarScore ? ceilf(realStarScore):(ceilf(realStarScore)-0.5);
break;
case IncompleteStar:
self.currentScore = realStarScore;
break;
default:
break;
}
}
- (void)layoutSubviews {
[super layoutSubviews];
__weak CCStarRateView *weakSelf = self;
CGFloat animationTimeInterval = self.isAnimation ? 0.2 : 0;
[UIView animateWithDuration:animationTimeInterval animations:^{
weakSelf.foregroundStarView.frame = CGRectMake(0, 0, weakSelf.bounds.size.width * weakSelf.currentScore/self.numberOfStars, weakSelf.bounds.size.height);
}];
}
-(void)setCurrentScore:(CGFloat)currentScore {
if (_currentScore == currentScore) {
return;
}
if (currentScore < 0) {
_currentScore = 0;
} else if (currentScore > _numberOfStars) {
_currentScore = _numberOfStars;
} else {
_currentScore = currentScore;
}
if ([self.delegate respondsToSelector:@selector(starRateView:currentScore:)]) {
[self.delegate starRateView:self currentScore:_currentScore];
}
if (self.complete) {
_complete(_currentScore);
}
//重新布局
[self setNeedsLayout];
}
@end
