I have a main screen with three button vertically aligned. I want adopt my app for 4" screen. so I want to adjust space between buttons equally to fill the screen.
see the below images:
how can I accomplish that using AutoLayout?
the green area keeps its size.
Edit: Apple now favors the use of stack views for this purpose. See this WWDC 2013 video for OS X and this iOS one from WWDC 2015
The Apple approved way of doing this (look for section titled "Creating Equal Spacing Between Views") is to insert hidden views between each of your buttons and set those views' heights to be equal.
See my answer over here for some discussion on why this approach makes sense.
Add each button in view with clearColor for background, align by centerY and CenterX by it subview. setup Constraints like:
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-10-[box][viewForButton1][viewForButton2][viewForButton3]|" options:nil metrics:0 views:viewDic]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[viewForButton1]|" options:nil metrics:0 views:viewDic]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[viewForButton2]|" options:nil metrics:0 views:viewDic]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[viewForButton3]|" options:nil metrics:0 views:viewDic]];
Related
The top constraint of the imageView is set to be 9px from the header but on iPhone X the constraint gets larger. See pictures: grey area between header section and top of image. Any suggestions what might be the problem?
Pics:
Too much space between
Proper 9px space
Note:
- Picture is set to size 1080x1080
- Content mode is set to Aspekt Fill and tried also Scale to fill etc but none will work.
- ViewController consist of nested elements: View- SafeArea-ContentView- View-ImageView. Total constraint top 9px. These are nested inside another VC in a Scrollview element that is placed top:0px from header.
- Constraints set to superview top 0 in and in the headerVC to header top=0
Found a fix. Took away imageView top constraint to superView and Manually ctrl dragged a new constraint from the imageView up to the safe area.
I have noticed that in the simulator using iPhone X, the tabBar increases dimension vertically to respect the safe area on the bottom of the screen. However toolbars added in storyboard do not and still maintain their default 44 height which causes the toolbarItems to be cutoff on the edges.
How would I duplicate the tabBar behavior for the toolbar on iPhone X without customizing the toolbar?
In order to be able to constrain items to the safe area in a storyboard, you need to enable "Use Safe Area Layout Guides" on the storyboard, in the Interface Builder Document section:
Once you've done that, you can, as mentioned in the other answer, constrain to the Safe Area:
The solution is to change the vertical constraint in storyboard on the bottom and sides to the safe area rather than container margin:
How would you do this when working in an xib. (Adding constraints programmatically is fine, but having any hardcoded value anywhere for the navigation bar or status bar is not.)
There is a sub-view whose relative height I want to be proportional to the vertical space between the top layout guide and bottom layout guide.
For example, in the below image - The blue portion's height needs to be proportional to the vertical space between the navigation bar and the bottom tab bar (if any).
PS - Once again, its an xib and not a storyboard.
For anyone else who stumbles upon this question, here is how I did it.
- (void)viewDidLayoutSubviews { NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:self.subviewInQuestion
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:0.5*(self.view.frame.size.height - [self.topLayoutGuide length] - [self.bottomLayoutGuide length])];
heightConstraint.identifier = #"ID_5";
[self.view addConstraint:heightConstraint];
[self.view setNeedsLayout]; }
I'd appreciate advise on to how create a Qt UI consisting of four layouts and has the following properties.
Any increases in the height of the UI is absorbed by the layouts, as shown below
Any further decreases in the height of the UI is absorbed by the contents of a specific layout, e.g. the two large buttons as shown below
1# Create new UI form base on QWidget: File -> New file or project -> Qt -> Qt Designer form class -> select Widget form templates, next, next, select project and finish
2# Add Vertical layout from left bar
3# After that click right somewhere on UI form, where is not just added layout, "Lay out" -> "Lay out in a grid"
4# You can adjust layout margin on right menu (I'm always setting 5 points)
5# Add four Horizontal layout
6# Add Button and text and what you need
7# Add Vertical spacers between Horizontal layout
8# Final result:
I prepared quick code what fits your problem, please take a look: https://github.com/troyane/StackOverflow-pro/tree/master/creating-auto-scaling-qt-ui-using-layouts
Grab that code and take a look at next moments (you can open mainwindow.ui in QtCreator):
centralWidget has next layoutStretch param: 1,2,1,1 -- it means, that we'll have next correlation among all items placed into this vertical layout.
TextLabel and both SmallButtons has Fixed VerticalPolicy
Both BigButtons has Minimum vertical policy and set minimumSize's Height to 100. UPD: Also maximumSize->height parameter is 250 px. So, it is guarantee that both BigButtons will not grow more than 250 px on height.
Take a look at another answer, there you can find lots of literature to read about Layouts.
You can put two vertical spacers in each layout. One should be placed at top most and the other one at the bottom :
First of all I want to say that I didn't make this myself but I have to edit this code for a friend of mine.
So there is a storyboard with a ViewController called 'PressViewController'.
In this view there are many images side by side. When I go to 'Utilities' > 'Attributes' the 'Width' of this ViewController is set to '10000'.
In the ViewController I can only see a few images. There are like 20 images and I only can see 15. Although I can't scroll in this ViewController there is a way to add more images to it, but I can't find it.
In the 'PressViewController.m' there is a rectangle drawn.
scrollview.contentSize = CGSizeMake(19170, 450);
scrollview.scrollEnabled = YES;
scrollview.backgroundColor = [UIColor clearColor];
The rectangle drawn is '19170' width. This is lager than the ViewController.
So my question is. How can I add more images to my ViewController?
I'll hope someone can help me out. Thanks instead :)