Swift - Can't understand the contentSize of a UIScrollView - ios

Hi I have set in my storyboard a UIScrollView (of the same size of the view) and ctrl-dragged it in my code.
Now I have created a button programmatically using a simple algorithm of mine.
I then tried to
println(button.frame.origin.y)
which printed 1700.
Then I tried
println(button.frame.height)
which printed 142.2 (also coming from the algorithm). So the heigh I would like to reach while scrolling is 1700 + 142.2 = 1842.2
So i tried to hardcode the content size in this way
self.scrollView.contentSize = CGSize(width:self.view.bounds.size.width, height:2000)
But when I run the app I can scroll no more than the middle of the button, which is in numbers
1700 + 142.2/2 = 1771.1
Why the heck is that?
I did all this to try to understand how this UIScrollView works but I can't figure it out.
EDIT
Added a screenshot.
Inside the bubbles there is the button.frame.origin.y value. That's the max I can scroll leaving the screen untouched.

This is probably to do with scroll view insets - a mechanism where the edges of the content always appear under the navigation and toolbar.
You either need to manually account for this by reading the contentInset property of the scroll view, or using interface builder.
Scroll view Reference:
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html

Related

Swift - contents within scrollview get chop off

Facing an issue when scrolling, a part of content didn't displayed.
https://i.stack.imgur.com/70FIC.png
Here it is what is supposed to be displayed
https://i.stack.imgur.com/ViPjF.png
My UI is designed in storyboard, the structure for the scrollable component is as below:
UIView -> UIScrollView -> UIStackView -> Multiple UIViews
If wondering how I take the screenshot of the one that's supposed to be displayed, the price is a drawer component, somehow after I tapped the drawer component, the content will be displayed, but after I scroll to top, same issue will happen to the content, which they get chop off.
https://i.stack.imgur.com/OKSEY.png
Updates:
Trying to put background colour on views to see which view is blocking the scrollview.
https://i.stack.imgur.com/vZBY7.png
Found that the scrollview (Booking DetailsSV) blocked by its superview (Booking Details View) in the hierarchy. Here is the screenshot taken in the test phone.
https://i.stack.imgur.com/Wm7xa.png
Is it suppose to happen like this?
Your scrollview doesn't seem to have correct contentSize. You need to set content size of your scrollView like following:
let sizeOfContent = 500
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width, sizeOfContent);
You can do this in viewDidLoad.

Convert view to scrollview for modal controller

I have some modal controllers that are UIViews and are not scrolling.
Reading on SO, the apple docs and elsewhere, it seems there are three approaches to fixing this:
Multiselect all the elements within the view and then go
editor-embedin-UIScrollview.
change the view to a scrollview in the identity inspector and then
add the following line to viewdidload:
[(UIScrollView *)self.view setContentSize:CGSizeMake(320, 2000)];
Copy elements to clipboard, delete the uiview, add a new scrollview
and copy the elements into the scrollview. Warning - this destroys
the positioning of the elements although it does preserve their
outlet properties.
However, I have tried all of these and the scrollview still does not scroll.
Is there any other step I am missing?
Thanks in advance for any suggestions.
Edit:
Getting scrollviews to work is not easy and there is much conflicting advice on the web.
I finally got this to work by setting the content size in a separate method as opposed to viewdidload.
(void)viewDidLayoutSubviews {
self.MainScroll.contentSize = CGSizeMake(320, 1800);
}
Thanks as well to Evo for advice on setting all the vertical dimensions correctly and using freeform in the VC size inspector as it won't work if you don't carefully set these.
If you have EVER enabled autolayout, even if it's disabled now, you need to:
Select the view controller you plan on scrolling
At the bottom right of the storyboard view, click the third button (far right) and then "Reset to Suggested Constraints"
Make sure that all the elements in the scrollview are embedded in the desired positions.
If you are not using autolayout:
Check that the Size of the view controller is set to (320, 2000), or whatever you want.
In the Simulated Metrics of the view controller, you can set the size type to Freeform.
Then in the tab to the right of Simulated Metrics, you can set the width and height to the desired values.
Please comment any concerns

UIScrollView & AutoLayout - UIScrollView Over scrolling (showing excessive whitespace at bottom)

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

How can I change UITableView height to its content height and still have clickable content?

So I have a tableview where I changed the size to match its content size with this code.
CGRect testF = table1.frame;
testF.size.height = table1.contentSize.height;
table1.frame = testF;
But when I try to click any of the items I can only click the top two or the section in the red, because that is the initial height of the table in the beginning.
Is there a way around this, to dynamically change its height and still keep it clickable?
I would think that the problem is not that you re sized the tableview, but that there is something that is blocking those touch events. Perhaps you have some other view in the way or the tableview is nested inside of another view which has a frame set to the tappable area that you see but has clips to bounds off so you are able to see the tableview outside of it. Try doing something like the following and see if it works, this should test my theory out:
table1.superview.frame = cgrectMake(table1.superview.frame.origin.x, table1.superview.frame.origin.y, testF.size.width, testF.size.height);
Add this under the code you showed above.

What is the best way to animate the size of sub view in a UIScrollView?

I've got a scrollview that allows the user to scroll between different pages and then tap on one to have it expand so that they can read the page in full, a little like how one changes tabs in Safari on the iPhone. Changing the frame size of each sub view is a bit of a pain when rotating as the scroll position is getting lost as the content size of the sub view has to change too. I was wondering if there was a more effective way of
resizing the views for entering 'viewing' mode or rotating the device.
The solution to your first problem is when you want to expand the view, pull it out of the scrollView then add it to self.view.subviews with an appropriate frame, then animate the frame to fill the screen. When done with it do the reverse, shrink it, then when its back to the appropriate size stick it back in the scrollView.
If for some reason this does not work - the scrollview is showing other stuff that gets moved when you remove the view, then instead of just removing your view from it, create a simple UIView of the same size as the view you will expand, and essentially replace the view you pull out with the "placeholder" view.

Resources