Xcode Autolayout - Setting UIButton Width equal to view width - xcode

I have a view with one UIButton with width equal to superview width. It renders correctly for iPhone 4s,5s but for 6+ it renders as shown below. I have tried adding constraints "trailing space to" "leading space to" to make it end to end but its not working and being new to layout I am not able to figure out where I am going wrong. Any suggestion is appreciated.

There are for things you have to work out with when you use autolayout...i.e.
x position of object
Y position of object
Height of Object
Width of object
here is the image for your button constraints and how it works...
At the first stage where i pinned leading space,trailing space and height i.e gives button height, width and x position....
But still i need Y position... so i gave Horizontal and vertical center constraints....
instead of this you can use top space constrain or only use vertical constraint instead of both Horizontal and vertical center constraints for Y position....
and the output screen is

In your "Add new constraints" popup do following:
Disable "Constrain to margins" checkbox
Add left and right constraints, set constants to 0.
Add height constraint.
Click "Add 3 constraints"
That's it!

Related

How to fix scrollable content size ambiguity in xcode 11 using auto layout beta 7 UIKIT

When using Auto Layout, I am unable to set up a simple UIScrollView in my view controller in Xcode 11 beta 7. I know that I must constrain the scroll view to the edges, and then set the scroll view width and height equal to the width and height of the entire view that contains the scroll view. However, I am not getting the option to set equal widths and heights when I attempt to do so.
When I do the right-click-drag from the scroll view to the entire main view, I get the following options:
Leading Space to Safe Area
Top Space to Safe Area
Trailing Space to Safe Area
Bottom Space to Safe Area
Center Horizontally in Safe Area
Center Vertically in Safe Area
In other videos, there is an "Equal Widths" and "Equal Heights" option that I don't seem to have.
Am I doing something wrong, or did Apple change the way scroll views work in Xcode 11?
I'm using beta 7 currently
I was finally able to successfully add a UIScrollView using storyboards in Xcode Version 11.0 (11A420a) after much trial and error.
You can add the scroll view directly to the root UIView of the VC or, if you needed to, add it to another UIView under the root view as needed by your UI Design. Constrain the UIScrollView parents normally for whatever your needs are.
Here is the key : when you add the UIScrollView to the storyboard, click on the Size Inspector with the UIScrollView selected. You have to UNCHECK the box that says "Content Layout Guides".
If you do this you can set the scroll view's contraints normally (I did 0-0-0-0 to superview). Then I added a UIView to the scrollview and set it's constraints to 0-0-0-0 and a height of 900 (which is what I wanted).
This will give you constraint errors in red when you set them. They will be fixed by setting the width of the UIView equal to the width of the UIScrollView.
Set the UIView width equal to the width of the UIScrollView view by Ctrl-right clicking on the UIView, dragging to the UIScrollView, and selecting the "Equal Widths" option. This should get rid of your constraint errors.
You actually can then go back to the UISCrollView Size Inspector and check the "Content Layout Guides" checkbox, no constraint errors will appear.
Disable the content layout guides in scrollview properties.
Hope it helps.. :)

macOS-Resize many buttons with different width with Autolayout

I have some buttons have same height and different width. And every button's width might change with user's operation.
I tried to use NSStackView and two views(help to make StackView in the centre of super view.They be set have equal width).It looks like this:
But this solution can not resize of width of each button, and I hope I can set button frame size and have equal distribution spacing
And I will draw text and image to these button rather than use setTitlt: to set button's title.
Have any idea? Thanks
I solved this issue by myself by adding constraint programmatical.
This is my solution:
Can not use 'Equal' as a constraint to restrict button's width. Recommend use 'Less or equal' to restrict button's maximum width.
Calculating all button maximum width that all button had maximum status.
Add an NSView near the first and last button (On the left and on the right) respectively.
Set NSView constraint to Left and Right space to the nearest neighbor is zero, width and height could ignore it. And set both of these NSView to have 'Equal Width'.
Embed all buttons to an NSStackView and set it height.
Set 'Equal Height to Superview' constraint to all button. All buttons had same height with StackView and all buttons' width is same too.
In the code, you can add constraint when you want to resize button. Eg. [NSLayoutConstraint constraintWithItem:item attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:value];

Button with varying localized title with auto layout

I am looking into taking the plunge and use Auto Layout on an existing app. The interface has a button on the main window. The button changes its title depending on the state of the app. I plan to localize the app.
Since Auto Layout does not know (in the NIB) the length of the various titles that the button will adopt, how can I guarantee that the button will, for each localization, be sized in such a way that it will fit the longest-length title in each localization?
What is the right way to accomplish this? Many thanks.
You don't need to change much. You just add the alignment constraints whatever you added. Now give it width and height constraints and make them greater than equals to the minimum value you wanted. See this.
I have added center horizontal and vertical for alignment. This you can change to any. Now the width is here greater than equals to 42.0 and the height is greater than equals to 21.0 . Now if you just change the text of the button then it will increase its height and width according to that. You just need to call this line just after changing the text.
[self.view layoutIfNeeded];
Now you may have question that you want to limit the width and then increase height. Here is the solution. You give it width less than equals to max width and it will not increase the width more than that. See here.
Here my max width is 200.0. But make sure that if you are adding those layout constraints in iOS and it is a UILabel then than Lines is 0 and if it is a UIButton then the Line Break is Word Wrap or Character Wrap, but in OS X increasing height of NSButton depends on your button type.
If you have given constraints to your button, just remove it's fixed width constraint, button will automatically fit as per text's width.

How to make an item full width in auto layout constraint?

I'm trying to make a button full width in ios 9 storyboards, and am trying to create a width auto constraint, but the width constraint only seems to take an exact static number. How do I make the item go full width.
Additionally if I wanted say an imageview to be full height and adjustable width to maintain it's aspect ratio - or a size to fit fill, how would I do that with the auto layout constraints in the storyboard.
Should I be doing this programmatically in the view controller?
For the button:
In storyboard drag the left and right sides of the button to make it full width. Make sure the button is selected and add a pin constraint to the left and right (if you've dragged it full width the pin constraint should be equal to -20)
For the imageView:
The full height constraint is done almost exactly the same, although this time you need to drag the top and bottom to the top and bottom edges of the view controller and pin the top and bottom to their respective Layout guide.
You can make the image full screen in the view controller (pin top, bottom, left & right) and then edit the aspect ratio of the image in the Attributes inspector when the imageView is selected:
Hope that helps!

Flexible height with dynamic layout in Interface Builder

I'm new to the Dynamic Layout concept introduced in Cocoa applications with Lion 10.7.
I've been playing with some examples and almost all works as I expect. But, there is one thing I've been unable to get: Flexible Height in some elements.
I have one NSTextField element where I can set properly the following constraints:
Leading to trailing -> To keep it "near" to left and right border resizing its width.
Vertical space -> To keep it "near" to the previous vertical element.
I also set:
Vertical space -> To keep it "near" to the bottom border.
Height >= x -> With the previous one, to make its height "flexible" and adjustable to the view's height when resized.
When I test it, it works in the "horizontal axis" (location and size) but it doesn't allow me to resize the window's height (it's fixed).
If I delete the "Vertical space" constraint that attaches the NSInputText to the view's bottom, I can resize the window but the NSInpuntText's height remains unchanged.
Another annoying thing is that the "default" height constraint for the NSInputText (that on "pink" color) can't be deleted or modified. Whenever I do that a new one is created.
Any ideas?
Thanks.
UPDATE
If I use a "Text View" (NSScrollView with a NSTextField inside) instead of a "plain" NSTextField I'm able to create the behavior I want with any problem.

Resources