I have a basic question regarding springs/struts (I'm working on a legacy codebase that prefers it over auto layout), and since I started iOS using auto layout I am trying to understand why this doesnt work. I am wanting to simply center this UIView in superview.
What I have (notice my springs/struts settings):
So with that, it views just fine on an iPhone 5 screen.
Here is what iPhone 4 screen displays though:
As you can see, it is much lower than what it should be. How can I achieve this?
Thanks.
That's because you set the top and bottom margin to be fixed. Try removing them from the storyboard, and you'll see that your view will be centered vertically.
Related
I'm part of a team working on an app that uses auto-layout for the iPhone 6, but we just found out that we also need to support iPhone 4s and 5. Because the layout was designed for 6's larger screen, we decided to use ScrollViews.
I used this video as a tutorial of sorts:
UIScrollView and Autolayout - Xcode 6
For the most part, it works. I can scroll up and down.
The Problem:
Scrolling vertically works. But now I also have to scroll horizontally, which is not ideal / shouldn't happen.
Even with the simulator set back to iPhone 6, anything with the scrollview gets widened to the point that the user has to scroll sideways.
Any suggestions?
What I Tried:
Some parts of the app does work without a hitch as far as my eye can see, but I've yet to apply a scrollview to those, so it's hard to tell if it's the scrollview's fault or something else at work. I did find this, though:
Non-working (scrollviews used - can scroll down, but width gets blown up):
Working (no scrollviews used - can't scroll down, but UI matches screen width):
I have no idea if that actually makes a difference. I tried to set the size to any/any as well, but that screws up with existing auto-layout constraints.
I also tried doing it programatically, but there's some known issues regarding the system returning the wrong screen size (which screws up everything even worse).
When working with ScrollView & AutoLayout you should put all content in a content view(UIView) and pin it to scroll view. (I am assuming this you did)
Now, If you want to disable horizontal scroll(like in TableView) then you will need to add a equal width constraint between scroll view & content view.
So,
I am trying to build an app from design, the design consists of 3 images horizontally on a portrait layout
Supporting Iphone 5 and upwards.
From this guide http://iosdesign.ivomynttinen.com/ the Iphone 5 should have 640px of horizontal space.
Each image is 100px by 148px high, therefore I have created added 3x UIImageview and laid them out horizontally.
Now without any constraints I get the following
If I auto constrain I get the following, same if I add constraints manually
Skips out the middle.
If I go to any any constraint , I get an error message in the logger.
This can be a vertical space to top layout constraint, just the one and it breaks.
I assume as images are only 100px wide, I should have plenty of room.
On the UIImageview I have done the following
Set Height and Width
Content is AspectFit
Clip Subviews Selected
Auto re-size selected
I have either not understood App design and the images do not fit, or have done some incorrectly with IB and UIImageview?
Any thoughts on this.
Sorry not a lot of code as it's all Interface builder.
Thanks
Sorry,
My own fault, "reset to auto constraints" and "clear constraints" had a bit of an issue, there was a bunch of constraints still kicking about when I delved in deeper.
In the end deleted then all and then manually added.
Currently i am trying to use AutoLayout on my iOS app in xcode 6. The storyboard I am using consists of only UIButton and UILabel elements, which i would like to resize and fit based on the device. Everything works on the iphone 6 Plus and 6 but when I get to the 5S or 5 things get weird. I can't use size classes necessarily due to both 5s and 6/6P using compact width regular height. IS there a way to fix this?
all images can be found here
Yes! With autolayout there's always a way.
From those pictures it looks like you may have a vertical constraint on the "play" button that is attached to the top of the view. Try putting that constraint on the "How Long" label. That way the button position will be relative to the title instead of the whole screen.
Check to see that you have the following constraints :
Center all buttons and labels horizontally in the container (note,
this is 3 different constraints you need to set). You can select
all 3 at once and from the Align menu center them horizontally in container.
Constrain How Long to Top Layout Guide (Top Space to Top Layout Guide)
Constrain Play to How Long (pin vertical spacing)
Constrain Leaderboard to Play (pin vertical spacing)
Depending on how you want Leaderboard to float you may want to pin it to the Bottom Layout Guide instead of to play. The buttons and labels will then move according to your constraints.
I have been struggling for days with this implementation, and even though I have tried to do every tutorial I found on the web, I still cannot make things work the way I want.
Basically, I am trying to put my login form in a scrollview, so that it takes the whole screen at first (and on all iPhones / iPads), and if the keyboard appears everything should move. The problem IS, my view doesn't take the whole screen... Either it is too large, or too high, even though in Interface Builder everything seams correct (from layout to constraints). Below and image of the layout I want to achieve (I am using an universal storyboard, with Size Classes and Autolayout enabled):
http://img4.hostingpics.net/pics/829115app.png
Can someone point me out on achieving this layout ?
Thanks in advance.
I would suggest pinning top, leading and trailing spaces of your scroll view to its superview. And set a bottom space constraint less or equal to the keyboard's height if you set it to 0, the scroll view won't be able to resize.
With your form layout set vertical center constraints and top space to superview constraints for your top label being more or equal than the distance you set in the IB, and then you can set relative space constraints between each of the components.
Hope I answered your question.
Edit: Just the provided project and got it working. I think the problem is caused by it being a containerView inside a scrollView. And both the container and the scrollViews content view adapt to the size of its subviews. Because of that, setting relative constraints won't help.
What I did was to set an explicit size (screen's size) to the containerView and setting setTranslatesAutoresizingMaskIntoConstraints(true) to it.
I modified your project and uploaded it here
I am making the layout of my app comparable with 3.5 inch devices. However, I am confused with Constraints and Auto Layout.
I am trying to make a view always be in the center of two views regardless of the screen size but whenever I do this it always goes behind another view.
The 4 inch view:
The 3.5 inch view:
If someone could help me figure out why this is happening I would be grateful.
You can add a wrapper view (normal UIView is okay), align the top bound with the bottom of "safe", align the bottom bound with the top of the circle. Two constraints should be added automatically. Then put your inner view at the vertical center of the wrapper view.
Your Constraints should be like this
I(any y value you want your UILabel to start at)
I(+30)
UILabel (Safe)
I(+30)
UITExtField
I(+30)
UIView that contains all Number Buttons.
Adjust all accurately that it work in least possible dimensions. i-e 3.5