IOS 评价星星 Slider的使用

原创 于 2017-03-16 11:00:35 发布 · 478 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Slider #星星评价 #IOS Slider #Slider实现星星评价 #星星评价实现

本文介绍了一个使用UISlider和手势实现的iOS评价星星Slider组件。该组件可在应用内收集用户对态度和服务质量的评价，并允许通过滑动或点击来选择星级。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

评价星星 Slider的使用, 自己写的一个demo

使用UISlider和手势实现

代码如下: 

#define DEVICE_SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define DEVICE_SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()<UITextViewDelegate>

@property (nonatomic, strong) UISlider *attitudeEvaluateSlider;
@property (nonatomic, strong) UISlider *qualityEvaluateSlider;
@property (nonatomic, strong) UITextView *textV;
@property (nonatomic, strong) NSString *textVStr; // 文本信息

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupUI];
}

- (void)setupUI
{
    [self createControl];
    [self createStarButton];
    self.title = @"评价";
    self.attitudeEvaluateSlider = [[UISlider alloc] initWithFrame:CGRectMake(70, 70 , 240, 40)];
    self.attitudeEvaluateSlider.minimumValue = 0;
    self.attitudeEvaluateSlider.maximumValue = 10;
    [self.attitudeEvaluateSlider setMinimumTrackTintColor:[UIColor clearColor]];
    [self.attitudeEvaluateSlider setMaximumTrackTintColor:[UIColor clearColor]];
    self.attitudeEvaluateSlider.continuous = YES;
    [self.view addSubview:self.attitudeEvaluateSlider];
    
    self.qualityEvaluateSlider = [[UISlider alloc] initWithFrame:CGRectMake(70, 140, 240, 40)];
    self.qualityEvaluateSlider.minimumValue = 0;
    self.qualityEvaluateSlider.maximumValue = 10;
    [self.qualityEvaluateSlider setMinimumTrackTintColor:[UIColor clearColor]];
    [self.qualityEvaluateSlider setMaximumTrackTintColor:[UIColor clearColor]];
    self.qualityEvaluateSlider.continuous = YES;
    [self.view addSubview:self.qualityEvaluateSlider];
    
    [self.attitudeEvaluateSlider setThumbImage:[self OriginImage:[UIImage imageNamed:@""] scaleToSize:CGSizeMake(1, 1)] forState:(UIControlStateNormal)];
    [self.attitudeEvaluateSlider setThumbImage:[self OriginImage:[UIImage imageNamed:@""] scaleToSize:CGSizeMake(1, 1)] forState:(UIControlStateHighlighted)];
    [self.qualityEvaluateSlider setThumbImage:[self OriginImage:[UIImage imageNamed:@""] scaleToSize:CGSizeMake(1, 1)] forState:(UIControlStateNormal)];
    [self.qualityEvaluateSlider setThumbImage:[self OriginImage:[UIImage imageNamed:@""] scaleToSize:CGSizeMake(1, 1)] forState:(UIControlStateHighlighted)];
    
    UIPanGestureRecognizer *attitudeSelfView = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(attitudeEvaluateSlider:)];
    [self.attitudeEvaluateSlider addGestureRecognizer:attitudeSelfView];
    UITapGestureRecognizer*attitudeTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(attitudeActiondo:)];
    [self.attitudeEvaluateSlider addGestureRecognizer:attitudeTapGesture];
    
    UIPanGestureRecognizer *qualitySelfView = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(qualityEvaluateSlider:)];
    [self.qualityEvaluateSlider addGestureRecognizer:qualitySelfView];
    UITapGestureRecognizer*qualityTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(qualityActiondo:)];
    [self.qualityEvaluateSlider addGestureRecognizer:qualityTapGesture];
    
}

-(UIImage*) OriginImage:(UIImage*)image scaleToSize:(CGSize)size
{
    UIGraphicsBeginImageContext(size);//size为CGSize类型，即你所需要的图片尺寸
    
    [image drawInRect:CGRectMake(0,0, size.width, size.height)];
    
    UIImage* scaledImage =UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return scaledImage;
}

