I have a login page with a bunch of elements on it:
UIScrollView
Content View (UIView)
Email Text Field
Password Text Field
Login Button
Etc.
I need my app to run perfectly in both portrait and landscape orientations so I began setting up the different constraints to get AutoLayout working properly. I finally have all my UI elements in the right positions for both Portrait and Landscape, but the issue is that my scroll view scrolls too much and leaves a lot of empty white space at the bottom of the view when fully scrolled. I would like to fix this and keep things tight but I am not sure why. It's clearly the contentSize of the scrollview that is being set too large for the y value but I do not want to fix this with a workaround programmatically as I'm sure there should be the "correct" fix out there.
I've attached screenshots of the login page normal and fully scrolled (portrait and landscape) to help further understand.
Any help would be greatly appreciated. Thanks!
To adjust the height of scroll view, you need to do these two things:-
In the size inspector of scroll view, change the intrinsic size to "PlaceHolder".
Make sure you have added enough constraints that height of scroll view can be calculated. Since the contents in your scroll view are of static height, you can simply add a height constraint to your scroll view.
I'm not a 100% sure of this, but it could be that the view extends over the nav bar, causing the scrollview to have a much larger height than it should. IF that is the case, then autolayout-ing your view cause elements to be displayed everywhere else, other than the places you want them to be.
You'll need to disable Extends Under Top Bars in the attributes inspector.
I too had problem with scrollview my problem was that in iOS8 the scrollview was leaving some white space from top. I got crazy, finally I saw the solution by Ali Awais in this post and it fixed it
Here is the solution and link by Ali
I faced the same issue in iOS 8, following is solution I found: - Select View Contoller (in storybord) in which you have added the scroll view - In "Property Inspector" in "Layout" section un-check "Adjust Scroll View Insets"
White space scroll view
-anoop
Related
I'm trying to use Auto Layout for a custom Table View Cell in my app.
I can't seem to get the constraints quite right.
I layed the labels out in the custom Table View Cell, but the labels are still getting cut off. Any ideas?
Thanks! Will post anything else needed. Tried to show needed info in picture below:
Debugging in Xcode. Somehow what shows in Simulator looks different than in Xcode debug.
Here's the width of my TableView shown:
UPDATE:
The problem here was related to what user matt said in the accepted answer, but I wanted to make the Q&A a bit clearer now that I have it figured out for anyone else that comes across this.
In his initial comment, he mentioned the Xcode View debugging, which was great and I was able to dig into a little bit more. Its called the Assistant Editor: Device Preview, where you are able to see the layout and layers of what is onscreen to see if maybe you have labels overlapping or going offscreen based on the device it is running on. If you want to check multiple device sized, just hit the plus icon in the lower left hand corner of this picture.
This helped me find overlapping layers and sizing issues with the TableView. I was able to see how it looked on each device size.
What also helps here sometimes to use the Pin menu. Sometimes the labels can run off screen because it doesn't know where the constraints of the cell are based on the device size. So your label can run offscreen if the label is based off of a landscape layout but the device is an iPhone 5 and is in Portrait for example. This is the Pin menu:
Hope that makes sense and gives some more color to the problem. Let me know if you have any questions at all, thanks for the help everyone!
The problem is that you are using auto layout but you have not done anything about sizing the table view. The table view here is not your view controller's view; it is a subview. Your view controller's view is automatically sized to the size of the device / window, but its subviews are not automatically resized. So you are ending up with the table view much too wide for the device; the whole table is sticking off into space on the right side.
Use a trailing space from the right side of your labels to the edge of their superview, and set it to greater than instead of equals with a value of ~ 5
Review the constraints of your tableview with the View. Draw cell border, label border and tableview border with different colors to know which elements do not display correctly.
Ex:
#import <QuartzCore/QuartzCore.h>
...
cell.layer.border.width = 1;
cell.layer.border.color = [UIColor blackColor].CGColor;
The thing that worked for me to solve views being clipped was to uncheck "Constrain to margins" in Auto Layout.
I hate iOS scroll views with auto layout, they are driving me crazy!:-D
I have found a method which works perfectly on iOS 7 to use scroll views:
I put the scroll view directly in the main view, attaching the scroll view to the edges of the super view(top,bottom leading and trailing space equals to 0).
Then I put a UIView into the scroll view attached to the edges of the scroll view, (top,bottom leading and trailing space equals to 0).
Then I set the height constraint of the most internal view, I link it at my ViewController class, and I modify its value programmatically.
Or, if the view it's 'static' I put every component using the storyboard into the internal UIView, starting with the one at the Top attached to the top of the super view, the one under, attached with the constraint 'Vertical Spacing' referred to the one over him..and so on... Until the last, which is also attached to the bottom of the UIView..
Everything works fine in iOS 7, it's perfect, but iOS 6 is messing around with the constraint.
When I first launch the view everything is perfect, but it seems to recalculate the constraints even on the didappear(and in a bad way), in fact, if I leave my view while it's scrolled down, when I come back to it(let's say we are in a navigation controller) , is like it's everything 'moved up' and the components at the top are hidden.
Is there a way to make scroll views work in both iOS 6 and iOS 7, I'n thinking at two storyboards as the only solution, please tell me there is another way... :-)
thanks everyone, I post two images explaining my problem, taken from the top of the screen:
Well uncheck use AutoLayout in file inspector and try.
I'm developing an iPad application where I have a screen with UITableView hosted on UIScrollView. UITableView's leading space and trailing space is being pinned to superview.
I'm using Autolayout in my project.
When this screen appearing in landscape mode or rotated to it all visible elements of UITableView being resized correctly. However area after x=768pt is being untouchable. It's definitely area because beginning of editable elements (text view and text field) are being touchable.
I checked contentSize of table, it's being OK (1024 in my case).
Also when I rotate iPad from landscape to portrait contentSize of table still stays landscape (1024). I tried solution from this topic: bug in UITableView layout after orientation change and it worked. Don't know if this is connected to my issue.
I tried to place regular view instead of my UITableView. On this view after rotation touch area was OK. However when I placed my table on this view right area still was unresponsive.
Table's property clipsToBounds set to YES so it seems that content is not becaming outside of UITableView.
Please point to what may cause this issue. Right now I'm completely out of ideas what may cause this.
I found a solution. The problem was in overriden method -(void)layoutSubviews in my custom cell. I simply forgot to call [super layoutSubviews] in it.
Never forget to call [super layoutSubviews] in any non-standard view.
Hope my solution will help someone not to waste hours on simple issue.
I have a problem adapting my apps to the new iphone5 layout, I've made the following passes:
Added a retina 4" splash image
Modified the interface in my storyboard with "Size inspector" to change the anchoring of the widgets
Tested the app with iOS6 "retina 4" simulator.
The app works as expected except when the user pop up the keyboard to edit a text, I use the "stretching scrollview" method for this particular situation and this seems not compatibile with the "autosizing" properties of my widgets, here is an example, from iOS6 simulator, without and with keyboard:
And here is what happens:
I'm quite sure this is a coherent behaviour since my main view is stretched so the other items inside it are stretched following their anchoring, the fact is that I'd like to have the same behaviour of my previous fixed position (all widgets anchored to the top left corner) with the iphone5 gui expansion, is this possibile?
How do you solve the problem of showing a keyboard and scroll hidden content in an iphone 5 compatible way?
I have been having similar problems. From what I have found thus far, we may need to remove all constraints on the view within the scrollable view, because it appears that it's contents are being resized along with the frame of the scrollView. I know that setting the internal view's frame manually in viewWillAppear will work, but then you are stuck having a view that is the same size for both iPhone4 and iPhone5 (albeit it will scroll). Or you could "pin height and pin width" of the internalView right there in storyboard.
Two potential approaches that may work. Sorry I can't confirm these as I'm giving up and redesigning around this problem.
1. Programmatically add constraints to your internal view's subviews. The programmatic constraints will allow you to "spring" the distance between your elements proportionally. When adding constraints programmatically, you are given access to a factor called "multiplier" (not to be confused with priority), which I saw someone else on stackoverflow posting about.
2. You can design the internalView in Interface Builder as a separate viewController with it's .xib file, and then use storyboard to load it as an embedded viewController to a "containerView" object, which you would put in place as the new "internal view" of the scrollView. Perhaps then the .xib would first resize to the correct iOS device, and then you could use its frame to resize the containerView.
My advice is create a small test-case of these before implementing, else you end up like me, having spent hours down the wrong path and facing a dead-end.
UPDATE 12/4/12
Make your life easier by NOT setting the ScrollView as the main view of the ViewController.
--Instead, make ViewController.view a dummy/blank view, and embed a scrollView inside that view. Then, embed another view (my CustomView) in the ScrollView. CustomView contains all the visible controls and text boxes and buttons. There is NO HEIGHT CONSTRAINT on CustomView.
I have a vertically scrolling uiscrollview - imagine an 'about this app' page of a tab bar app which goes on a bit and requires a scrollview. It only contains a few images, a video and some text (only the video has been coded in - the rest have been placed in the GUI). In storyboard (Interface Builder?) Xcode 4.2, everything is set up as it should be and works fine, but the view is only as large as what you see on the screen, is it not possible to manually arrange in storyboard the items that are initially offscreen - that you need to scroll up to? The only way I've found so far is to design them on the visible view then navigate them down with the arrow keys..
In the storyboard select the viewController, then in Attributes inspector change 'size' to 'freeform'. Then change the 'height' of the view/scroll view to as big as you need. The default settings of struts and springs should take care of resizing the view back correctly when the app is run, but you should double check.
I feel your pain. The only way I found is to manually pan the scroll view in the size inspector to reveal the portion of the view that you wish to visually edit.
Use a UIView to contain elements so they are positioned relatively to this view. Add the view as a subview to the scrollview at 0,0.
pan: use the Y coordinate say to -200, then edit the contents.
to place more contents in the hidden part, pan again to reveal new real-estate
when finished, restore the values of the ScrollView's height and X,Y position.
Make sure the scroll view frame rectangle is smaller than the contained view.
New: 3/26/2013
I stumbled upon what I think is even simpler way of dealing with UIScrollView directly in storyboard.
No code needed, just storyboard settings. This maybe new in iOS6.1 / Xcode 4.6
No need to disable constraints (i.e. uncheck "Use autolayout" in File Inspector for storyboard file)
No need to add UIScrollView* scrollView; in .h
No need to add self.scrollView.contentSize = ... in overrides of viewWillAppear or viewDidLoad
Here is what I did (important parts highlighted with **): (see code)
Create a new project with storyboard enabled
Drop in a UIScrollView, set class in identity inspector for view controller
In attributes Inspector, change Size under simulated metrics to Freeform**
Select scroll View; In attributes inspector, turn on "scroll enabled" and "background" to "White" (you'll figure out why - if you don't)
Under Size Inspector (with scroll view selected) change the height to 900 for example**
Add buttons, one on top and one at the bottom
Add a default handler for buttonTouchUpInside for both buttons and simply Log sender.
See Code Select the View Controller and scroll view and check inspectors.
Just change the 'Simulated Size' of the view controller to freeform and set a height that is larger than the usual size, you will be able to see all the outlets you need to edit.
On iOS 6.0 you can drag a Container View inside your Scroll View. This will automatically create a new View for your content, outside of the current scene. You can then resize this view as big as needed to fit your content.
I believe you would still have to set the ScrollView content height at runtime, but at least you can design you content view at once without having to scroll up and down on IB.
Just uncheck the "Autoresize subviews" from any view that you're trying to resize and it should keep all your objects from resizing with it.
I've been struggling with this for a while now, and every single thing I've tried has failed.
Specifically, What I am trying to achieve is a freeform sized modal dialog with a scrollable view containing a container for another view. I have had a lot of varied results, including occasionally having it working correctly. Most often I get it looking exactly correct, but with no scrolling.
In finally downloaded Dickey Singh's code, which worked perfectly but had nothing special. (Excellent clean solution BTW). So, I added a container view to it, exactly as I had in my code, and it broke!
After some experimenting, I worked out what is going on. Just bear with me.
1) Using Auto Layout, the size of the scroll view seems to dictate what the scrolling bounds will be. Setting "contentSize" in "USer Defined Runtime Attributes" seems to have no effect on this, and neither does setting "contentSize" or "bounds" in "viewWillDisplay" or "viewDidLoad". Thus if the initial size of the scroll view is 800x800, that will be all the space that can be displayed. For this reason, when I want a scrollable region, I create a container view and then put the scrolling view inside the content.
2) Without Auto Layout, setting "contentSize" in "User Defined Runtime Attributes" works, as does by setting it programmatically in "viewDidLoad". I prefer to use "User Defined Runtime Attributes" because it keeps the size with the layout. This solution allows you to use scrolling view with more flexibility, since it can be any size at design time.
3) Regardless of Auto Layout, if any view within the scrolling region exactly matches EITHER the horizontal or vertical frame bounds, then the scroll view ceases to function as a scroll view. This applies to my own code and to Dickey Singh's code in every possible configuration that I have tried.
I have no idea what is causing (3), but it is clearly a bug.
I hope this helps everybody out there who is struggling to use scroll view. I imagine that some people are using them without any problem, and some (like me) have had noting but problems with them.
Here's my solution to design a ScrollView with a content larger than the screen entirely in Storyboard (well, except for 1 single line of code :-) :
https://stackoverflow.com/a/19476991/1869369
I'm currently developing an app for iOS 7, and I did exactly as #Dickey Singh's answer, but it doesn't work in the beginning.
After checking the storyboard, I found that we also need to add Auto Layout Constraints for the view controller who holds the scrollView.
It seems that such auto layout constraints would be added automatically before Xcode 5, but now we need to do it ourselves.
The way to add constraints: First select the view controller in the storyboard; Enter 'Editor' in the top menu; Select the 'Resolve Auto Layout Issues'; Select the 'Add Missing Constraints In Container'. Done :-)