Hello Mobile developers!
I'm creating an app and I'm not being able to make it scrollable. I've inserted a ScrollView and inside a vertical StackView with 3 Views.
I am new to swift and I'm not really sure what to provide for you to help me, se here's a couple of screenshots that may help.
Running app
View Structure
Some constraints
ScrollView details
Any other comments regarding the structure or good practices are welcome.
UPDATE: The app is now scrolling, but for some reason I'm not being able to scroll the whole way down. It seems like it's grabbing the full hight of the device as height of the scroll, even though the content I'm inserting is dynamic.
I have a video in the following link so you can have a visual reference:
https://drive.google.com/file/d/1UmE9NEVTxbK_rFPJarhfohPFb8XD8HcA/view?usp=sharing
I think the problem is that you haven't add View inside your scrollview and also uncheck "Content Layout Guides" in Size inspector section for your scrollView. That view is your main content View. So your hierarchy will be like ScrollView -> View -> and then your main Stack View. Don't forget to give your main content view any fixed height so it will work perfectly. You can also dynamically handle main content view Height constraint.
You can also take a quick guide from following answer which work perfectly fine.
https://stackoverflow.com/a/59047168/12969732
I hope it will helps. Let me know if you have any query.
Related
I am new to IOS development and I am trying to learn scroll view.
I followed the tutorial online and drag and drop the scroll view onto the view controller, and I set the constrains for scroll view.
Contraints
After did this, I got error.
Error
I searched online and one solution is to Uncheck the "content layout guide". Solution
However, that solution page did not explain why this works. I want to know thoroughly why did this uncheck action work rather than just know uncheck it and that's it; i.e, does not know anything in deeper detail.
I hope anyone can help me know the detail about this solution. Thank you so much and Appreciate it.
The original problem was not a problem. A scroll view that uses autolayout has no content size until you give it content and pin it to the scroll view’s content layout guide. The storyboard is right to tell you that. You made that impossible by taking away the content layout guide.
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 have a UICollectionView with size: 768x1024 with a navbar on top. My custom UICollectionViewCells are of size 200x200. The problem is that when I keep adding cells and I reach the bottom row, I can only see part of the 200x200 cell. It won't let me scroll further before it bounces back up. Any ideas on what the problem could be?
EDIT:
I add cells via:
insertItemsAtIndexPaths:
The issue was just adding AutoLayout constraints to the View Controller which housed the UICollectionView. To do this, select the View Controller in Storyboards and click on "Editor" on the top. Then, "Resolve Autolayout Issues" > "Reset to Suggested Constraints..."
Check whether you have changed the minimum spacing attribute of collection view in size inspector of collection view. Setting it back to default values(10) was the solution for me.
The problem has to do with your UICollectionViewLayout, since it is the job of the layout to state how large the actual scrollable content is, and to ask for a refresh of that information when necessary. But unfortunately your question reveals nothing about how you are doing layout or how you "keep adding cells", so no specific answer is possible.
EDIT (after your edit): It is not enough to call insertItemsAtIndexPaths:; you must also add the items to your model (the data source). Otherwise, the layout doesn't know about them and doesn't make the scrollable content bigger (and lots of other bad things happen too).
i think you use the collection view in an unsual way, but if the content area of the scrollview of the collection view extend the frame size of the collection view you have to set the virtual size with the property 'contentSize' :
self.collectionView.contentSize = CGSizeMake(768,900);
I had a similar problem but due a gradient that it was at the bottom of the collection view and the user was not able to see the last rows of the collection view.
The way I've found to solve it is in the Size Inspector, set the Height of the Footer Size to a number that works for issue.
I know that maybe, it's not the best solution. But it works for my problem and it's really easy to use it.
Collection View that doesn't show the last row:
Collection View after setting the Footer Size Height to 40:
Above is an example of the layout of how my program should look.
The screen should have a simple header view up top and the remaining space below it is used to display other content.
This other content is basically 3 pages of stuff.
The parent scrollview should display one page at a time but can scroll left or right using paging to get to the other ones.
The problem is that each of these pages is going to have different heights. Also, by using paging in the parent view, vertical scrolling also gets paged so I think I have to assign a scrollview for each individual page, each with paging disabled.
This process is fairly annoying for autolayout because I have to manually calculate and overide intrinsicContentSize for every single view and make a custom method in viewcontrollers to return the height based on the intrinsic content sizes of its children and constraints used on them. I then need to use this height to constrain the widths and heights of the views so that the container scrollviews are able to calculate their contentsizes using autolayout.
I can get stuff to show up using a mess of container uiviews and uiscrollviews but the only scrollview that receives events is the parent scroll view. Why are the child scroll views not responding?
I had similar issues with nesting UIScrollViews. I found this video from WWDC 2010 (link below) that really helped me to understand how to work with child UIScrollViews inside a paging UIScrollView, and I managed to fix the bugs I had by following the steps in this video and looking at the sample code.
Designing Apps with Scroll Views (WWDC 2010)
PhotoScroller sample code
Note: The PhotoScroller code has been updated since the video was recorded to support ARC, storyboards and UIPageViewController. I would suggest taking a look at the sample code first, and if you're not sure how it all works then watch the video.
Hope this helps!
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 :-)