2

I am trying to add an activity indicator on top of my table view such that it is appearing in the center of the screen in both portrait and landscape mode.

The activity indicator is placed inside a view which is a subview of the main view. The table view is included via a view container in the main view.

When I click "Add Missing Constraints", the indicator gets a Center Y alignment constraint and a Horizontal space (141) constraint. As expected this makes things look just fine in portrait mode, but in landscape mode the activity indicator appears to the left instead of being horizontally centered.

I have tried to change the Horizontal space constraint to a Center X alignment constraint, but that does not seem to make the situation any better.

Any suggestions?

enter image description here

Here is a close up:

enter image description here

Stine
  • 1,605
  • 5
  • 23
  • 44
  • 2
    Just set constraints --> Center Y alignment and Center X alignment to 0 – Jen Jose May 26 '15 at 06:22
  • Maybe I am not doing that right, but it just seems to make the spinner appear on the left edge of the screen. – Stine May 26 '15 at 06:24
  • remove the horizontal alignment constraint and just set it as CenterX and centerY – Jen Jose May 26 '15 at 06:25
  • just check this....http://stackoverflow.com/questions/29484522/horizontal-center-constraint-issue-in-ios/29485222#29485222 .. insted of activity indicator ...i just used button...and make center y and X to 0 – Bhavin Bhadani May 26 '15 at 06:27
  • In the image you have posted I see there is a Spinner View. Is it a UIView ? and is Spinner a UIActivity Indicator ? – Jen Jose May 26 '15 at 08:30
  • Yes. I placed the the activity indicator inside this full screen view in order to cover the UITableView such that it is not clickable or scrollable when the spinner is animating. – Stine May 26 '15 at 09:33
  • what are the constraints on this full screen view Spinner View? – Jen Jose May 26 '15 at 09:53
  • I have added a picture which more clearly shows the constraints :) – Stine May 26 '15 at 11:19
  • did you try my answer ? In the close-up image, Horizontal Space (141)- Spinner-SpinnerView is causing this issue – Jen Jose May 26 '15 at 11:31

7 Answers7

4

--> First, add the Spinner View (the yellow one as in screenshot)

Select it and set constraints as in

enter image description here

Pin it to all the four edges

--> Secondly add the Activity Indicator.

Select it and set constraints as in

enter image description here

Center X and Center Y = 0

If there is any warning of Misplaced Views, select "Resolve Auto Layout Issues" !

In the end the constraints look like this

enter image description here

Community
  • 1
  • 1
Jen Jose
  • 3,995
  • 2
  • 19
  • 36
  • I followed your guidelines and now my spinner is in the center - always! Thank you so much! So guess "Add Missing Constraints" is now always the way to go? I did click the "Add Missing Constraints" for the View Container though. – Stine May 26 '15 at 12:20
  • I find it very confusing how to approach constraints. Well, thanks! :) – Stine May 26 '15 at 12:23
  • 1
    Mention not! once you understand the way Constraints work , its fun ! Happy Coding :) – Jen Jose May 26 '15 at 12:25
2

If you want to do this with programmatically then in your controller class:

self.activityIndicatorObject.center = self.view.center;

EDITED:

May be you can try this : 

self.activityIndicatorObject.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2.0, [UIScreen mainScreen].bounds.size.height/2.0);
byJeevan
  • 3,728
  • 3
  • 37
  • 60
2

SWIFT 3.2

try this

self.activityIndicator.center = CGPoint(x:self.view.bounds.size.width/2.0,y: self.view.bounds.size.height/2.0);

activityIndicator.autoresizingMask = (UIViewAutoresizing(rawValue: UIViewAutoresizing.RawValue(UInt8(UIViewAutoresizing.flexibleRightMargin.rawValue) | UInt8(UIViewAutoresizing.flexibleLeftMargin.rawValue) | UInt8(UIViewAutoresizing.flexibleBottomMargin.rawValue) | UInt8(UIViewAutoresizing.flexibleTopMargin.rawValue))))
Shishir Umrao
  • 59
  • 8
1

