-3

Goal is a vertical layout matching the top/bottom of the screen view as in the sample image ...

constraints woe

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?

Community
  • 1
  • 1
Donald
  • 25
  • 7
  • Have you used `Auto-Layout `with proportional Constraints? – janu kansagra Jul 13 '18 at 11:37
  • vertically i didn't used proportional Constraints i fixed height for all elements – Donald Jul 13 '18 at 11:39
  • 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. – aBilal17 Jul 13 '18 at 11:40
  • This question absolutely and utterly has a **totally clear problem statement, an exact, specific example, and precise description of the exact problem**. I don't think I've seen a better question from a "newbie". Incredibly disappointing it was closed. – Fattie Jul 13 '18 at 18:36
  • [This question is being discussed on meta.](https://meta.stackoverflow.com/questions/371037/visual-not-text-code-question-closing-issue) – Script47 Jul 13 '18 at 19:23

2 Answers2

2

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.

enter image description here

your stack view parameters would likely be:

enter image description here

(start with zero spacing)

and as you probably know use these to indeed test each device size:

enter image description here

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.

Community
  • 1
  • 1
Fattie
  • 27,874
  • 70
  • 431
  • 719
  • Embedded in a scrollview for all sizes – Shehata Gamal Jul 13 '18 at 11:44
  • Not really man, he wants to avoid scrolling - but yeah, you have to consider extreme situations. The guy is just starting out - one thing at a time :) – Fattie Jul 13 '18 at 11:45
  • hmm thats a nice suggestion and i will try to use it but am not sure how to use stack views so i was wondering using scrollview is the only solution for current situation ?i like to know how to do it in current situation – Donald Jul 13 '18 at 11:59
  • In this case *do not use scroll view at all for any reason* – Fattie Jul 13 '18 at 11:59
  • You must **remove** your scroll view. Please note, what Sh_Khan said is an "advanced tip". Honestly it is not relevant to you now. He was talking about very extreme situations where not even your smallest layout will fit. At this point you should totally remove your scroll view, and make it work with a Stack View - which is a lot of work if you are new. – Fattie Jul 13 '18 at 12:01
  • then if i fixed height some content is missing horizontally its resizing perfectly but how vertically can be done and but i know how to use scroill view i tried with scrollview its working nicely but with out using it am not sure about it – Donald Jul 13 '18 at 12:01
  • You have to let some items decrease in size, using constraint priorities. It is not easy - you have a lot to learn. I'm sorry to break the news. :/ – Fattie Jul 13 '18 at 12:02
  • research compression constraints – Fattie Jul 13 '18 at 12:03
  • You have to let the **spaces collapse** as it gets smaller. – Fattie Jul 13 '18 at 12:06
  • ok let suppose CREATE MY ACCOUNT button(height fixed) is their and top constraint given to password how can we decrease the space with this constraint ?can u tell me – Donald Jul 13 '18 at 12:09
  • sure - all elements should be in a UIStackView. in fact **it will compress the spacing for you**. OK ? if you have other specific questions about stack view, you should ask those! – Fattie Jul 13 '18 at 17:00
  • @Fattie thanks for the support man ! i just asked the way the problem is and i though many IOS experts here and some one can understand and give me solution to that. thats the intention of this question and the exact problem is related to AUTO LAYOUTS but their is no Code for it. – Donald Jul 16 '18 at 11:02
  • don't worry about it @Donald sometimes SO is strange. questions get closed when they shouldn't. Anyway don't hesitate to ask more specific questions about Stack View, it is one of the hardest things – Fattie Jul 16 '18 at 11:41
  • there are many mammoth discussions on here about stack view, example regarding the issue of stack view WITH scrolling: https://stackoverflow.com/a/40977494/294884 – Fattie Jul 16 '18 at 11:42
0

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.

Ganesh Pawar
  • 191
  • 1
  • 12