I tried to solve this at my own, but I just really can not understand auto layout. I also searched here for a solution, but I could not find anyone with this similar problem (although I see a lot of people struggling with auto-layout). I want to make an app in landscape mode what is supported by every iPhone 5 and higher. I set up some constrains, with this as result:
How it should be
Above is the correct image on how it should be on every device. Can I set it relative to a screen size? I tried changing values with the multiplier, but that did not worked out well.
How it is on bigger screens
Here you can see how it is now. Because the values are absolute and not relative, I think it not changes... By the way, I am using " compact height" for building my landscape apps for iPhone, is that correct? Or is this the cause of this big trouble?
Here's a quick run through that might be more applicable to your needs than the general tutorials...
Create your elements on the storyboard and lay them out in roughly the right place:
Select items 1-4 and hit the stack view button, then select items 5-8 and do the same, Xcode is very good at guessing what you want so you'll get two vertical stack views, like this:
Select them both, hit the stack view button again and you'll get a horizontal stack view that contains your two vertical stack views:
Then select this stack view and the header and press the stack view button one last time to put them in another vertical stack view:
How you just need to adda few constraints to the outer stack view and then tweak the settings of each stack view. In this case, I've pinned the outer stack view 20 from the view edges, set the outer stack view to fill proportionally and everything else to fill equally, plus I've set the vertical stack views to centre alignment. You can play with all of these settings to get a result that you find pleasing:
This will now scale perfectly for any size screen:
I've just used labels for speed, but the same rules apply for images or whatever.
Hope that helps, stick with the tutorials and keep practicing until you figure it out, it will save you lots of time in the long run.
Related
I made a profile area where it has some buttons and information about the person like followers and their posts:
But I was advised to make using multiple horizontal/vertical stackviews as it (a) is easier to manage for different sized screens and (b) is easier to constrain as a whole in the view. I made the exact copy and all the items (like the textViews or images) are taking up so much more space than they need to which makes the whole thing so much bigger, then when I try and space stuff out or in, everything just either goes on top of one another or it gets bigger. Could someone explain this behaviour? Here's the same thing just using the stackviews:
As you can see in the picture, the '#username' textview is taking up so much space bother horizontally and vertically and I cannot even change that in the inspector as it just defaults back. The stack view hasn't got any constraints on it at all at the moment so no constraints are acting on it either.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Goal is a vertical layout matching the top/bottom of the screen view as in the sample image ...
I have NSConstraints between each item in the UIScrollView
However on a small device screen such as the 5S it is not showing the bottom buttons
(i.e. when the screen height is less than content height)
Is there a solution with fixed height of each UI element, or do I perhaps need to calculate every height dynamically so that without the UIScrollView it will fit in to smaller heights?
In short,
use a UIStackView
for this problem.
"or do I perhaps need to calculate every height dynamically so that..."
In fact that is precisely the purpose of a UIStackView
Learning to be an expert with autolayout and constraints is not easy. It is a delicate and artistic process.
For the challenge at hand, I would begin with one large stack view which fills the screen. The stack view itself will space everything nicely.
your stack view parameters would likely be:
(start with zero spacing)
and as you probably know use these to indeed test each device size:
Note that furthermore, in extreme situations, you will have to indeed also let certain of the elements shrink (it's your choice) when you run out of gaps to shrink. Unfortunately you must master all these techniques to make modern reactive apps.
Note, one key on this layout is that you have to let the spaces collapse as it gets smaller. Indeed the stack view will do precisely that for you with the correct settings.
That is a huge field of expertise, you would need to ask another question about it once you have
eliminated the scroll view
got the stack view working in a basic way
Indeed you will already find many QA about the issue on here.
Note that aBilal exactly described the situation in a comment:
"It is very simple, open your storyboard, select "iPhone SE" screen from View as at the bottom, rearrange all the screen accordingly using constrains. Now check your app will work on all screens including iPhone X as well. "
Indeed. it's much like saying:
"So you want to be Joe Walsh. It is very simple, purchase a guitar. Put one hand on each end. Now play. A lot.
:) It's a bit like that.
Adding scroll view for your screen doesn't seem to best solution according to me as it doesn't have so much elements on screen.
Best practice according to me is to always design the UI on smallest screen device your application is going to support and set your constraints accordingly. And I would suggest you to do the same into this situation as well. Hope this will be helpful.
Using Stack View, I want to get 3 items next to each other, which I achieved:
However, what I am looking to do is if the screen is too small to fit everything nicely in, then to move the block to the next line such as:
Should I not be using Stack View for this?
Github version of sample project:
https://github.com/jzhang172/StackTest
UIStackViews cannot do that kind of automatic layout where it sends overflow to a new row AFAIK. For what you are trying to do there are several other options depending on your purpose.
Embed several stackviews in a large UIScrollView and size it to only show your first row. Later could "grow" that scrollview to expose additional stackviews as needed.
You could dynamically create additional UIStackViews located in the lower position and fill them as needed.
You could consider a UICollectionView instead.
BTW: There is a github project for OS X embedding stack views in a scrollview dynamically. It might help you out: StackViewTest
I'm new to programming and I'm trying to work with Xcode. I have no experience. I'm trying to make an app with Xcode. I'm done with the code, the only issue i have is with the storyboard constraints. I need some one who can help me to set them up.
So, i have 28 buttons as you can see in the picture, I want to keep the size of 65x65 pixels. that means that the distance between them should vary in different device sizes(4inch, 4.7inch and 5.5inch). i also should mention that i want it to be only in portrait view and only for iPhone.i hope someone can help because I'm to noob for this, I've searched a lot on the internet but I'm not able to do it.
UIStackView (iOS 9+)
UIStackView was introduced in iOS 9, which is very useful in your case.
Edit: Before getting started, make sure to have size classes to be w Any, h Any, this will make thing easier.
To use this, search UIStackView in your utility panel.
Drag an drop a Vertical Stack View on the view of your view controller and set the constraints so it spans the whole screen.
Select the stack view we just placed and set the distribution to Fill Equally.
Drag and drop a Horizontal Stack View onto the vertical one.
Select the horizontal one and set the distribution to Fill Equally.
Place your buttons in the Horizontal Stack View.
Copy and paste the horizontal stack view multiple times based on number of rows you want.
That's it.
You can control the buttons' background images to make it smaller (65px), or you can place a view as its' parent then align horizontally/vertically to place it to the center, like this:
Orientation
If you'd like to lock the orientation throughout the app, go to the settings of your project.
Sample project
I made a sample project for this question, you can check it out here: https://github.com/cyhsutw/UIStackView-example
I am starting a new project which should be working on every iOS device size possible.
The project is rather simple. The main view will be a scroll view and it will hold a '+' button (where it says 'button' in the image) in the top right corner. (It does not really matter, I'm just trying to give the general idea of what I'm trying to understand and implement.)
A small example:
What is the right approach for this kind of problem?
Should I create a different storyboard for each device?
Should I start creating an adjustable scroll view that will hold the needed buttons with some constraints (if at all possible)?
I have read this tutorial:
auto layout
which explains the auto layout nicely, but does not mention the issue I'm trying to figure out.
Any thoughts?
Use AutoLayout and position your views relative to one another (so no x pixels spacing between views). Make only one storyboard for all devices, when a different view should be loaded on another device (like a completely different layout), select the appropriate size class and adapt the views and constraints.
Then it will be recalculated on every device.
The storyboard has a preview section where you can choose a device to simulate the view on.