fuzionpro

Posted: 16 Dec 2013 09:54 AM PST

In an iOS Applications, showing a loading or activity indicator is an integral part of applications development.

Showing an indicator while loading a content or fetching data from server engages user in a more comprehensive way.

In this tutorial, We are going to discuss about implementing the iOS 7 style loading indicator like the one shown below.

This kind of simple and elegant indicators makes an app compelling to use and gives the user refreshing feel.

Let’s get on to the track now and the good news is that is, I made this kind of loading indicators work in both iOS 6, 7 sdk’s .

It’s a very easy drag and drop component in to your project and you are good to go.

Download Source

Steps to Implement iOS 7 Style loading indicator

Step 1 :

Create a new file and subclass a UIView and name it as “RKiOS7Loading”

Step 2 :

Import the following frameworks in your project

<QuartzCore/QuartzCore.h>

<CoreGraphics/CoreGraphics.h>

Inorder to get the loading indicator as the one mentioned above. We need to set the line-width and tint colour of the indicator.

For now the line width is 1 and the color is blue (both customisable).

Declare in the RKiOS7Loading.h as shown in the snippet below.

#import <UIKit/UIKit.h>  #import <QuartzCore/QuartzCore.h>  #import <CoreGraphics/CoreGraphics.h>  #import "UIColor+iOS7.h"    @interface RKiOS7Loading : UIView    /**   * The width of the line used to draw the indicator view.   **/  @property (nonatomic, assign) CGFloat lineWidth;    /**   * The color of the indicator view   */  @property (nonatomic, strong) UIColor *tintColor;    /**   * Make the background layer to spin around its center. This should be called in the main thread.   */  - (void) startSpinProgressBackgroundLayer;    /**   * Stop the spinning of the background layer. This should be called in the main thread.   * WARN: This implementation remove all animations from background layer.   **/  - (void) stopSpinProgressBackgroundLayer;    // To show the indicator in the View  + (RKiOS7Loading *)showHUDAddedTo:(UIView *)view animated:(BOOL)animated ;    // To Hide the indicator in the View  + (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated ;    @end

Step 3 :

Now we are getting into the actual implementation of the above mentioned indicator.
Declare the CAShapeLayer (A class draws a cubic Bezier spline in its coordinate space) as a private instance to the class RKiOS7Loading.m

#import "RKiOS7Loading.h"    @interface RKiOS7Loading()  @property (nonatomic, strong) CAShapeLayer *progressBackgroundLayer;  @property (nonatomic, assign) BOOL isSpinning;  @end

Step 4 :

To display the indicator on the screen, the corresponding method helps you to achieve this

// To add the iOS7 Loading on to screen  + (RKiOS7Loading *)showHUDAddedTo:(UIView *)view animated:(BOOL)animated  {      // To initialise the class with the frame of your wish      RKiOS7Loading *hud = [[RKiOS7Loading alloc] initWithFrame:CGRectMake(40, 40, 60, 60)];      // Initially Set the hud instance to property hidden to NO       hud.hidden = NO;     // Set the image of your wish to display in the middle of the indicator      UIImageView *img = [[UIImageView alloc]initWithFrame:CGRectMake(15, 15,30,30)];      img.image =[UIImage imageNamed:@"apple_logo1"];      hud.center = img.center;      [hud addSubview:img];      [hud startSpinProgressBackgroundLayer];      [view addSubview:hud];    // Safer implementation to display indicator right in the centre of the view       float height = [[UIScreen mainScreen] bounds].size.height;      float width = [[UIScreen mainScreen] bounds].size.width;      CGPoint center = CGPointMake(width/2, height/2);      hud.center = center;      return hud;  }

