Can't build content inside scroll view with autolayout. Yes, I've investigated a lot, read apple technical note and some articles, I know, that content view should be constrained with scroll view's superview but can't still achieve the desired result. I expect this result:
fixed or scrollable (for small screens) portrait mode
always scrollable landscape mode, not to loose or overlap my fixed content
my button (red view) should always be at the bottom
my photo (yellow view) should always be fixed size and not to loose content
(like in my wrong landscape mode)
Making this work is actually pretty easy. All you have to do are the following steps:
Add the UIScrollView as subview of your UIViewController`
Add the UIView as a subview of the UIScrollView
Add the UIButton as a subview of the UIViewController. Do not add it as a subview of the UIScrollView if you want it to stick to the bottom.
Then add the following constraints:
Pin the UIScrollView to the top, left and right of you UIViewControllers view
Pin the UIButtonto the left, right and bottom of your UIViewControllers view
Pin the UIButton top to the UIScrollView bottom
Pin the UIImageView top, horizontalCenter and bottom to the UIScrollView
Set the UIImageView height and width constraints
Set the UIButton height constraint
And that's it. Do not add anything to the UIScrollView contentView and do not set the contentSize programmatically! The contentSize ist set automatically by Auto Layout.
Here are screenshots of the constraints and the result:
Related
I am looking for some guidance on creating a view controller with uiview and scroll view that allows horizontal as well as vertical scrolling. My uiview needs to be wider and taller than the width of the iPhone so that it holds more content in both directions.
I tried by modifying the view controller property to freeform and increasing its width and height. This does allow scrolling to happen vertical and hold more content but cannot achieve the same in horizontal direction.
I want to create a map of a building that someone could scroll in both directions to view it completely.
Is it possible, if so how?
Thanks.
It depends on the Content size of ScrollView, not on the size of ViewController in the Interface builder (Storyboard).
Try to add a view inside Scrollview and add Top, Bottom, Leading, Trailing constraints with that view to Superview. Along with that add width and height constraints to the view (that's added in the scroll view) and make sure that width and height constraint value is greater than the size of Window (iPhone screen).
For detail refer this link https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html#//apple_ref/doc/uid/TP40008179-CH101-SW2
I just add a scroll view to the storyboard, and added two views on the top and bottom, and making the bottom some part outside of the view to make it scrollable, but it doesn't work, what I have done wrong?
Inside you scrollview add a view with fixed height constrains and inside that view you can add your subview according to your design.
You can also set content size of the scrollview from storyboard.
If you are not using AutoLayout, then try to set scrollview.contentSize = bottomview.frame.origin.y+bottomview.frame.size.height This will make scrollview scrollable when device screen height is less than bottomViews bottom edge. In this make sure that your bottomview us immediate subview of scrollview.
For scroll in scrollview you need to give inner bound to scrollview with subview.
See image vertical scrolling with auto layout
Your problem may be you not give top and bottom inner bound to scrollview.
Like you added 2 view then for top view give top constraint and for bottom view give bottom constraints to scroll view.
Now you subviews height must be more then scrollview's height.
Scrollview need inter bounds (scrollview to it's subview) to scroll for vertical (top and bottom) and for horizontal (left and right).
Using Xcode to create a new project, a Tabbed Application.
On the first view controller I add a UIScrollView, bind it to the view for all borders. Then I add a UIView "Content View" with equal width as the superview of the UIScrollView. I add a label on the top and a label on the bottom of the content view, and make sure that the size of the content view amounts to a higher height than the height of the scroll view, so that we get a scroll.
Still I get a horizontal scroll bar in the view. Why? The width of the content view is bound to the width of the superview of the scroll view, which should thus be as wide as the device, and give no scroll. What am I missing?
The project is downloadable from here if you want to play with it.
Your problem is that you have two constraints for the ScrollView which are set relative to the margin.
If you make the leading and trailing constraints relative to the superview with no margin then your code works as you require with no horizontal scroll bar.
I making a article detail view like Facebook.
This view have content(profile image, writer, date, content text) and comment write view.
So Top view is UIScrollview, Bottom view is UIView.
UIScrollView have UIImageview, UILabel*3,
UIView have UITextView, UIButton.
When touch UITextView in UIView, the keyboard comes up.
So UIScrollview will be smaller and UIView position will be moved.
And User will write text, UITextView line will be added so UIView Size will be extended.
Eventually UIScrollview and UIView height not Determinate.
How to set autolayout this view?
Instead of having UIView for textView and button, what i would suggest you is, just add one scrollView set its constraints as below
Then add a UIView as container view inside scroll view, (select scroll view go to Editor, select Embed In, and select View) and set its constraint as below
Now add your imageView, labels, textView and button one by one, and make sure your set imageView's top space to view and button's (which is at the bottom of screen) bottom space to view, and all other view's top space and bottom space to their nearest views, this way scroll view can easily determine the height required for it.
One last thing, when user click inside textView you might need to move scrollView upward in order to make textView visible to user while he is typing, to do this one easy solution is just download the library 'TPKeyboardAvoiding' from here add all classes to your project and once done, set your scrollView's custom class to 'TPKeyboardAvoidingScrollView'. Clean and run the project, it should work..
May try it:
What I say below is about constraint:
UIScrollView top, left, right equal self.view top, left, right
UIScrollView bottom equal UIView bottom
UIView left, right, bottom equal self.view left, right, bottom UIView height equal 200(you set it)
OK, when you UITextView is touched, set the UIView height constraint to what you want(maybe 300)
I think it works!
I have a view controller with a scrollview.
The scrollview has a sub View (content view) which is a view I have copied from another VC. I cannot get the scroll to work, I have tried:
Set constraints of scrollview against the container (pinned top/bottom/sides =0)
Setting Horziontal and vertical spacing of Content view against the scrollview which also didn't work
Set the content view to superview Leading/Trailing space to container margin, Top space to top layout guide and Bottom Space to bottom layout guide - still no scroll
Have also tried to set the scrollview size in viewdidload :
scrollView.scrollEnabled = true;
scrollView.contentSize = contentView.frame.size;
And no scroll.
I am possibly missing something basic here but although have tried numerous tutorials on line I can't get my head around using scrollview.
Pop up when dragging content view to scroll view
Your content view is not embedded in your scroll view.
to Scroll UIScrollView you need following Steps
pin UIScrollView with its SuperView from all four side Top, Left, Bottom, Right
Add a contentView (UIView) in ScrollView and pin it with UIScrollView with 0 margin from all four sides. also add equal width constraint.
add subviews to contentView make sure all view pinned with constraint from top bottom & also add Height Constraint for subviews.
no need to set any property or content size in code.