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:

Answer 2

Simple steps: append circle to container view, resize container view, center align container view

-(void)addToContanerView:(CircleView*)circle{

    circle.rect.frame = CGrectMake(containers_end,container_y,no_change,no_change);
    [containerView addSubview:circle];
    [containerView sizeToFit];
    containerView.center = self.view.center;
}

Assumptions: containers_end & containers_y you can get from CGRectMax function, for UIView SizeToFit method check here

To take care of rotation use make sure your Autoresizing subviews are set for left, right bottom and top margin.

Answer 3

You can try using this library. I have used it on several of my projects and so far, it worked really well.

https://github.com/davamale/DMHorizontalView