I'm having trouble creating a vertical only scrollview in Xcode 7.3. I've followed a couple of tutorials on SO and other places but for some reason it seems that my topmost view's width extends past the screen or is shifted to the left. The scroll view is restricted to vertical scrolling only, which is my intent but the content appears partially off the screen.
I try to horizontally center buttons and pin to the top and bottom of the content view. On the simulator they appear half off the screen to the left but they appear fine in the storyboard with no constraint issues. I even preview the view 3.5, 4, and 4.7 inch screens in the assistant editor and it looks as I expect it. But when I run it on the simulator it's messed up. Also the background of the Content View is supposed to be white (for testing purposes) but it's showing the gray color of the top-most view.
This is what I do along with pictures of my constraints
Add Scroll View and pin to the super views top, bottom, left, right (0,0,0,0)
Add Content View and pin to Scroll View top, bottom, left, right (0,0,0,0) and also add a constant height of 1000.
I ctrl+drag from Content View to View (parent of Scroll View) and set equal width constraint.
Place 2 buttons inside Content View pin 1 to the top and the other to the bottom. Both are horizontally centered as well.
This is what it looks like on the simulator.
Simulator-Actual
And this is what I its supposed to look like on the iPhone screens.
Storyboard-Expected
Give it horizontal centre constraint and than check
I think you have set all constrain correctly . But still check this once again.
Step 1 :- Remove tick Adjust scrollview insets
Step 2 :- As you said Give Leading , Trialing , Top , Bottom = 0 .
Step 3 :- same as step , set Leading , Trialing , Top , Bottom = 0 from superview
Warning :- You need to check both the constrain inspector because sometimes it takes Leading space from -20.
Step 4 :- Set constrain to 1 st button Top , Leading , Trialing
Step 5 :- Set Leading , Trialing , Vertical space to button 1 and Bottom (bottom from UIView)
If you give vertical spacing to button1 and give bottom to view then you dont need to set contentsize or else , it will scroll Automatically.
I hope this will be helpful for you.
Related
I'm trying to optimize an app for the iPhone X screen. Currently it shows black or white bars on most screens. As example I will use the PaymentMethodsView.
The PaymentMethodsView is a custom UIView containing 1 or 2 buttons in a horizontal StackView, the superView has a gray background. This StackView is currently constrained with 16px to the superview (all 4 sides). Currently it looks like this on the iPhone X (and on regular iPhones the view is just on the bottom of the screen:
What I want to achieve here is that the gray area extends to the bottom of the screen, while the yellow sits where now the bottom of the entire view is. (So 16px lower)
I can get this to work by enabling Use Safe Area Layout Guide for this ViewController, constraining the PaymentMethodsView in the viewController to 0 to safe area on the sides, and 0 to superview on bottom. Then in the PaymentMethodsView itself, I change all the StackView's constraints to safe area instead of superview, and change the bottom constraint to 0 instead of 16.
This works fine, except on regular iPhones the bottom 16px (under the StackView) disappears and it puts the yellow button to the bottom of the screen.
How would I go about fixing this?
On iPhone X: The gray area to the bottom of the screen, the button 0px to the bottom safe area
On regular iPhones: The gray area to the bottom of the screen, 16px between the yellow button and the bottom of the screen.
Thanks!
You can do this by adding TWO bottom constraints to your stack view...
First, constrain the grayView Bottom at Zero to the bottom of the view (its superview), not to the safe-area. Then
add one constraint from the stackView Bottom to the bottom of the grayView (its superview) at >= 16
and a second constraint from the stackView Bottom to the bottom of the safe-area at 0 with Priority: 999
This says: keep the bottom of the stackView at least 16-pts from the bottom of its superview (the gray view)
and
The 999 says put it at Zero-pts from the bottom of the safe-area if possible
The result on an iPhone 7:
and on an iPhone XS
Below code worked for me give it a try,
Click on you view controller
Select Identify and Type from right panel
Under Interface Builder Document enable Use Safe Area Layout
Now Wherever you want to place any view to bottom just give constraints corresponding to view not safe area
See this image:
The tableview does not fill up the screen, while I seated equal widths and heights to superview. I also tried to set the constrains to all zero's on leading trailing top and bottom. The black image you see has a trailing space of 5 to the content view, but the image is not on the far right side on iPad or iPhone 7.
How can I make the TableView as big as the screen? Thanks.
Remove all constraints of your UITableView
Pin your UITableView to top, left, right and bottom with 0
Make sure not to use constraints to margings
Alternatively use the size inspectors Autoresizing.
In my UIViewController I put a UIScrollView and attached constraints:
Then I added a view to this scroll view with following constraints:
and positioned it like this:
so as you can see it is quite long. When I run the app I can scroll it just for couple pixels instead of completely to the top of the screen. I want to make it possible to scroll it to the top so that it can cover everything what's under it. So what am I doing wrong here?
========= EDIT
for clarification - I want to achieve an effect that when user opens this screen, 10% of the screen is covered by the view. User can slide up this view and then it covers 90% of the view. And he can slide it down back to the 10%. Can you help me with adjusting constraints so that it looks good on every screen size?
Take a UIView inside the UIScrollView.
Set the constraint for scroll view as leading, trailing, top, bottom.
Select UIViewController in the story board and click size inspector then choose freeform then set the view height as bigger.
Then set constraint of UIView is leading , trailing , top , bottom as 0, so that the UIView will be same as ScrollView region. Now set height constraint something bigger so that you can design image view, label 1 and label 2. Then set constraint like the image view : top to UIView, leading , trailing and height.
For label 1: leading, trailing , vertical to UIImageView, height.
For label 2: leading, trailing , vertical to label 1, height and bottom to UIView (Important as based on this content view will be set).
After setting constraint You can select UIViewControl from story board and set the SizeInspector as fixed as it was before.
It will show the screen as you need (Image view, below label 1 and on scrolling label 2)
I have tested it in my demo project.
Hope it helps
I was playing around with iOS 8 auto layout and constraints and ran into this simple issue, and wondering if someone can help me.
All I want to is to create view (uiview) and have a label at the bottom center.
So I created a new project, Main story board is set to wAny hAny.
Dragged a view into it
x: 16, y:20
Width 275, Height:560
Color : Green
Added the following constraints
Pin top space to superview
pin leading space to superview
Pin hight
Pin width
Added a label and centered it to the bottom of the view
on the label, pinned leading space to superview
pinned bottom space to superview
Currently not seeing any constraints error
using iPhone 6 in the simulator
in portrait mode, I can see the full view and the label at the bottom
Now rotated to the left which is now the screen is in landscape mode. but the view is still on the left side of the screen vertically and 1/2 of it is cut.
So my question is how can I fix this issue so the view also rotate or I can the whole view with the label?
Generally you don't want to be pinning to one side and not the other because as the view size changes (such as with rotation) only one side of the view will get pulled, and that's exactly what you're seeing.
So, either you should not pin and instead centre horizontally in the superview (and allow the intrinsic content size of the label to set the size) or you should pin both leading and trailing (so the label will always be resized to full width).
I am trying to use auto layout in x code to correctly resize my view to switch between iphone 4 and 5.
I have a similar problem as the one presented in the picture. Let's consider the UILabel at the bottom is fixed.
I want the top UILabel to be at the middle of the space between the navigation bar and the bottom label. I don't know how to add a constraint that says "top space and bottom space must be equal". As a result, I can only fix one of the two constraints and I cannot get the expected result.
Thanks
The way I do this in IB, is to embed the top label in a UIView. Give that view a standard vertical spacing constraint to the top layout guide, and another to the bottom label. Also give it a fixed width. Give the label centerX and centerY constraints to this view, and it should keep it centered in different screen sizes.
How about adding a container view that fills up the space between the 1st label and the navigation bar, and then center the 2nd label inside the container view.