macOS-Resize many buttons with different width with Autolayout - macos

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];

Related

Set constraints in Xcode so NSView will resize if content width increases

I have a NSView which contains a NSTextField.
I want to set constraints so that the view width will increase if the NSTextField content reaches the view size.
When setting a leading constraint the NSTextField width will increase if the text contains longer text but I cannot get the NSView to resize.
What do I miss here?
Thanks!
Yo need to set a constraint for the vertical axis and if you want to keep the text inside the box, you need to set the trailing constraint.
Hope this helps you :)

Horizontally align two views using Auto Layout in IB

I have a radio button and a label. I need to have them aligned horizontally in an NSView, such that the radio button is to the left of the label:
[Radio Button] [Label]
This seems a pretty trivial thing to do, but when do it in IB, I end up with the Label on top of (or maybe under) the button. If I instead programmatically apply constraints, I get precisely what I want. Here are the programatic constraints:
[self addConstraints:[NSLayoutConstraint
constraintsWithVisualFormat:#"|-5-[_deviceButton][_statusLabel]-20-|"
options:NSLayoutFormatAlignAllBottom
metrics:nil views:views]];
In IB, I use "Trailing Space to Container", "Top Space to container" "Bottom Space to container", "Leading space to Container" for both views and I set a "Horizontal Spacing" constraint between the two views. What could I be missing in IB? I've done this before, but can't for the life of me get it right?
Thanks
If I'm understanding you correctly, you want the group of both buttons to be centered inside your view.
In that case, embed the two items in a view (select them, then go to Editor > Embed In > Custom View), then you can center that container view horizontally in your view.
You don't want all four of those constraints for both elements. Your button, which you want to be the leftmost of the two views, should be constrained to its container on the top, leading, and bottom; the label should be constrained to its container on the top, trailing, and bottom. The constrain the button's right edge horizontally to the label's left. (You'll notice that that's exactly what your visual format winds up generating.)

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!

Xcode Autolayout - Setting UIButton Width equal to view width

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!

Resources