Take a look at your constraints. It seems like you need the center x alignment on your spinner view.

EDIT

To save some confusing constraint issues, I would suggest you to place the spinner programmatically instead. You can disable your tableview, when it's loading, with userInteractionEnabled set to NO.

// Set up your spinner
UIActivityIndicatorView * spinner = [[UIActivityIndicatorView alloc] init];
[spinner setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhiteLarge];
[spinner setHidesWhenStopped:YES];
[spinner setCenter:self.view.center];
[spinner startAnimating];
[self.view addSubview:spinner];

// disable your tableView
tableView.userInteractionEnabled = NO;
Simon Degn
  • 901
  • 1
  • 12
  • 40
  • The constraints are added by pressing "Add Missing Constraints". The constraints you are mentioning are positioning the spinner inside its view... – Stine May 26 '15 at 07:56
  • 1. It's impossible for us to guess what the "Spinner View" is. Size, constraints etc. 2. "Add Missing Constraints" will set the constraints for you so that they fit the frames as they are placed on your storyboard. That's almost never how you want them to be if you are making a responsive or/and rotate-friendly design. 3. Why is the spinner placed on a "Spinner View"? – Simon Degn May 26 '15 at 08:05
  • Spinner View is just a plain UIView. I placed the activity indicator inside this full screen view in order to cover the UITableView such that it is not clickable or scrollable when the spinner is animating. – Stine May 26 '15 at 09:45
  • @Stine take a look at my edits. Hope that helps.. :-) – Simon Degn May 26 '15 at 09:58
0

I have added Activity Indicator via storyboard and assign

  • top space to superview
  • centre x alignment

It show me the indicator in centre of the screen for both portrait and landscape mode. Please try this. Hope it works for you. Thanks

Neha Gupta
  • 157
  • 4
0
Your constraints are having problem, i have done the same thing in sample,
please take a look and try to set constraints accordingly, 
it would fix the problem. I have attached a snapshot for constraints.

enter image description here

No other problem in code only constraints issue. Good luck.

Dipen Panchasara
  • 13,480
  • 5
  • 47
  • 57
  • Would be grateful if you could maybe add a close up of the left side of your picture such that I can see the constraints in more detail? :) Thanks a lot! – Stine May 26 '15 at 10:36
  • I am not able to add constraints myself it seems... everything is handled by auto layout? – Stine May 26 '15 at 10:37
  • @Stine in given example i am using `Auto Layout`. i have manually set constraints, in your case may be some other constraints would be creating conflicts. `To view this image in full screen right click and open in new tab` :) Happy coding. – Dipen Panchasara May 26 '15 at 10:40
  • I feel I have done the exact same thing as you when creating my Spinner View... but my constraints just keep looking strange :( I am following advice 3 of this answer btw: http://stackoverflow.com/questions/14689805/how-to-put-buttons-over-uitableview-which-wont-scroll-with-table-in-ios/28727446#28727446 – Stine May 26 '15 at 11:15
  • @Stine as i can see there is no other control but you have added lots of constraints to it. Kindly reset all constraints/delete and add only 2 required constraints. As there is no other control except indicator, 2 constraints would do the job.. – Dipen Panchasara May 26 '15 at 11:41
  • If I manually remove the Spinner View constraints and add the Center X with constant 0 constraint to the Spinner, then the Spinner appears on the left hand edge of the screen and my table view stops to adjust correctly in landscape mode. Guess I just have to forget about the View Container approach... – Stine May 26 '15 at 12:01
  • @Stine you need to add Center X and Y both, dont add constant value for it. – Dipen Panchasara May 26 '15 at 12:57
0

@Stine I don't know that you got the answer or not. But try the following in the storyboard. In my case, it is worked.

In storyboard set the vertical and horizontal alignments for the activity indicator view. And after that set, the width and height constraints in the Add New Constraints.

enter image description here

After that

enter image description here

Here is the final result in portrait and landscape modes

For Portrait:

enter image description here

For Landscape:

enter image description here

Ramakrishna
  • 712
  • 8
  • 26