ios-a step-by-step way to teach you custom rating star Ratingbar

Source: Internet
Author: User
Tags uikit

This article reprinted to http://blog.csdn.net/hanhailong726188/article/details/42344131

Due to the needs of the project, you need to design a rating, can display scoring data star rating bar, but there seems to be no such control on iOS, Android has ratingbar this control (and found that an iOS is not as good as Android), it can only be customized, on the Internet to find relevant examples , found are very old version, non-ARC version, and can not be divided into 0 points, there is no indicator effect, so I myself re-wrote a control, named Ratingbar

The first one we do after:

The first step:

Write a Ratingbar child control that inherits from UIView

Step Two:

Declare a ratingbar to modify the rating of the agent, is the score changes to the latest score to tell each other

Step Three:

Declare some methods in the. h file that you want to burst into someone else's call

Fourth Step:

Implement a scoring bar in a. m file

The specific code is as follows:

RatingBar.h File Code

//
RatingBar.h
//
Created by Hailonghan on 15/1/1.
Copyright (c) 2015 Cubead. All rights reserved.
//

#import <UIKit/UIKit.h>

/**
* STAR Rating Bar Agent
*/
@protocol ratingbardelegate <NSObject>

/**
* Score Changes
*
* @param newrating New value
*/
-(void) ratingchanged: (float) newrating;

@end

@interface Ratingbar:uiview

/**
* Initialize settings for unselected pictures, half-selected pictures, full-selected images, and agents with changed rating values (you can use
* Block) Implementation
*
* @param deselectedname The picture name is not selected
* @param halfselectedname Half-selected picture name
* @param fullselectedname Full Select picture name
* @param delegate Agent
*/
-(void) setimagedeselected: (NSString *) deselectedname halfselected: (NSString *) Halfselectedname fullSelected: ( NSString *) Fullselectedname anddelegate: (id<ratingbardelegate>) delegate;

/**
* Set Rating values
*
* @param rating Evaluation Score
*/
-(void) displayrating: (float) rating;

/**
* Get the current score value
*
* @return Score Value
*/
-(float) rating;

/**
* Whether it is an indicator, if it is an indicator, you can not slide, only show the results, not the indicator will be able to slide the modified value
* Default is NO
*/
@property (nonatomic,assign) BOOL isindicator;

@end

Comments in the code is very detailed, I do not explain more, read the comments, really do not understand, Amen, I can not save you! Nonsense not to say, re-paste ratingbar.m file code:

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

/**
* Initialize settings for unselected pictures, half-selected pictures, full-selected images, and agents with changed rating values (you can use
* Block) Implementation
*
* @param deselectedname The picture name is not selected
* @param halfselectedname Half-selected picture name
* @param fullselectedname Full Select picture name
* @param delegate Agent
*/
-(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];

}

/**
* Set Rating values
*
* @param rating Evaluation Score
*/
-(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];
}

/**
* Get the current score value
*
* @return Score Value
*/
-(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

Copying the above. h and. M to the project can be used directly, and the code in the VIEWCONTROLLER.M is called as follows:

-(void) Viewdidload {
[Super Viewdidload];
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;//indicator, can not slide, only show the score results
[Ratingbar setimagedeselected:@ "ratingbar_unselected" Halfselected:nil fullselected:@ "ratingbar_selected" Anddelegate:self];
}

Well, the custom control is over, thank you!

ios-a step-by-step way to teach you custom rating star Ratingbar

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.