- (void)createStarButton
{
    for (int i = 0; i < 10; i ++) {
        UIButton *StarBtn = [[UIButton alloc] init];
        [StarBtn setImage:[UIImage imageNamed:@"星星（未选中）"] forState:(UIControlStateNormal)];
        [self.view addSubview:StarBtn];
        if (i < 5) {
            StarBtn.tag = 100 + i;
            [StarBtn mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.mas_equalTo(self.view.mas_left).offset(70 + 50 * i);
                make.top.mas_equalTo(self.view.mas_top).offset (70);
                make.width.mas_equalTo(40);
                make.height.mas_equalTo(40);
            }];
        }else{
            StarBtn.tag = 200 + (i%5);
            [StarBtn mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.mas_equalTo(self.view.mas_left).offset(70 + 50 * (i%5));
                make.top.mas_equalTo(self.view.mas_top).offset (140);
                make.width.mas_equalTo(40);
                make.height.mas_equalTo(40);
            }];
        }
    }
}

#pragma mark ======= 态度--点击
- (void)attitudeActiondo:(UITapGestureRecognizer *)sender
{
    CGPoint touchPoint = [sender locationInView:self.attitudeEvaluateSlider];
    CGFloat value = (_attitudeEvaluateSlider.maximumValue - _attitudeEvaluateSlider.minimumValue) * ((touchPoint.x)/ _attitudeEvaluateSlider.frame.size.width);
    [_attitudeEvaluateSlider setValue:value animated:YES];
    [self attitudeStarViewWithValue:[self conversion:value]];
}

#pragma mark ======= 态度--滑动
- (void)attitudeEvaluateSlider:(UIGestureRecognizer *)sender
{
    CGPoint touchPoint = [sender locationInView:self.attitudeEvaluateSlider];
    CGFloat value = (_attitudeEvaluateSlider.maximumValue - _attitudeEvaluateSlider.minimumValue) * ((touchPoint.x)/ _attitudeEvaluateSlider.frame.size.width);
    [_attitudeEvaluateSlider setValue:value animated:YES];
    [self attitudeStarViewWithValue:[self conversion:value]];
}

#pragma mark ======= 质量--点击
- (void)qualityActiondo:(UITapGestureRecognizer *)sender
{
    CGPoint touchPoint = [sender locationInView:self.qualityEvaluateSlider];
    CGFloat value = (_qualityEvaluateSlider.maximumValue - _qualityEvaluateSlider.minimumValue) * (touchPoint.x / _qualityEvaluateSlider.frame.size.width);
    [_qualityEvaluateSlider setValue:value animated:YES];
    [self qualityStarViewWithValue:[self conversion:value]];
}

#pragma mark ======= 质量--滑动
- (void)qualityEvaluateSlider:(UIGestureRecognizer *)sender
{
    CGPoint touchPoint = [sender locationInView:self.qualityEvaluateSlider];
    CGFloat value = (_qualityEvaluateSlider.maximumValue - _qualityEvaluateSlider.minimumValue) * (touchPoint.x / _qualityEvaluateSlider.frame.size.width);
    [_qualityEvaluateSlider setValue:value animated:YES];
    [self qualityStarViewWithValue:[self conversion:value]];
}

- (NSInteger)conversion:(float)value
{
    int a;
    a = (int)(value+0.5);
    return a;
}

- (void)attitudeStarViewWithValue:(NSInteger)value
{
    int i;
    for (i = 0; i < value / 2; i++) {
        UIButton *button = (UIButton *)[self.view viewWithTag:100 + i];
        [button setImage:[UIImage imageNamed:@"星星（选中）"] forState:(UIControlStateNormal)];
    }
    if (value % 2 != 0) {
        UIButton *button = (UIButton *)[self.view viewWithTag:100 + i];
        [button setImage:[UIImage imageNamed:@"星星半颗（选中）"] forState:(UIControlStateNormal)];
        ++i;
    }
    for (; i < 5; i++) {
        UIButton *button = (UIButton *)[self.view viewWithTag:100 + i];
        [button setImage:[UIImage imageNamed:@"星星（未选中）"] forState:(UIControlStateNormal)];
    }
}

