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.

I have constraints enabled but I find them extremely counter intuitive compared to, well, ever other technology I've used lol. I was hoping someone could advise the best way to do it as I literally have no idea where to start... — Chris, Oct 29 '13 at 22:40

Mischa · Accepted Answer · 2013-10-30T17:24:43.923

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.)

Add these two properties to your view controller:

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

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;

Now we add your "automatic addCircle method":

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

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;
}

... 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:

sample view controller with 3 horizontally centered subviews sample view controller with 8 horizontally centered subviews

Hey Mischa, I havent had chance to test this yet but looks very promising thankyou! — Chris, Oct 30 '13 at 09:30
Good answer. I translated it to Swift so I can use it in my Swift app. The Swift code can be found here: http://pastebin.com/aCeKmdeM — Apfelsaft, Sep 01 '14 at 09:31

score 0 · Answer 2 · edited May 23 '17 at 12:14

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.

score 0 · Answer 3 · answered Apr 12 '16 at 02:28

0

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

answered Apr 12 '16 at 02:28

dmlebron

861
6
16

Horizontally center multiple UIViews

3 Answers3