Horizontally center multiple UIViews

Chris

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.

Mischa

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:

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Center two UIViews of different size horizontally

From Dev

How to center multiple buttons horizontally to the display size?

From Dev

how to horizontally center multiple div's in a parent div

From Dev

Align multiple divs in one line and center text vertically and horizontally

From Dev

JQuery mobile: Vertically and horizontally center multiple images using grid

From Java

How to horizontally center a <div>

From Dev

How to horizontally center an element

From Java

Center View horizontally in SwiftUI

From Dev

Issue to horizontally center a menu

From Java

Flexbox: center horizontally and vertically

From Dev

Center a group of views horizontally

From Dev

Center a table horizontally in a div

From Dev

Center items horizontally in a GridLayout

From Dev

horizontally center two divs

From Dev

center image vertically and horizontally

From Dev

Center vertically and horizontally simultaneously

From Dev

Center Mutt pager horizontally

From Dev

Center images horizontally

From Dev

Issue to horizontally center a menu

From Dev

Center Divs horizontally

From Dev

Center container horizontally and vertically

From Dev

Center DIV Horizontally and Vertically

From Dev

horizontally center my icons

From Dev

center image vertically and horizontally

From Dev

Center window horizontally and vertically

From Dev

Memory Management of multiple simple UIViews

From Dev

Memory Management of multiple simple UIViews

From Dev

How do I centre/center multiple objects vertically and horizontally in XCode's interface builder?

From Dev

What is the best practice: Multiple UIViews or Multiple UIViewControllers