Apple iOS development to achieve star score (support click and slide) effect

Source: Internet
Author: User
Tags touch


As a result of the project needs, the design can be graded, to be able to display the grading data of the star rating bar. But there seems to be no such control on iOS, so it's up to you to figure it out. For this functional requirement, I have a total of two ways to

Method One: (This method is more foolish)

Idea: This method is directly in the storyboard on the Viewcontroller inside directly built 5 Uiimageview, the initial value of the picture set to "Button_star_white."
The first step is to push 5 people uiimageview on the viewcontroller of the storyboard and connect to Viewcontroller. H "file, the member variable code as Viewcontroller is as follows:


@property (Weak, nonatomic) Iboutlet Uiimageview *myimageview1;
@property (Weak, nonatomic) Iboutlet Uiimageview *myimageview2;
@property (Weak, nonatomic) Iboutlet Uiimageview *myimageview2;
@property (Weak, nonatomic) Iboutlet Uiimageview *myimageview3;
@property (Weak, nonatomic) Iboutlet Uiimageview *myimageview4;
@property (Weak, nonatomic) Iboutlet Uiimageview *myimageview5;

The second step is to add a click event for each ImageView, the code is as follows:


_myimageview1.userinteractionenabled = YES;
UITapGestureRecognizer *SINGLETAP1 = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector ( BUTTONPRESS1)];
[_myimageview1 ADDGESTURERECOGNIZER:SINGLETAP1];
_myimageview2.userinteractionenabled = YES;
UITapGestureRecognizer *SINGLETAP1 = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector ( BUTTONPRESS2)];
[_myimageview2 ADDGESTURERECOGNIZER:SINGLETAP1];
...
(5 ImageView the same way, again not one to repeat)

The third step, the realization side method: Buttonpress1,buttonpress2, ... 3,4,5, the code is as follows:

-(void) buttonpress1{
_myimageview1.image = [UIImage imagenamed:@ "button_star_red"];
_myimageview2.image = [UIImage imagenamed:@ "Button_star_white"];
_myimageview3.image = [UIImage imagenamed:@ "Button_star_white"];
_myimageview4.image = [UIImage imagenamed:@ "Button_star_white"];
_myimageview5.image = [UIImage imagenamed:@ "Button_star_white"];
}
-(void) buttonpress1{
_myimageview1.image = [UIImage imagenamed:@ "button_star_red"];
_myimageview2.image = [UIImage imagenamed:@ "button_star_red"];
_myimageview3.image = [UIImage imagenamed:@ "Button_star_white"];
_myimageview4.image = [UIImage imagenamed:@ "Button_star_white"];
_myimageview5.image = [UIImage imagenamed:@ "Button_star_white"];
}
. . .
(5 ImageView the same way, again not one to repeat)
Well, speaking of the above steps, click on the star rating, it can be achieved, but, said, this method is very stupid, because the duplication of code too much, but also does not support sliding. Let me introduce the second method.

Method Two (this method is relatively advanced, but definitely not superlative, I believe, excellent Manu, talented)

Train of thought: iOS Touchesbegan and touchesmoved two methods can get to the UIView on the click of the coordinates and sliding coordinates, according to the coordinates, the ImageView located at the left of the x-coordinate is set to "button_star_red", the right side is set to "Button_star_red".

Step one: Add a uiview on the Uiviewcontroller (two ways, drag directly or create in the ". M" File code, drag here directly) to name: Myview,width is 6 times times the width of the stars (a total of 5 stars, to ensure that 0 points), Heigh is the height of the stars

@property (Weak, nonatomic) Iboutlet UIView *myview;

Step Two: Add ImageView to the MyView, initialize the stars to "Button_star_white", and add them to the array in order to facilitate later traversal to change the color of the Stars, code as follows:

Uiimageview *imageview;
for (int i = 0; i < 5; i++) {
ImageView = [[Uiimageview alloc] initwithimage:[uiimage imagenamed:@ "Button_star_white"]];
Imageview.frame = CGRectMake (_myview.bounds.origin.x+ (i+1) *24), _MYVIEW.BOUNDS.ORIGIN.Y, 24, 24);
[_myview Addsubview:imageview];
[_allstar Addobject:imageview];
}

Step three: Get the coordinates of the click Live Slide, according to the coordinates, place coordinates x with the left star as "Button_star_white" (the width and height of the stars are 24)

#pragma mark-click on the coordinates
-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
Uitouch *touch = [touches anyobject];
Cgpoint touchpoint = [Touch Locationinview:_myview];
Uiimageview *im;
for (int i = 0;i < 5; i++) {
im = _allstar[i];
NSLog (@ "_all[%i] = (%f,%f)", I,IM.FRAME.ORIGIN.X,IM.FRAME.ORIGIN.Y);
if ((Touchpoint.x > 0) && (Touchpoint.x < 144) && (Touchpoint.y > 0) && (Touchpoint.y < 24)) {
NSString *myscore = [NSString stringwithformat:@ "score is:%i", ((int) touchpoint.x)/24];
_score.text = Myscore;//_score is a uilable,myscore for fractions, shown in the show to the user, about this not to repeat
if (im.frame.origin.x > Touchpoint.x) {
Im.image =[uiimage imagenamed:@ "Button_star_white"];
}else{
Im.image =[uiimage imagenamed:@ "button_star_red"];
}
}
}
}
#pragma mark-sliding coordinates
-(void) touchesmoved: (Nsset *) touches withevent: (uievent *) event{
Uitouch *touch = [touches anyobject];
Cgpoint touchpoint = [Touch Locationinview:_myview];
Uiimageview *im;
for (int i = 0;i < 5; i++) {
im = _allstar[i];
NSLog (@ "_all[%i] = (%f,%f)", I,IM.FRAME.ORIGIN.X,IM.FRAME.ORIGIN.Y);
if ((Touchpoint.x > 0) && (Touchpoint.x < 144) && (Touchpoint.y > 0) && (Touchpoint.y < 24)) {
NSString *myscore = [NSString stringwithformat:@ "score is:%i", ((int) touchpoint.x)/24];
_score.text = Myscore;//_score is a uilable,myscore for fractions, shown in the show to the user, about this not to repeat
if (im.frame.origin.x > Touchpoint.x) {
Im.image =[uiimage imagenamed:@ "Button_star_white"];
}else{
Im.image =[uiimage imagenamed:@ "button_star_red"];
}
}
}
}

How about, with the first method, the second method is more intelligent and the process clearer. Attentive readers will find that the second way of scoring can also support decimals

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.