What is EZRatingView?
EZRatingView is a RatingView library in iOS development that let you easily customize the rate image, rate value, etc. This library is useful when we want to show some ratings of a feature or give ratings.
Integrate to the project
First of all, you must have Cocoapods installed. Then write this line in the Podfile pod 'EZRatingView'. Once you have finished, run thepod install``` command to install the dependency of the EZRatingView. Then, open the .xcworkspace file to be able to use the dependency.
Import and declare the EZRatingView and other components that will be used
Go to your .h file to import and declare the EZRatingView and declare other variables using these lines
//
// ViewController.h
// RatingDemoApp
//
// Created by Andri on 1/24/18.
// Copyright © 2018 Andri. All rights reserved.
//
#import
#import "EZRatingView.h"
#import "Masonry.h"
@interface ViewController : UIViewController{
EZRatingView *qualityRatingView;
EZRatingView *serviceRatingView;
EZRatingView *accuracyRatingView;
UILabel *qualityLabel;
UILabel *serviceLabel;
UILabel *accuracyLabel;
UILabel *resultLabel;
CGFloat quality;
CGFloat service;
CGFloat accuracy;
}
@end
In the code above, we declare 3 EZRatingView that consists of qualityRatingView, serviceRatingView and accuracyRatingView. Then, we have 3 UILabel that consists of qualityLabel, serviceLabel and accuracyLabel. We also declare 3 CGFloat variable that we will use to get the rating value. The resultLabel is just information of what the user has rated on the reviews.
Implementing the EZRatingView
We go to the ViewController.m file first and initialize the label, then give it some properties and position using this code. We start with the quality labels.
UILabel *qualityTag = [UILabel new];
qualityTag.text = @"Quality";
[self.view addSubview:qualityTag];
[qualityTag mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view).offset(16);
make.top.equalTo(self.view).offset(32);
}];
qualityLabel = [UILabel new];
qualityLabel.text = @"4/5";
qualityLabel.textAlignment = NSTextAlignmentRight;
[self.view addSubview:qualityLabel];
[qualityLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.view).offset(-24);
make.width.equalTo(@35);
make.centerY.equalTo(qualityTag);
}];
It will display something looks like this
After we have create the labels, we go to create our EZRatingView to show the stars. Follow these steps.
qualityRatingView = [EZRatingView new];qualityRatingView.markerDict = @{EZMarkerBaseColorKey:[UIColor grayColor],EZMarkerHighlightColorKey:[UIColor yellowColor]};
qualityRatingView.stepInterval = 1;qualityRatingView.value = 4;
qualityRatingView.minimumValue = 1;qualityRatingView.userInteractionEnabled = YES;self.view and set the constraint[self.view addSubview:qualityRatingView];
[qualityRatingView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(qualityLabel.mas_left).offset(-8);
make.size.mas_equalTo(CGSizeMake(100, 25));
make.centerY.equalTo(qualityTag);
}];
[qualityRatingView addTarget:self action:@selector(qualityRateDidChange:) forControlEvents:UIControlEventValueChanged];
-(void)qualityRateDidChange:(EZRatingView*)rate{
qualityLabel.text = [NSString stringWithFormat:@"%g/5",rate.value];
quality = rate.value;
}
After you write above code, run the app and you will see the rating we just made.
Repeat the step for the service and accuracy labels, service and accuracy EZRatingView . Then, get the result by passing each variable from quality, service and accuracy and concat them using stringWithformat. We'll also use the button to trigger the result event. This is the full ViewController.m
//
// ViewController.m
// RatingDemoApp
//
// Created by Andri on 1/24/18.
// Copyright © 2018 Andri. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupUI];
}
- (void)setupUI{
UILabel *qualityTag = [UILabel new];
qualityTag.text = @"Quality";
[self.view addSubview:qualityTag];
[qualityTag mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view).offset(16);
make.top.equalTo(self.view).offset(32);
}];
qualityLabel = [UILabel new];
qualityLabel.text = @"4/5";
qualityLabel.textAlignment = NSTextAlignmentRight;
[self.view addSubview:qualityLabel];
[qualityLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.view).offset(-24);
make.width.equalTo(@35);
make.centerY.equalTo(qualityTag);
}];
qualityRatingView = [EZRatingView new];
qualityRatingView.markerDict = @{EZMarkerBaseColorKey:[UIColor grayColor],EZMarkerHighlightColorKey:[UIColor yellowColor]};
qualityRatingView.stepInterval = 1;
qualityRatingView.value = 4;
qualityRatingView.minimumValue = 1;
qualityRatingView.userInteractionEnabled = YES;
[qualityRatingView addTarget:self action:@selector(qualityRateDidChange:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:qualityRatingView];
[qualityRatingView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(qualityLabel.mas_left).offset(-8);
make.size.mas_equalTo(CGSizeMake(100, 25));
make.centerY.equalTo(qualityTag);
}];
UILabel *serviceTag = [UILabel new];
serviceTag.text = @"Service";
[self.view addSubview:serviceTag];
[serviceTag mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(qualityTag);
make.top.equalTo(qualityTag.mas_bottom).offset(16);
}];
serviceLabel = [UILabel new];
serviceLabel.text = @"4/5";
serviceLabel.textAlignment = NSTextAlignmentRight;
[self.view addSubview:serviceLabel];
[serviceLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.view).offset(-24);
make.width.equalTo(@35);
make.centerY.equalTo(serviceTag);
}];
serviceRatingView = [EZRatingView new];
serviceRatingView.markerDict = @{EZMarkerBaseColorKey:[UIColor grayColor],EZMarkerHighlightColorKey:[UIColor yellowColor]};
serviceRatingView.stepInterval = 1;
serviceRatingView.value = 4;
serviceRatingView.minimumValue = 1;
serviceRatingView.userInteractionEnabled = YES;
[serviceRatingView addTarget:self action:@selector(serviceRateDidChange:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:serviceRatingView];
[serviceRatingView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(serviceLabel.mas_left).offset(-8);
make.size.mas_equalTo(CGSizeMake(100, 25));
make.top.equalTo(serviceTag);
}];
UILabel *accuracyTag = [UILabel new];
accuracyTag.text = @"Accuracy";
[self.view addSubview:accuracyTag];
[accuracyTag mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(serviceTag);
make.top.equalTo(serviceTag.mas_bottom).offset(16);
}];
accuracyLabel = [UILabel new];
accuracyLabel.text = @"4/5";
accuracyLabel.textAlignment = NSTextAlignmentRight;
[self.view addSubview:accuracyLabel];
[accuracyLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.view).offset(-24);
make.width.equalTo(@35);
make.centerY.equalTo(accuracyTag);
}];
accuracyRatingView = [EZRatingView new];
accuracyRatingView.markerDict = @{EZMarkerBaseColorKey:[UIColor grayColor],EZMarkerHighlightColorKey:[UIColor yellowColor]};
accuracyRatingView.stepInterval = 1;
accuracyRatingView.value = 4;
accuracyRatingView.minimumValue = 1;
accuracyRatingView.userInteractionEnabled = YES;
[accuracyRatingView addTarget:self action:@selector(accurateRateDidChange:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:accuracyRatingView];
[accuracyRatingView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(accuracyLabel.mas_left).offset(-8);
make.size.mas_equalTo(CGSizeMake(100, 25));
make.top.equalTo(accuracyTag);
}];
UIButton *submitButton = [UIButton buttonWithType:UIButtonTypeCustom];
[submitButton setTitle:@"Submit" forState:UIControlStateNormal];
[submitButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[submitButton addTarget:self action:@selector(submitDidTap) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:submitButton];
[submitButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view);
make.top.equalTo(accuracyRatingView.mas_bottom).offset(8);
}];
resultLabel = [UILabel new];
[self.view addSubview:resultLabel];
[resultLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(submitButton);
make.top.equalTo(submitButton).offset(36);
}];
}
-(void)qualityRateDidChange:(EZRatingView*)rate{
qualityLabel.text = [NSString stringWithFormat:@"%g/5",rate.value];
quality = rate.value;
}
-(void)serviceRateDidChange:(EZRatingView*)rate{
serviceLabel.text = [NSString stringWithFormat:@"%g/5",rate.value];
service = rate.value;
}
-(void)accurateRateDidChange:(EZRatingView*)rate{
accuracyLabel.text = [NSString stringWithFormat:@"%g/5",rate.value];
accuracy = rate.value;
}
-(void)submitDidTap{
NSString *result = @"";
result = [NSString stringWithFormat:@"Result: %.0f/5 Quality, %.0f/5 Service, %.0f/5 accuracy", quality, service, accuracy];
resultLabel.text = result;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
You will see this in the simulator.
When you click the submit button with the selected ratings, it will show the result like this.
The code display the result of each rating. This information is very useful when you're working on app that needs review like foods, trip, promos, etc. Okay, that's all about this rating. Thanks for reading