Search code examples
iosobjective-calignmentuistackview

UIStackView isn't aligning itself to center? obj-c


edit solution was to add them to a vertical stack view, thanks to the user below who provided that solution !

So I'm pretty new and managed to create a UIStackView, but it isn't centering in my view properly (it's aligned to the left and I'm not sure how to fix it.)

This is what my code looks like, if someone could help me figure out a) why it isn't spanning the width of the entire screen, or b) how I can center the stackview on the screen.

I have been using a workaround to fake a centered look by setting the spacing equal to whatever the leftover space is, but I think if I could just center the entire UIStackView this would not be necessary

Most of this code is hacked together so it may be something simple that I am overlooking something? idk, will keep fiddling around with it, but maybe a set of more experienced eyes can give it a look while i do that, I'd appreciate it

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(id)reuseIdentifier specifier:(id)specifier {

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier specifier:specifier];



    if (self) {
/*
     CGFloat width = [UIScreen mainScreen].bounds.size.width;
     CGFloat leftover = (width - (4 * 70)); //4 = number of buttons, 70 = width of buttons, is usually constant
     CGFloat newspacing = leftover/3; //3 is equal to total number of spacers needed
how i currently workaround the issue*/

//buttons declared here but omitted to save space

//Stack View
   UIStackView *stackView = [[UIStackView alloc] initWithFrame:self.bounds];
    [stackView setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
    [stackView setAutoresizingMask:UIViewAutoresizingFlexibleHeight];
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionEqualSpacing;
    stackView.alignment = UIStackViewAlignmentCenter;
    stackView.spacing = 5;//newspacing; //fills up leftover space..

 [stackView addArrangedSubview:bugbutton];
 [stackView addArrangedSubview:paypalbutton];
 [stackView addArrangedSubview:btcbutton];
 [stackView addArrangedSubview:musicbutton];

 stackView.translatesAutoresizingMaskIntoConstraints = false;

 [self addSubview:stackView];
}



return self;
}

Solution

  • Are you just wanting to center the stackview in the cell? I don't know if I am sure what you are trying to do. You can do it 2 different ways. Edit: Try nesting the stack views to get the layout you want. I hope I get the syntax right.

    UIStackView *stackView = [[UIStackView alloc] initWithFrame:self.bounds];
    
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionFillProportionally;
    stackView.alignment = UIStackViewAlignmentCenter;
    stackView.spacing = 5;//newspacing; //fills up leftover space..
    
    [stackView addArrangedSubview:bugbutton];
    [stackView addArrangedSubview:paypalbutton];
    [stackView addArrangedSubview:btcbutton];
    [stackView addArrangedSubview:musicbutton];
    
    
    
    
    UIStackView *verticalstackView = [[UIStackView alloc] initWithFrame:self.bounds];
    verticalstackView.axis = UILayoutConstraintAxisVertical;
    verticalstackView.distribution = UIStackViewAlignmentFill;
    verticalstackView.alignment = UIStackViewAlignmentCenter;
    
     vericalstackView.autoresizingMask = (UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)
    
    [verticalstackView addArrangedSubview:stackView];
    [self addSubview:verticalstackView];
    

    The horizontal stack goes into the vertical stack which lets it adjust to center.