Star Rating in iPhone using UITouch




If you have an application in which you want to take user reviews and want to provide a star rating, you are in a big trouble cause Cocoa Touch (iPhone) does not provide any UIControl for it.
You have to create your own control for this using touch detection or gesture recognition.

In following tutorial i have detected point of touch for achieving my goal.

1. Here i have added a UIView - viewForStarRating on which i placed 5 UIImageViews - imgViewStar1, imgViewStar2, imgViewStar3, imgViewStar4 and imgViewStar5 on my Nib file and set outlet to each.
2. Declare two CGPoints - touchStartPoint and touchCurrentPoint, these CGPoints will give me my touch coordinates.
3. In my implementation file i added touchesBegan and touchesMoved delegate methods.
4. In touchesBegan delegate :
   UITouch *touch = [touches anyObject];
   self.touchStartPoint = [touch locationInView:self.viewForStarRating];
   NSLog(@"Touch detected at: x = %f and y = %f",self.touchStartPoint.x,self.touchStartPoint.y);

5. This self.touchStartPoint.x and self.touchStartPoint.y will give me my initial x & y coordinates of touch in self.viewForStarRating.
6.  In touchesMoved delegate :
        UITouch *touch = [touches anyObject];
    self.touchCurrentPoint = [touch locationInView:self.viewForStarRating];
    
    //NSLog(@"Touch is currently at: x = %f and y = %f",self.touchCurrentPoint.x,self.touchCurrentPoint.y);
    int leftSpace = 20;
    if (self.touchCurrentPoint.x <= leftSpace + 5) {
        [self.imgViewStar1 setImage:[UIImage imageNamed:@"StarEmpty.png"]];
    } else if (self.touchCurrentPoint.x >= leftSpace + 15 && self.touchCurrentPoint.x <= leftSpace + 25) {
        [self.imgViewStar1 setImage:[UIImage imageNamed:@"StarHalf.png"]];
    } else if (self.touchCurrentPoint.x >= leftSpace + 35) {
        [self.imgViewStar1 setImage:[UIImage imageNamed:@"StarFull.png"]];
    }
7. As you can see in above point i have taken a leftSpace which is nothing but the padding space between x coordinate of self.viewForStarRating and self.imgViewStar1.
8. Above code will detect the touch points and will act by changing image in self.imgViewStar1.
9. I just applied a simple logic that if a user slides and leaves touch at initial point (in my case 5 px of self.imgViewStar1), set an empty star image.
10. If user slides till centre (in my case 15 to 25 px of self.imgViewStar1), set a half filled star image.
11. If user slides to end of star (in my case 35px of self.imgViewStar1), set full filled star image.









You can download sample code here: Star Rating

Comments

Post a Comment

Popular posts from this blog

UITableView - Add or Remove Rows Dynamically (Objective C & Swift Source codes)

Image
In some situations we need to add or remove rows dynamically from a UITableView. We can achieve it very easily, just got through the tutorial : 1. Create a new project. 2.  In AppDelegate implementation file create an object of UINavigationController (navController here). 3. Add object of UIViewController (viewController here) as rootviewcontroller of UINavigationController. 4. In ViewController.xib nib file take a UITableView. 5. Set delegate and datasource of UITableView to File's Owner. 6. Create an IBOutlet to UITableView (tableViewForScreen here) in ViewControler.h header file. 7. Declare an object of NSMutableArray (arrayForTableContent here) in ViewControler.h header file. 8. In ViewController.m file in viewDidLoad method set edit and add buttons as leftBarButtonItem and rightBarButtonItem respectively. 9. Initialize arrayForTableContent array and add objects to it.
Read more

payUmoney Payment Gateway Integration in iOS App (Objective C)

Image
We have many Payment Gateways available such as Paypal , CCAvenue , Zaakpay , etc. payUmoney is the best Payment Gateway available in India now; according to me. I am saying this with my personal experience with  payUmoney  Technical Support Team. They offer 2.9% Transaction charges without any Enrolment, Setup, AMC or other Hidden charges. payUmoney Home Page Link:  Home_Page payUmoney Contact Details:  Address:   5th Floor, Pearl Towers Plot 51, Sector 32 Gurgaon, 122002  Phone:   0124-6624956,  0124-6624970  Email:   techsupport@payumoney.com Steps to integrate payUmoney gateway: 1. Create a new iOS Objective C app in XCode. 2. Open Main.storyboard in you app. 3. Add UIWebView and set its Delegate. [Screenshot 1] 4. Set Frames & Constraints as per design requirements. 5. Link UIWebView by creating IBOutlet to either .h or .m file. [Screenshot 2] 6. Signup and create an account on payUmoney. Test Envirnment:  http://tes
Read more

Check Internet Connectivity Using AFNetworking 2.0

I have created  NetworkRechabilityMonitor class to get the Internet Connection status in my app using AFNetworking 2.0 library. 1. Create an NSObject class naming  NetworkRechabilityMonitor , add below code in respective Header & Implementation files.   NetworkRechabilityMonitor.h #import <Foundation/Foundation.h> @interface NetworkRechabilityMonitor : NSObject +( void )startNetworkReachabilityMonitoring; +( BOOL )checkNetworkStatus; @end NetworkRechabilityMonitor.m #import "NetworkRechabilityMonitor.h" @implementation NetworkRechabilityMonitor #pragma mark - Start Monitoring Network Manager +( void )startNetworkReachabilityMonitoring {     [[ AFNetworkReachabilityManager sharedManager ] startMonitoring ]; } #pragma mark - Check Internet Network Status +( BOOL )checkNetworkStatus {     return [ AFNetworkReachabilityManager sharedManager ]. reachable ; } @end 2.
Read more