Horizontally center multiple UIViews

Question

I want to horizontally center a number of UIViews (they happen to be circles) in the master UIView. It will end up basically looking like the dots on the standard Page Control.

I have all the code written to create the circle UIViews I just have no idea how to arrange them horizontally and dynamically at run time.

Essentially I need some kind of horizontal container where I can do this

-(void)addCircle{
  [self addSubView:[CircleView init]];
}

And it will auto arrange however many children it has in the center.

Answer 1

I get confused with auto-layout as well from time to time but here is a way how you can do it programmatically: (I assume that you add your circle views to a containerView property of your view controller and you do not add any other views to it.)

1. Add these two properties to your view controller:

   @property (nonatomic) CGRect circleViewFrame;
   @property (nonatomic) CGFloat delta;
   

2. Initiate those properties with the desired values in your view controller's viewDidLoad method:

   // the size (frame) of your circle views
   self.circleViewFrame = CGRectMake(0, 0, 10, 10);
   // the horizontal distance between your circle views
   self.delta = 10.0;
   

3. Now we add your "automatic addCircle method":

   - (void)addCircleView {
     UIView *newCircleView = [self createCircleView];
     [self.containerView addSubview:newCircleView];
     [self alignCircleViews];
   }
   

4. Of course we need to implement the createCircleView method...

   - (UIView*)createCircleView {
     // Create your circle view here - I use a simple square view as an example
     UIView *circleView = [[UIView alloc] initWithFrame:self.circleViewFrame];
     // Set the backgroundColor to some solid color so you can see the view :)
     circleView.backgroundColor = [UIColor redColor];
   
     return circleView;
   }
   

5. ... and the alignCircleViews method:

   - (void)alignCircleViews {
     int numberOfSubviews = [self.containerView.subviews count];
     CGFloat totalWidth = (numberOfSubviews * self.circleViewFrame.size.width) + (numberOfSubviews - 1) * self.delta;
     CGFloat x = (self.containerView.frame.size.width / 2) - (totalWidth / 2);
   
     for (int i = 0; i < numberOfSubviews; i++) {
         UIView *circleView = self.containerView.subviews[i];
         circleView.frame = CGRectMake(x,
                                 self.circleViewFrame.origin.y,
                                 self.circleViewFrame.size.width,
                                 self.circleViewFrame.size.height);
         x += self.circleViewFrame.size.width + self.delta;
     }
   }
   

This is the most important method which will automatically realign all your subviews each time a new circleView is added. The result will look like this: