I have a UiViewController, inside which I have a UIScrollView with the width and height as 768X3000. Inside the UIScrollView I have a view with widht and height as 768X1024.
I am totally confused on how to implement UIScrollView. My scrollView doesnt work. I have lot of contents to be displayed in the UIView and UIScroll doesnt scroll down.
What connections or setting do I have to do make the UIScrollView work.
You need to set the contentSize property of your UIScrollView to 768 x 3000, not its frame or its bounds. So in viewWillAppear you could add code to set your scrollView's contentSize:
self.scrollView.contentSize = CGSizeMake(768.0f, 3000.0f);
1- viewDidLoad is to soon. You must wait until after the layout of the views has taken place. Try setting the contentSize in viewDidAppear.
-(void)viewDidAppear:(BOOL)animated{
myScrollView.contentSize = CGSizeMake(768, 3000);
}
2- another tip you can set contentSize in viewDidLayoutSubviews:
3- set the delegate of your scrollview
myScrollView.delegate=self;
//in case you need the delegate methods
4- If still you cannot scroll the view even after you set contentSize correctly, make sure you uncheck "Use AutoLayout" in Interface Builder -> File Inspector. Reference
If you're using storyboards in Xcode 5 and developing for Auto Layout then there are a few constraints you need for it all to work (in my experience). First, lay your views out like this:
main view
scroll view
content view (put all the stuff you want to scroll in this view)
Then do the following in this order in the storyboard editor:
Set the content view height to 3000. Width should be 768.
Set the scroll view height to 1024. Width should be 768.
Set the main view height to 1024 if in freeform sizing or leave it using inferred sizing. Width should be 768.
Before you do the next steps, just double-check each view's height to be sure nothing changed. Sometimes the storyboard editor makes bizarre changes on its own.
Set a height constraint for the content view only. It should be set at 3000.
Pin the top, bottom, right, and left sides of the content view to the scroll view using 0 for each edge. You will have to manually change the bottom constraint from a negative number to 0. This is very important, so I'll repeat it: manually change the bottom constraint to 0.
Pin the top, bottom, right, and left sides of the scroll view to the main view using 0 for each edge.
Now it should scroll. If you want to ensure that it stays centered when you change to a horizontal orientation, add a horizontal center constraint to the content view as well.
I have many scrolling views in my iPad app and didn't have to use the .contentSize code once if I built my views this way in the storyboard editor.
Good luck! I know what an absolute pain and time-waster this can be.
Related
I am using the Freeformsimulated size to change the View Controller height so I can arrange all subviews in a scrollview.
I set the height to 1200
Add a scroll view; set the constraints to the superview
Then add a UIView called bodyView to the ScrollView to be the container of the body content and set all margins to the scroll view.
Add another UIView to be the header with a fixed height of 400 but set the rest of the margins to the BodyView to stay at the top and to be the same width.
Add a UIImagevView to the headerView and set all constraints to the header
This is how it looks so far:
However once the UIViewController is run on smaller device sizes the scroll view retains the original width of 414 and the content does not fit in the frame; even though there is no width constraint set for neither of the sub views.
Does anybody know where I am going wrong and what might be happening ?
I have been researching and even checked out other projects and cannot seem to replicate/resolve the issue.
The bodyView must get it's width from out-side scrollview , so Control-drag from the bodyView to the viewController's view and select Equal-Widths -- the height is calculated according to hooked elements from top to bottom
I want to do something simple, yet Apple loves to overcomplicate things for developers (quite ironic). I want to create a vertically scrollable screen. Basically a longer screen that I can scroll through. The problem is that it either doesn't scroll or the content (a label for demo purposes) is fixed on the screen (e.g. centered).
I looked at multiple tutorials but still didn't fully understand it because the inner workings aren't fully explained.
So from what I understand, it goes the following:
You place a UIScrollView on top of the main UIView
You set the UIScrollView's margins to 0-0-0-0
You place a content view UIView inside the UIScrollView
You set it's margins to 0-0-0-0 related to both the main UIView and the UIScrollView
You set the UIScrollView and content UIView's height & width (in my case I chose 1000 for height and screen width for width since I want only vertical scroll)
You set the UIScrollView.contentSize to something bigger than the screen
You add the content and align it to the content UIView
So what am I missing or adding when I shouldn't? If anyone can explain how this is done quickly, please do so.
Quite a lot of this is wrong:
So from what I understand, it goes the following:
You place a UIScrollView on top of the main UIView
You set the UIScrollView's margins to 0-0-0-0
You place a content view UIView inside the UIScrollView
You set it's margins to 0-0-0-0 related to both the main UIView and the UIScrollView
You set the UIScrollView and content UIView's height & width (in my case I chose 1000 for height and screen width for width since I want only vertical scroll)
You set the UIScrollView.contentSize to something bigger than the screen
You add the content and align it to the content UIView
There are various strategies for making a scroll view scrollable under auto layout. The "content view" strategy is perfectly valid, and very convenient, though it is not the only possible strategy. Since you seem to imply you want to use it, let's use it:
Pin the scroll view's top, bottom, left, and right with constraints to main view. Typically these constraints will have a zero constant, but no law requires this.
Give the scroll view exactly one immediate subview, a "content view". Pin the content view's top, bottom, left, and right with constraints to the scroll view. These constraints must have a zero constant.
Give the content view height and width constraints. Set their constant values absolutely. Experimentally, use large numbers. As you've said, width of zero and height of 1000 will give you vertical scrolling on a screen smaller than 1000 height.
Now stop. Don't add any more constraints, and don't set the scroll view's content size in any other way. You are finished. The scroll view is now scrollable, even though there is nothing visible inside it — provided the height or width constraints constant values are larger than the actual height or width of the scroll view at runtime. And you can run the project and see that this is true.
You are now free to populate the content view.
You don't have to put a UIView inside the scroll view. You can just add whatever objects you want and set objects frame within the scrollview. The scrollable area is set by the contentSize property of UIScrollView.
Some things you will want to make sure to do:
1) Add <UIScrollViewDelegate> to your .h file
2) set scrollview.delegate = self;
3) Set scrollview.contentsize = CGSizeMake(something bigger than the screen)
4) make sure the scrollview is scrollable with scrollview.scrollEnabled = YES;
I have a ViewController with a scrollView and a content View inside.
Some labels and stuff inside the Content View as well.
Now after that, when the view load i have to pass in data from other places to this view controller, and then load some other views by code.
The scrollview Content height and height did get updated, and i did place the loading and adding of the views at ViewWillAppear. But even if the content size is bigger than the height of the scrollview, i just can't scroll it.
Scroll View Height:667. Scroll View Content Height :1632
ContentView Height :1632
Your scrollview did not scrolled because you gave fixed size to content view.
Don't worry, just make the outlet of height constraint.
Check below image , how to crete outlet of constrain,
Note :- You need to create out let of Height Constrain.
From your image.
And now set in your viewDidLayoutSubviews
-(void)viewDidLayoutSubviews
{
NSInteger screenheight=[ [ UIScreen mainScreen ] bounds ].size.height;
if (screenheight > 504 + 64)
{
_contentviewHeight.constant = screenheight-64;
}
}
And last but not the least , Don't forget to remove Tick from Adjust Scrollview insects,
In case of Autolayout, whatever view you are adding to scrollview. You have to add constraint (basically top constraint) so that Scrollview would calculate contentsize automatically.
refer below to add constraints programatically.
iOS create NSLayoutConstraint programmatically for table view cell content
Edit :-
Like you said SView is in storyboard. So create the constraint from storyboard itself on SView.
And E,R and H View will be added constraint programatically
And the link is just an example
You will use [self addConstraint] instead of [self.ContentView addConstraint]
Moreover refer this one too :-
iOS Autolayout Vertically equal space to fill parent view
OKAY, Finally.
After trying and retrying and to no avail.
I just gave up on putting auto layout on the ViewController which have the scroll view itself.
So I untick the auto layout, and then VOILA.
Apparently, the view controller which have the scroll view don't need autolayout. Just the views that i put in via code need auto layout in their storyboard. After i adjust all the constraints in the view properly and never giving them aspect ratio constraints but just fixed their width and height. Done.
So I hope anybody who have the same frustration as me see this and heed my advice. Don't bother putting auto layout on the scroll view or its content View. Just Untick it altogether. Do the autolayout for the views you want to put in. You just have to specify the views' width and height properly and it will work.
I've been facing this issue from past 2 weeks and not yet got a solution.
I'm using UIScrollview in my application where the problem exists.
Generally in my app, there is dynamic text and images with different sizes will come from webservices. For example, imagine the Facebook Newsfeed. My application is similar to the Facebook newsfeed. Sometimes, there will be only text, sometimes there will be text and images. And comments for that post.
As i've seen in many links, the heirrarchy i'm following is SuperView-->UIScrollView-->Content View and the elements are placed in that content view. I'm assigning the constraints from the elements in the contentview to the Superview (ContentView --- constraints -- SuperView). When the content in the view exceeds the size of the superview, it has to scroll. But the scrollview content size is limited to the size of 600x600 i.e., in main.storyboard, when we design for W any x H any size. I've seen many tutorials and searched many sites. But following them gives me no luck.
Any help is appreciable.
Here is how to set up a scrollView in Interface Builder from scratch that works with Auto Layout.
Start with a new ViewController. Drag out a scrollView such that it fills the view. Untick Constrain to margins and constrain the left, top, right, and bottom edges of this scrollView to the left, top, right, and bottom of its superview with offsets of 0. This allows the scollView to fill the screen on any device in any orientation. You can make your scrollView take up less of the screen if you like, just make sure it is fully contrained.
Add a view to your scrollView. This should be the only top level view on your scrollView and it will serve as your contentView.
Constrain the left, top, right, and bottom edges of this contentView to the left, top, right, and bottom of the scrollView with offsets of 0. At this point, you will see warnings about ambiguous content size. That is because you haven't told it yet how big your content view will be.
To size the contentView, add width and height constraints to the contentView. If you want it to scroll, the width and height must be larger than the width and height of the scrollView itself. If you only want to scroll vertically, set the width of the contentView to be equal to the width of the scrollView. To do this, in the Document Outline view, control-drag from the contentView to the scrollView and select Equal Widths from the pop up.
If you want to be able to change the height of your contentView from code (to account for dynamic content), first create a height constraint for your contentView by control-dragging within the contentView and selecting Height from the pop up. Create an IBOutlet to the height constraint by control-dragging from the height constraint (found in the Document Outline view) to your ViewController's code. Give the outlet a name like scrollViewHeight then set the height with a value like scrollViewHeight.constant = 2000 when you need to change the scrollView's height.
Simply add your UIScrollView to your UIViewController's view in the storyboard and add the appropriate constraints in the interface builder.
Then, build your content view in the code and give it any frame you want, now start adding your controls to this content view and calculate the size of each one (especially the height), and at the end you have the total height of your controls.
Now set the frame of the content view to match that height and add it as a sub view to your scroll view, then set the content size in the code like this:
_scrollView.contentSize = contentView.frame.size;
Another note, do this changes to the sizes in the viewDidLayoutSubviews to avoid any problems with different screen sizes but be careful, this event is called many times so have a BOOL or something to ensure that the code that creates the view and add it to the scroll view is executed once, e.g. like this
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
if (! built) {
// Do everything I explained above here
built = YES;
[self.view layoutSubviews];
}
}
I created a UIScrollView in my storyboards and have added 12 UIButtons in a container View which is inside the UIScrollView.
when running on the iPhone 5s simulator, 9 of the buttons can be seen on the screen, the rest of the buttons only can be seen when you scroll down.
the 9 buttons that can be initially seen on the screen can be interacted with. However the 3 buttons at the bottom of the scroll view (which have to be scrolled to in order to be seen) cannot be interacted with.
I ran the app on an iPhone 6 simulator which displays all 12 of the buttons on the screen without having to scroll and the bottom 3 buttons work.
I am using autolayout.
I have tried fiddling with the contentSize of the UIScrollView and it does not help.
It seems you need to increase the frame height of container view. The contentSize of scrollView only affects how it will scroll, which is irrelevant here.
If the button is outside the container view, it will still show up. However, it can't respond to any touch event.
when using scrollview in storyboard with autolayout. it is usually set up using a content view inside the scrollview that will contain all the other views (e.g. buttons, labels, etc.) the content view are usually set to have equal height and equal width.
to make your content view expand it's height, you need to add a height constraint then assign it to an outlet so you could easily manipulate it's value with in your code. then set the content view's height constraint priority to 1000 ("required") and set the content view's "equal width to:view" constraint priority to 750 (high).
For me it was all just to Uncheck the checkbox Adjust Scroll View Insets in the storyboard of that ViewController.
PS: The above answers didn't worked for me.
Another option is to reduce the priority on the Content View.Center Y constraint.
In Xcode 9, I laid out the contentView as needed and the button extended below the view on the iPhone 5. I dynamically resized the scrollView.contentSize.height and contentView.frame in the view controller. The scrollView scrolled for me but I was still unable to select the button and was seeing warnings in the Storyboard.
Once I lowered the priority on the Center Y Alignment Constraint for the contentView, the warnings in Storyboard disappeared and I was able to scroll to the bottom of the scrollView and select the button on the iPhone 5 simulator.
NOTE: I'm still checking the device size and resizing the scrollView.contentSize.height value in viewWillLayoutSubviews() for small devices.
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
scrollView.contentSize.height = (UIDevice.current.isSmallDevice) ? 560 : contentView.frame.size.height
}
(UIDevice.current.isSmallDevice is a call to an extension of UIDevice that returns a bool determined by screen size)
Just increase the container view height and also Container view must be a subview of the scroll view and all other subviews are part of the container view.
like Scroolview -> ContainerView--> UIButtons
Add all subviews from container to ScrollView. And hide the container. Make sure container(ContainerView of scrollView) should also be a subView of scrollView.
Add height constraint to contentView.
Lower the priority of center Y to superview to 250
Lower the priority of bottom space to superview to 250
Increase the height of contentView in code by setting the height constraint constant value.