- (void)qualityStarViewWithValue:(NSInteger)value
{
    int i;
    for (i = 0; i < value / 2; i++) {
        UIButton *button = (UIButton *)[self.view viewWithTag:200 + i];
        [button setImage:[UIImage imageNamed:@"星星（选中）"] forState:(UIControlStateNormal)];
    }
    if (value % 2 != 0) {
        UIButton *button = (UIButton *)[self.view viewWithTag:200 + i];
        [button setImage:[UIImage imageNamed:@"星星半颗（选中）"] forState:(UIControlStateNormal)];
        ++i;
    }
    for (; i < 5; i++) {
        UIButton *button = (UIButton *)[self.view viewWithTag:200 + i];
        [button setImage:[UIImage imageNamed:@"星星（未选中）"] forState:(UIControlStateNormal)];
    }
}

- (void)createControl
{
    UILabel *attitudeLable = [[UILabel alloc] init];
    attitudeLable.text = @"态度:";
    attitudeLable.textAlignment = NSTextAlignmentCenter;
    attitudeLable.textColor = [UIColor blackColor];
    attitudeLable.font = [UIFont systemFontOfSize:14];
    [self.view addSubview:attitudeLable];
    [attitudeLable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(15 );
        make.top.mas_equalTo(self.view.mas_top).offset(70);
        make.width.mas_equalTo(60);
        make.height.mas_equalTo(40);
    }];
    
    UILabel *qualityLable = [[UILabel alloc] init];
    qualityLable.text = @"质量:";
    qualityLable.textAlignment = NSTextAlignmentCenter;
    qualityLable.textColor = [UIColor blackColor];
    qualityLable.font = [UIFont systemFontOfSize:14];
    [self.view addSubview:qualityLable];
    [qualityLable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(15);
        make.top.mas_equalTo(self.view.mas_top).offset(140);
        make.width.mas_equalTo(60);
        make.height.mas_equalTo(40);
    }];
    
    self.textV = [[UITextView alloc] init];
    self.textV.delegate = self;
    self.textV.layer.borderWidth = 0.5;
    self.textV.layer.borderColor = [UIColor blackColor].CGColor;
    self.textV.layer.cornerRadius = 5;
    self.textV.layer.masksToBounds = YES;
    self.textV.text = @"请输入你要评价的内容";
    self.textV.textColor = [UIColor blackColor];
    [self.view addSubview:_textV];
    [self.textV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(15);
        make.top.mas_equalTo(qualityLable.mas_bottom).offset(50);
        make.width.mas_equalTo(DEVICE_SCREEN_WIDTH - 30);
        make.height.mas_equalTo(80);
    }];
    
    UIButton *submitBtn = [[UIButton alloc] init];
    submitBtn.backgroundColor = [UIColor blueColor];
    [submitBtn setTitle:@"提交" forState:UIControlStateNormal];
    [submitBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    submitBtn.titleLabel.font = [UIFont systemFontOfSize:16];
    [submitBtn addTarget:self action:@selector(submitBtnClick) forControlEvents:UIControlEventTouchUpInside];
    submitBtn.layer.cornerRadius = 5;
    [self.view addSubview:submitBtn];
    [submitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(15);
        make.top.mas_equalTo(self.textV.mas_bottom).offset (40);
        make.width.mas_equalTo(DEVICE_SCREEN_WIDTH - 30);
        make.height.mas_equalTo(40);
    }];

}

- (void)submitBtnClick
{
//    self.attitudeEvaluateSlider.value;//态度评价
//    self.qualityEvaluateSlider.value;//质量评价
}

有用到的可以看下demo下载地址


效果图如下



评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值