In Android, the Loading indicator system provides us with ProgressDialog, which was abandoned later. It is recommended to use ProgressBar directly to display the ProgressBar, but its style often conflicts with the designer’s requirements, so we need to customize it. IOS provides UIActivityIndicatorView to indicate Loading state, and it’s pretty nice.

Indicator creation

UIActivityIndicatorView is a View, we instantiate it and add it to the View of the ViewController.

  • Indicator style

Indicator alloc, need to be initialized by initWithActivityIndicatorStyle, need to pass in a style enumeration, enumerated values has the following three:

Typedef NS_ENUM (NSInteger UIActivityIndicatorViewStyle) {UIActivityIndicatorViewStyleWhiteLarge, / / large, White UIActivityIndicatorViewStyleWhite, / / small, white UIActivityIndicatorViewStyleGray, / / trumpet, grey};Copy the code
  • Indicator creation

Lazy loading mode, initializes the indicator, and sets the indicator to display in the middle of the controller. Note that by default, there is only one chrysanthemums turning, and the black background and rounded corners need to be set yourself.

@interface ViewController () @property(nonatomic, strong) UIActivityIndicatorView *activityIndicator; @end@implementation ViewController /** * lazy load initialization UIActivityIndicatorView */ - (UIActivityIndicatorView *)activityIndicator {if(_activityIndicator = = nil) {/ * * * create indicator, and set up the style * UIActivityIndicatorViewStyleWhiteLarge, large size, * UIActivityIndicatorViewStyleGray * UIActivityIndicatorViewStyleWhite white, small, white, small size, */ _activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]; // Set position and width of indicator _activityIndicator. Frame = CGRectMake(0, 0, 100, 100); _activityIndicator. Center = CGPointMake(self.view.center. X, self.view.center. _activityIndicator.backgroundColor = [UIColor blackColor]; / / set the background rounded _activityIndicator. Layer. The cornerRadius = 8; }return _activityIndicator;
}
Copy the code
  • Set the indicator to be hidden at first (by default, it is displayed at first and does not rotate)
- (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.activityIndicator]; / / set the hidden at the end of the rotation, the default value is NO, enter the interface will show, and chrysanthemum lap motionless, set to YES, then don't show at the beginning, stops will hide self. ActivityIndicator. HidesWhenStopped = YES; }Copy the code

Style development

  • Chrysanthemum circle can be set color, iOS5 added Api
self.activityIndicator.color = [UIColor redColor];
Copy the code

The basic use

The indicator is used to represent the Loading state, so there are only three commonly used methods: show, hide, and check whether the indicator is showing.

  • Display indicator
/** * - (void) showIndicator {[self.activityIndicator startAnimating]; }Copy the code
  • Hidden indicator
/** * - (void) hideIndicator {[self.activityIndicator stopAnimating]; }Copy the code
  • Check whether the display is in progress
*/ - (BOOL) isShowIndicator {return [self.activityIndicator isAnimating];
}
Copy the code

The sample

@interface ViewController () @property(nonatomic, strong) UIActivityIndicatorView *activityIndicator; @end @implementation ViewController //... /** * Click on the blank area of the screen to display the indicator, */ - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {//if ([self isShowIndicator]) {
        return; } [self showIndicator]; [the self performSelector: @ the selector (hideIndicator) withObject: nil afterDelay: 1.5]; } @endCopy the code