zoukankan      html  css  js  c++  java
  • IOS-一步一步教你自定义评分星级条RatingBar

    本文转载至 http://blog.csdn.net/hanhailong726188/article/details/42344131

    由于项目的需要,需要设计能评分、能显示评分数据的星级评分条,但是IOS上好像没有这个控件,Android是有RatingBar这个控件的(又发现一个IOS不如Android好的偷笑),那就只能自定义了,在网上也找了相关的例子,发现都是很老的版本了,非ARC版本的,而且不能评分成0分,还没有indicator效果,于是我自己重新写了一个控件,命名为RatingBar

    先上一张我们做之后的效果图:

    第一步:

    写一个继承自UIView的RatingBar子控件

    第二步:

    声明一个RatingBar修改评分的代理,就是评分修改后把最新的评分告诉对方

    第三步:

    在.h文件中声明一些要暴漏给别人调用的方法

    第四步:

    在.m文件中实现评分条

    具体代码如下:

    RatingBar.h文件代码

    //
    //  RatingBar.h
    //
    //  Created by HailongHan on 15/1/1.
    //  Copyright (c) 2015年 cubead. All rights reserved.
    //

    #import <UIKit/UIKit.h>

    /**
     *  星级评分条代理
     */
    @protocol RatingBarDelegate <NSObject>

    /**
     *  评分改变
     *
     *  @param newRating 新的值
     */
    - (void)ratingChanged:(float)newRating;

    @end

    @interface RatingBar : UIView

    /**
     *  初始化设置未选中图片、半选中图片、全选中图片,以及评分值改变的代理(可以用
     *  Block)实现
     *
     *  @param deselectedName   未选中图片名称
     *  @param halfSelectedName 半选中图片名称
     *  @param fullSelectedName 全选中图片名称
     *  @param delegate          代理
     */
    - (void)setImageDeselected:(NSString *)deselectedName halfSelected:(NSString *)halfSelectedName fullSelected:(NSString *)fullSelectedName andDelegate:(id<RatingBarDelegate>)delegate;

    /**
     *  设置评分值
     *
     *  @param rating 评分值
     */
    - (void)displayRating:(float)rating;

    /**
     *  获取当前的评分值
     *
     *  @return 评分值
     */
    - (float)rating;

    /**
     *  是否是指示器,如果是指示器,就不能滑动了,只显示结果,不是指示器的话就能滑动修改值
     *  默认为NO
     */
    @property (nonatomic,assign) BOOL isIndicator;

    @end

    代码中注释的很详细了,这我就不多解释了,看注释吧,真看不懂,阿门,我也救不了你!废话不多说,再贴RatingBar.m文件代码:

    //  RatingBar.m
    //
    //  Created by HailongHan on 15/1/1.
    //  Copyright (c) 2015年 cubead. All rights reserved.
    //

    #import "RatingBar.h"

    @interface RatingBar (){
        float starRating;
        float lastRating;
        
        float height;
        float width;
        
        UIImage *unSelectedImage;
        UIImage *halfSelectedImage;
        UIImage *fullSelectedImage;
    }

    @property (nonatomic,strong) UIImageView *s1;
    @property (nonatomic,strong) UIImageView *s2;
    @property (nonatomic,strong) UIImageView *s3;
    @property (nonatomic,strong) UIImageView *s4;
    @property (nonatomic,strong) UIImageView *s5;

    @property (nonatomic,weak) id<RatingBarDelegate> delegate;

    @end

    @implementation RatingBar

    /**
     *  初始化设置未选中图片、半选中图片、全选中图片,以及评分值改变的代理(可以用
     *  Block)实现
     *
     *  @param deselectedName   未选中图片名称
     *  @param halfSelectedName 半选中图片名称
     *  @param fullSelectedName 全选中图片名称
     *  @param delegate          代理
     */
    -(void)setImageDeselected:(NSString *)deselectedName halfSelected:(NSString *)halfSelectedName fullSelected:(NSString *)fullSelectedName andDelegate:(id<RatingBarDelegate>)delegate{
            
        self.delegate = delegate;
        
        unSelectedImage = [UIImage imageNamed:deselectedName];
        halfSelectedImage = halfSelectedName == nil ? unSelectedImage : [UIImage imageNamed:halfSelectedName];
        fullSelectedImage = [UIImage imageNamed:fullSelectedName];
        
        height = 0.0,width = 0.0;
        
        if (height < [fullSelectedImage size].height) {
            height = [fullSelectedImage size].height;
        }
        if (height < [halfSelectedImage size].height) {
            height = [halfSelectedImage size].height;
        }
        if (height < [unSelectedImage size].height) {
            height = [unSelectedImage size].height;
        }
        if (width < [fullSelectedImage size].width) {
            width = [fullSelectedImage size].width;
        }
        if (width < [halfSelectedImage size].width) {
            width = [halfSelectedImage size].width;
        }
        if (width < [unSelectedImage size].width) {
            width = [unSelectedImage size].width;
        }
        
        starRating = 0.0;
        lastRating = 0.0;
        
        _s1 = [[UIImageView alloc] initWithImage:unSelectedImage];
        _s2 = [[UIImageView alloc] initWithImage:unSelectedImage];
        _s3 = [[UIImageView alloc] initWithImage:unSelectedImage];
        _s4 = [[UIImageView alloc] initWithImage:unSelectedImage];
        _s5 = [[UIImageView alloc] initWithImage:unSelectedImage];
        
        [_s1 setFrame:CGRectMake(0,         0, width, height)];
        [_s2 setFrame:CGRectMake(width,     0, width, height)];
        [_s3 setFrame:CGRectMake(2 * width, 0, width, height)];
        [_s4 setFrame:CGRectMake(3 * width, 0, width, height)];
        [_s5 setFrame:CGRectMake(4 * width, 0, width, height)];
        
        [_s1 setUserInteractionEnabled:NO];
        [_s2 setUserInteractionEnabled:NO];
        [_s3 setUserInteractionEnabled:NO];
        [_s4 setUserInteractionEnabled:NO];
        [_s5 setUserInteractionEnabled:NO];
        
        [self addSubview:_s1];
        [self addSubview:_s2];
        [self addSubview:_s3];
        [self addSubview:_s4];
        [self addSubview:_s5];
        
        CGRect frame = [self frame];
        frame.size.width = width * 5;
        frame.size.height = height;
        [self setFrame:frame];
        
    }

    /**
     *  设置评分值
     *
     *  @param rating 评分值
     */
    -(void)displayRating:(float)rating{
        [_s1 setImage:unSelectedImage];
        [_s2 setImage:unSelectedImage];
        [_s3 setImage:unSelectedImage];
        [_s4 setImage:unSelectedImage];
        [_s5 setImage:unSelectedImage];
        
        if (rating >= 0.5) {
            [_s1 setImage:halfSelectedImage];
        }
        if (rating >= 1) {
            [_s1 setImage:fullSelectedImage];
        }
        if (rating >= 1.5) {
            [_s2 setImage:halfSelectedImage];
        }
        if (rating >= 2) {
            [_s2 setImage:fullSelectedImage];
        }
        if (rating >= 2.5) {
            [_s3 setImage:halfSelectedImage];
        }
        if (rating >= 3) {
            [_s3 setImage:fullSelectedImage];
        }
        if (rating >= 3.5) {
            [_s4 setImage:halfSelectedImage];
        }
        if (rating >= 4) {
            [_s4 setImage:fullSelectedImage];
        }
        if (rating >= 4.5) {
            [_s5 setImage:halfSelectedImage];
        }
        if (rating >= 5) {
            [_s5 setImage:fullSelectedImage];
        }
        
        starRating = rating;
        lastRating = rating;
        [_delegate ratingChanged:rating];
    }

    /**
     *  获取当前的评分值
     *
     *  @return 评分值
     */
    -(float)rating{
        return starRating;
    }

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
        [super touchesBegan:touches withEvent:event];
    }

    -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
        [super touchesEnded:touches withEvent:event];
    }

    -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
        
        if (self.isIndicator) {
            return;
        }
        
        CGPoint point = [[touches anyObject] locationInView:self];
        int newRating = (int) (point.x / width) + 1;
        if (newRating > 5)
            return;
        
        if (point.x < 0) {
            newRating = 0;
        }
        
        if (newRating != lastRating){
            [self displayRating:newRating];
        }
    }

    @end

       将上面的.h和.m拷贝到项目中就可以直接用了,在viewController.m中调用代码如下:

    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        
        RatingBar *ratingBar = [[RatingBar alloc] init];
        ratingBar.frame = CGRectMake(100, 100, 200, 50);
        
        [self.view addSubview:ratingBar];
        ratingBar.isIndicator = YES;//指示器,就不能滑动了,只显示评分结果
        [ratingBar setImageDeselected:@"ratingbar_unselected" halfSelected:nil fullSelected:@"ratingbar_selected" andDelegate:self];
    }

    好了,自定义控件就结束了,谢谢大家!

  • 相关阅读:
    ASP.NET MVC的过滤器
    EasyUi 合并单元格占列显示
    Ajax异步请求阻塞情况的解决办法
    AutoFac使用总结
    CodeFirst迁移注意点
    DataTable与实体类互相转换
    mysql中注释的添加修改
    MySql修改数据表的基本操作(DDL操作)
    MySql中的约束
    如何使用单例模式返回一个安全的Connection
  • 原文地址:https://www.cnblogs.com/Camier-myNiuer/p/5759418.html
Copyright © 2011-2022 走看看