简体   繁体   中英

UIButton inside UIVIew not centered in iPhone app

I'm actually setting a custom UIView programmatically that will contain several UIButton and this is working fine. But what I'm trying to do is to center a UIButton inside a sub-custom UIView that I've created programmatically. Here is the code I'm actually using

//UIView used as a parent for the blurrEffectView
blurredPowerDown = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];
                    blurredPowerDown.backgroundColor = [UIColor clearColor];

                    //I'm calling this for applying my custom view on top of other application (yes this is jailbreak development but issue is not related at it at all
                    window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
                    window.windowLevel = UIWindowLevelAlert + 2;
                    [window setHidden:NO];
                    [window setAlpha:1.0];
                    [window setBackgroundColor:[UIColor clearColor]];
                    [window addSubview:blurredPowerDown];

                    //Code to get blur depending of what is behind the view
                    blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
                    blurEffectView = [[UIVisualEffectView alloc]initWithEffect:blur];
                    blurEffectView.frame = blurredPowerDown.bounds;
                    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
                    [blurEffectView setAlpha:0.0];
                    [blurredPowerDown addSubview:blurEffectView];

                    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{

            [blurEffectView setAlpha:1.0];

            }
            completion:^(BOOL finished) {

            }];

                    //This is the view I use to center all the button that I will add (in red on the following picture)
                    centerView = [[UIView alloc] init];
                    [centerView setTranslatesAutoresizingMaskIntoConstraints:NO];
                    centerView.backgroundColor = [UIColor redColor];

                    [blurEffectView addSubview:centerView];

                    [blurEffectView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:blurEffectView
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:0.7
                                                       constant:0]];

                    [blurEffectView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:blurEffectView
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:0.5
                                                       constant:0]];


                    [blurEffectView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:blurEffectView
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1.0
                                                       constant:0.0]];


                    [blurEffectView addConstraint:[NSLayoutConstraint constraintWithItem:centerView
                                                      attribute:NSLayoutAttributeCenterY
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:blurEffectView
                                                      attribute:NSLayoutAttributeCenterY
                                                     multiplier:1.0
                                                       constant:0.0]];

                    //And this is the button that cause me issue
                    UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
                    [cancelButton addTarget:self action:@selector(cancelView) forControlEvents:UIControlEventTouchUpInside];
                    [cancelButton setTitle:@"Cancel" forState:UIControlStateNormal];
                    cancelButton.frame = CGRectMake(0, 0, 80, 80);
                    cancelButton.clipsToBounds = YES;
                    cancelButton.layer.cornerRadius = 80/2.0f;
                    cancelButton.layer.borderColor=[UIColor whiteColor].CGColor;
                    cancelButton.layer.borderWidth=2.0f;


                    [centerView addSubview:cancelButton];

                    //Constraints removed as per UditS suggestion
                    [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:centerView
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:0]];

                    [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:centerView
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:1.0
                                                       constant:0]];


                    [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:centerView
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1.0
                                                       constant:0.0]];


                    [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                      attribute:NSLayoutAttributeCenterY
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:centerView
                                                      attribute:NSLayoutAttributeCenterY
                                                     multiplier:1.0
                                                       constant:0.0]];

Here is the screenshot of what it do

在此输入图像描述

I really don't understand why my UIButton always stay in the top left (like if it has no placement constraints but I have added them !)

I'm really desperated !

Thanks in advance for your help

EDIT: If I set cancelButton.center = centerView.center; here is what I get:

在此输入图像描述

EDIT2: As suggested, I've set cancelButton.translatesAutoresizingMaskIntoConstraints = NO; but here is the result:

在此输入图像描述

EDIT3: we advance ^^ thanks to @UditS suggestion (delete the height and width constraints) the button is centered but now the border is very strange

在此输入图像描述

You should disable translation autoresizingMask to constraints for your button:

cancelButton.translatesAutoresizingMaskIntoConstraints = NO;

ADDITION: If you want to set width and height of button to 80px, you should replace 2 first constraints for cancelButton on these:

[cancelButton addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:nil
                                                       attribute:NSLayoutAttributeNotAnAttribute
                                                      multiplier:1.0
                                                        constant:80]];

[cancelButton addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                         attribute:NSLayoutAttributeHeight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:nil
                                                         attribute:NSLayoutAttributeNotAnAttribute
                                                        multiplier:1.0
                                                          constant:80]];

The problem may be with your CenterY constraint, as in your code you are making cancelButton 's CenterY Equal to centerView 's CenterX.

So in place of

                [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeCenterY
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:centerView
                                                  attribute:NSLayoutAttributeCenterX
                                                 multiplier:1.0
                                                   constant:0.0]];

You should have

                [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeCenterY
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:centerView
                                                  attribute:NSLayoutAttributeCenterY
                                                 multiplier:1.0
                                                   constant:0.0]];

As per your edit after setting

cancelButton.translatesAutoresizingMaskIntoConstraints = NO;

the button will take full width and height of the centerView because you are setting it so through the following constraints

                [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeWidth
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:centerView
                                                  attribute:NSLayoutAttributeWidth
                                                 multiplier:1.0
                                                   constant:0]];

                [centerView addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeHeight
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:centerView
                                                  attribute:NSLayoutAttributeHeight
                                                 multiplier:1.0
                                                   constant:0]];

Remove these contraints and add contraints for constant height and width of the button.

As per Edit 3 , try adding width and height constraint to the button.

                [cancelButton addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeWidth
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:nil
                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                 multiplier:1.0
                                                   constant:80.0]];

                [cancelButton addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeHeight
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:nil
                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                 multiplier:1.0
                                                   constant:80.0]];

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM