How do you set a button (created with code) to conform to AutoLayout?

I have a button that was created to show Album Artwork in my app. The problem is how do I get this button to stay in the same area of the screen with different devices? All my other buttons are created with Auto Layout in Interface Builder.

Accepted Reply

As I mentioned in another post "how do I set a UIImageView to Safe Area Guides in C", the answer is that you create the UIButton in the normal manner with "initWithFrame: CGRectMake ( )". You add your constraints latter after the button has already been created.


< UIButton *yourbuttonItem = [[UIButton alloc] initWithFrame: CGRectMake (0, 0, 30, 30)];

yourbuttonItem.backgroundColor= [UIColor greenColor];

yourbuttonItem.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:yourbuttonItem];

[[yourbuttonItem.rightAnchor constraintEqualToAnchor:self.view.rightAnchor constant:-7] setActive:YES];

[[yourbuttonItem.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor constant:-10] setActive:YES];


[yourbuttonItem setBackgroundImage: buttonImage forState: UIControlStateNormal];

[self.view addSubview:yourbuttonItem];

[yourbuttonItem setEnabled: YES]; >



Hope this helps!!

Replies

You can 'roll your own' auto layout using code like:


    float screenWidth=self.view.bounds.size.width;
    float screenHeight=self.view.bounds.size.height;
    float leftEdge=screenWidth/2 - myUIComponent.frame.size.width/2;   
     float topEdge=30;
     myUIComponent.frame=CGRectMake(leftEdge,topEdge,myUIComponent.frame.size.width,myUIComponent.frame.size.Height);

     anotherUIComponent.center=CGPointMake(screenWidth/2,screenHeight/2);

What is "the same area" in your case ?


Can't you define it relative to view edges ? If so, auto layout will handle it.

Yes I want to "pin it" to the bottom of the screen the the right edge of the screen. But I can't use auto layout because the button is created programmatically. The button get the Album Artwork for the music that is selected by the user. I need it to stay close to the bottom edge of the screen the the right edge of the screen.

I should clarify, the bottom edge "Safe Area".

So the buttonWidth and the buttonHeight are known. The origin is then

self.view.bounds.size.width-buttonWidth-safeAreaInsets.right (I think 'right')

self.view.bounds.size.height-buttonHeight-safeAreaInsets.bottom

theButton.frame=

CGRectMake(self.view.bounds.size.width-buttonWidth-safeAreaInsets.right,

self.view.bounds.size.width-buttonWidth-safeAreaInsets.bottom,

buttonWidth,buttonHeight);


and be sure to do this after the screen is laid out. viewWillAppear is ok, viewDidLoad is not.

Even if button is created programmatically, you can also create constraints programmatically.


var myButton: UIButton!

fileprivate weak var buttonTrailing: NSLayoutConstraint?


and then, in viewDidLoad


buttonTrailing = NSLayoutConstraint(item: myButton, attribute: .triling, relatedBy: .equal, toItem: myButton.superview, attribute: .trailing, multiplier: 1.0, constant: 10) // At 10 from the right edge ; if relative to safe area, have to change myButton.superview ;

see h ttps://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html



Or compute the position as PBK explained, which may be simpler !.

As I mentioned in another post "how do I set a UIImageView to Safe Area Guides in C", the answer is that you create the UIButton in the normal manner with "initWithFrame: CGRectMake ( )". You add your constraints latter after the button has already been created.


< UIButton *yourbuttonItem = [[UIButton alloc] initWithFrame: CGRectMake (0, 0, 30, 30)];

yourbuttonItem.backgroundColor= [UIColor greenColor];

yourbuttonItem.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:yourbuttonItem];

[[yourbuttonItem.rightAnchor constraintEqualToAnchor:self.view.rightAnchor constant:-7] setActive:YES];

[[yourbuttonItem.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor constant:-10] setActive:YES];


[yourbuttonItem setBackgroundImage: buttonImage forState: UIControlStateNormal];

[self.view addSubview:yourbuttonItem];

[yourbuttonItem setEnabled: YES]; >



Hope this helps!!

You have marked the correct answer, so that means you have found the answer, that's OK, the thread is closed.