- (id)initWithFrame:(CGRect)frame  {      self = [super initWithFrame:frame];      if (self) {      // Perform the Initial set up of out indicator          [self setup];      }      return self;  }    - (void)setup {        // To set the background color of the UIView and default is clear color      // Add more color if you wish to have       self.backgroundColor = [UIColor clearColor];      // Customise the Width of the cirle line and get the max of two      _lineWidth = fmaxf(self.frame.size.width * 0.025, 1.f);        // Set the tint color of the circle      _tintColor = [UIColor ios7TrueBlue];        //Round progress View      self.progressBackgroundLayer = [CAShapeLayer layer];      _progressBackgroundLayer.strokeColor = _tintColor.CGColor;      _progressBackgroundLayer.fillColor = self.backgroundColor.CGColor;      _progressBackgroundLayer.lineCap = kCALineCapRound;      _progressBackgroundLayer.lineWidth = _lineWidth;      [self.layer addSublayer:_progressBackgroundLayer];    }    - (void)drawRect:(CGRect)rect  {      // Make sure the layers cover the whole view      _progressBackgroundLayer.frame = self.bounds;    }    #pragma mark -  #pragma mark Drawing    - (void) drawBackgroundCircle:(BOOL) partial {      CGFloat startAngle = - ((float)M_PI / 2); // 90 degrees      CGFloat endAngle = (2 * (float)M_PI) + startAngle;      CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);      CGFloat radius = (self.bounds.size.width - _lineWidth)/2;        // Draw background      UIBezierPath *processBackgroundPath = [UIBezierPath bezierPath];      processBackgroundPath.lineWidth = _lineWidth;        // Recompute the end angle to make it at 90% of the progress      if (partial) {          endAngle = (1.8F * (float)M_PI) + startAngle;      }        [processBackgroundPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];      _progressBackgroundLayer.path = processBackgroundPath.CGPath;  }    - (void) startSpinProgressBackgroundLayer {      self.isSpinning = YES;      [self drawBackgroundCircle:YES];      //Add the animation corresponding to Z axis       CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];   // Increase the to value if you wish      rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0];      rotationAnimation.duration = 1;      rotationAnimation.cumulative = YES;      rotationAnimation.repeatCount = HUGE_VALF;      [_progressBackgroundLayer addAnimation:rotationAnimation forKey:@"rotationAnimation"];  }

To hide the indicator, the below method helps

// To hide the iOS7 Loading   + (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated {  	RKiOS7Loading *hud = [RKiOS7Loading HUDForView:view];      [hud stopSpinProgressBackgroundLayer];  	if (hud != nil) {  		//hud.hidden =YES;          [hud removeFromSuperview];  		return YES;  	}  	return NO;  }

// Method to search for the visible iOS7 loading and hide it  + (RKiOS7Loading *)HUDForView:(UIView *)view {  	RKiOS7Loading *hud = nil;  	NSArray *subviews = view.subviews;  	Class hudClass = [RKiOS7Loading class];  	for (UIView *aView in subviews) {  		if ([aView isKindOfClass:hudClass]) {  			hud = (RKiOS7Loading *)aView;  		}  	}  	return hud;  }

- (void) stopSpinProgressBackgroundLayer {      [self drawBackgroundCircle:NO];      [_progressBackgroundLayer removeAllAnimations];      self.isSpinning = NO;  }

Step 5 :

To visualise the indicator what we have developed above , Create the “ViewController. h” and “ViewController.m” along with the XIB.
Just Import “RKiOS7Loading.h” it into the .h of the ViewController class and add single line of code in the .m of the ViewController class.

//To show the Indicator   [RKiOS7Loading showHUDAddedTo:self.view animated:YES];

BINGO!!!!! Output for both iOS 7 and IOS 6 is shown below.

To hide the indicator, again single line of code.

[RKiOS7Loading hideHUDForView:self.view animated:YES];

Customise the loading indicator as you wish by adding different images like the one shown below.

That’s it from this tutorial and see you again with more amazing stuff.

Download Source

The post iOS 7 Style Loading indicator appeared first on Fuzionpro.

fuzionpro

fuzionpro

Steps to Implement iOS 7 Style loading indicator

Next

Newer Post

Previous

Older Post