View at the bottom in a UIScrollView, with AutoLayout - ios

I'm setting up content in a scroll view with autolayout. The objects in the scrollview are pinned top-to-bottom to the previous one, so that they are under one another. I have a footer view that is added at the end, below these objects.
Here's the catch: when there's few content, the contentView will be smaller than the screen height, so the footer view will appear somewhere in the middle of the screen (which is the normal behavior). But I'd like to prevent that, and make the view stay somewhere at the bottom.
In other words, I would like to setup a double constraint like:
Put this view below all the objects in the scrollview
AND
keep this view at a distance of max [some number] of the bottom of the screen
In a way that both constraints are always satisfied:
If the height of the content is bigger than the screen, then the view appears at the bottom, after scrolling down
If the height is smaller, then the view is "pinned" to the bottom of the screen, leaving a space relatively big between the bottom of the content and the top of this view
How can I achieve that with AutoLayout?

Fairly easy to do with Auto-Layout only... no code required.
The key is to use a "content view" to hold the elements, and a greater-than-or-equal constraint between your "bottom" element and your "footer" view.
In this image, yellow is the main view, green is the scroll view, blue is the content view, the labels are gray and the footer view is pink.
Start with a fresh view controller
add a scroll view, normal constraints (I used 20 all the way around, so we can see the frame)
add a UIView to the scrollView - this will be our "content view"
constrain contentView Top/Bottom/Leading/Trailing all equal to 0 to the scrollView
constrain both the Width and Height of the contentView equal to the scrollView
add your elements - here I used 3 labels
constrain the labels as usual... I used:
LabelA - Top/Leading/Trailing all at 20, vertical spacing to LabelB of 60
LabelB - Leading/Trailing at 20, vertical spacing to LabelC of 60
LabelC - Leading/Trailing at 20
LabelC is also set to Number of Lines: 0 so it will expand with multiple lines of text
Add a UIView as a "footer view" (I stuck a label in it)
constrain the footerView Leading/Trailing/Bottom all at 20 (so we can see the frame)
either set a Height constraint on footerView, or use its content to constrain its height
add a Vertical Spacing constraint from LabelC to footerView, and set it to >= 40
last step, change the Height constraint of contentView to Priority: 250
Now, as you expand/contract the height of LabelC, the footerView will keep at least 40-pts of vertical space. When LabelC gets big enough to "push" footerView below the bottom, scrollView will become scrollable.
Results:

you need to check ContentSize of scrollView and modify FooterView Top Constraint with the required Value
My class code
import UIKit
class scrollViewDrag: UIViewController
{
/// ScrollView Outlet
#IBOutlet weak var mainScrollView: UIScrollView!
/// Footer View top spacing constraint
#IBOutlet weak var footerViewTopConstraint: NSLayoutConstraint!
/// Used for ScrollView Height
var screenHeight = CGFloat()
/// Did Load
override func viewDidLoad() {
super.viewDidLoad()
}
/// Function used to check for height
func checkForHeight(){
/// Get scrollView Height
screenHeight = mainScrollView.frame.size.height
/// Check contentSize Height ?
if mainScrollView.contentSize.height >= screenHeight {
/// When ScrollView is having height greater than your scrollView Height
/// Footer will scroll along other Views
}
else{
/// Issue Case
let spacingValue = screenHeight-mainScrollView.contentSize.height
footerViewTopConstraint.constant = spacingValue
}
}
/// Call the height function in DidAppear
override func viewDidAppear(_ animated: Bool) {
checkForHeight()
}
}
Storyboard
I had used Four View with Equal Heights And at last a footerView is attached as Fourth View
FooterView Top Constraint
Top constraint used as footerViewTopConstraint
Output
Case 1 - Size is greater than scrollView Height
Case 2 - Expected Output

Related

Autolayout UITableView expand parent view but not greater than safe area

I have a Storyboard which has a simple view hierarchy:
- View (has top/bottom constraints relative to safeArea >= 30, centerY)
- Label (has height/top(SuperView)/bottom(TextField) constraints)
- TextField (has height/top(Label)/bottom(TableView) constraints)
- TableView (has height >= 0, top(TextField)/bottom(Superview) constraints)
Inside the UITableViewDelegate (cellForRowAt):
tableView.setNeedsLayout()
tableView.layoutIfNeeded()
The behaviour I wish to achieve is to have the TableView and the parent View grow as new records are added to it. However, the parent view should not exceed its top/bottom constraints relative to the safe area.
All the elements have height constrains and spacing explicitly set, except for the table view (which has height >= 0). As well, the parent's view content hugging priority is 250 and the tableview compression resistance is 750. I thought that fixing the height constraints and spacing between elements would allow the tableview to grow up to some point because the content compression resistance is higher for the top/bottom safe area constraints than it is for the TableView.
However, XCode is forcing me to set a height or a Y position constraint for the parent view. I can't do that because then the view cannot grow automatically.
I would prefer to stick with AutoLayout and wondering if anyone has an idea or resource on how to do this.
Table views do not automatically set their height based on the number of rows.
You can use this custom table view class (from https://stackoverflow.com/a/48623673/6257435):
final class ContentSizedTableView: UITableView {
override var contentSize:CGSize {
didSet {
invalidateIntrinsicContentSize()
}
}
override var intrinsicContentSize: CGSize {
layoutIfNeeded()
return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
}
}
This will "auto-size" your table view whenever the content size changes. To use it, add a table view and set its class to ContentSizedTableView.
Constrain the top, leading and trailing as desired.
Constrain the bottom to >= 0 to the bottom of the superview (or >= 8 if you want it to stop 8-pts from the bottom, or whatever value you want for your layout).
Give it a height constraint - doesn't really matter what, but using a value such as 100 let's you see it as you work with the layout.
Then edit that height constraint and check the Placeholder - Remove at build time checkbox.
The table view's height constraint will be removed when you run the app, and the ContentSizedTableView will automatically grow until it reaches the bottom constraint.

iOS - Move TableView before scrolling

I have a view with an image and a tableview. The image is in the first half of the screen (portrait) and the tableview in the second half. And now I want to move the tableview over the image until it reaches the top and covers the image. Then it should start the "real scrolling".
But what's the best way to do this? Can I like replace the touchesMove of the variable tableView? I could create an extension of the UITableView and override the function, but then I don't have access to the view of my Controller to move the tableView.
Any answer? Thanks!
The imageView should be behind the tableView with constraints top, leading, trailing to superview and height to superview with a multiplier of 0.5. The tableView should fill its superview.
The trick is that you add a tableViewHeader that is invisible and equal to half the height of the screen. This has the effect of pushing the initial content of the tableView off the screen. In interface builder add a UIView to the tableView as header and make it transparent. Also make the background of your tableView transparent. Take an outlet to the headerView and the tableView. In viewDidLayoutSubviews set your headerView.frame.size.height = tableView.frame.size.height / 2.
Apart from what Josh answered, what you can try is:
What you can do is make the UIImageView's height decrease based on the scroll amount until the UIImageView's height is 0 and then start the scrolling otherwise force the contentOffSet of the UITableView to always remain 0. That being said, here is how to do it:
Make an enum to keep track of the various states of the UIImageView like:
enum Layout {
case ImageExpanding,
case ImageDefaultHeight,
case ImageDiminishing,
case ImageNotVisible
}
In your storyboard, add a top, leading and trailing constraint to the superview for your UIImageView and fixed height constraint of lets say 200(don't worry you will change this later). To your UITableView add a leading, trailing and bottom constraint to the superview and a top the UIImageView. Now drag and drop a constraint outlet for the UIImageView height into your UIViewController.
In your viewDidLoad set your heightConstraint to be 1/2 of the total screen height and set the enum state to initially be ImageDefaultHeight
Now in your scrollViewDidScroll you will have to check the direction of the scroll and based on that while checking the current state of the image, increase or decrease the heightConstraint based on the amount a user scrolls by and always check:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if(/*up*/){
//just telling you about this if condition as this will ensure that
//if your table view is large and if tableview isn't at the top,
//the image shouldn't expand
if layout == .ImageNotVisible{
if scrollView.contentOffset.y <= 0 {
//start expanding once you reach top of tableview
layout = .ImageExpanding;
}
}
//keep track of other enum states and update your uiimageview
//appropriately after calculating the user scroll amount
//until the height reaches your initialDefaultHeight and
//then do nothing. You will have to figure out the code
//for this on your own
}else if(/*down*/){
//make image smaller
}
//dont let table view scroll until image height is 0 when use is scrolling down
if layout != ImageNotVisible{
scrollView.contentOffset = CGPoint(x: 0, y: 0)
}
}

UIScrollView won't scroll with content view inside

having issues with UIScrollView. I have a setup like so:
I have a scrollview pinned in the first image, trailing, leading, top and bottom constraints. In the second image I have place a UIView of the same dimensions inside the scroll view (I plan to add content to this). This is pinned to the scroll view and also centred horizontally and vertically. It seems no touches are registered at all when I try to scroll now. I have set a large content size:
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
print("The scroll views height is \(scrollView.frame.size.height)")
scrollView.contentSize = CGSize(width: scrollView.frame.size.width, height: 1000)
print("The scroll view content height is: \(scrollView.contentSize.height)")
}
I have also enabled user interaction everywhere I can. I am using the delegate method scrollViewDidScroll(scrollView: UIScrollView) to check if touches are being registered and they aren't at all. What am I doing wrong here?
Hope this will help you,Many facing this problem i hope my solution will provide relief to Devs.
your view Hierarchy should be like this :-
View (main view of my UIViewController) – with
-ContainerScrl
--Scroll View (UIScrollView)
---ViewInsideScrl
----Content1
----Content2 (etc)
As, the ScrollView only Scroll When its Content Size will be greater then the frame of Scrollview.
Now Comes the imp. part the constraint Should be like:-
Give constraint to the ContainerScrl and then Scroll View Should be pinned from all the direction to the ContainerScrl and ViewInsideScrl should be pinned to Scroll View. Now it will be giving warning like scrollable content size Ambiguity.
Look, if u give constraint like width and height of ViewInsideScrl should be equal to ContainerScrl, all the constraint error msg will be vanished but it will not scroll as frame getting equal to content size,, let suppose u want it to scroll in horizontal dirction then just give equal height constraint to both the view and give proportional constraint to ViewInsideScrl width constraint w.r.t ContainerScrl like
ViewInsideScrl = 2* ContainerScrl ;
it will make the content of scroll bigger then the frame.
Lets try this, if problem not get solved we will look further to it.

Disable horizontal scroll in UIScrollView with autolayout

I want to create view with only vertical scroll. As it turned out it is epic hard to do in iOs. I have done this steps:
1) Create UIViewController in storyboard;
2) Add ScrollView inside View in UIViewController and add 0 constrains to each side.
3) Add elements in scrollview, as result:
After I launch my app all works, but:
1) How should I disable horizontal scroll? I add 0 constrain to the right to my scrollView + 0 constrain to the right to my uilabel (as u see on screen for some reasons it is not attached to the right, it has different constrain, but in property I set constrain = 0) and, as I thought, label text supposed to be in my screen bounds, but when I launch app I can scroll to right, i.e. uilable text didn't wrap, my scrollview just resize to fit the text.I tried to set my scrollView in code: scrollView.contentSize = CGSize(UIScreen.mainScreen().bounds.width, height: 800), but didn't help.
2) If I scroll to much, then blank space appears and this is not cool, how to fix it?
1) Horizontal scroll enables automatically when the content width in scrollView more than width of scrollView. Therefore, in order to avoid horizontal scrolling is necessary to make width of the content inside scrollView less than or equal to scrollView width.
Leading space and trailing space can't set specific width to views, they just stretch them. In regular views, they no stretch for more than width of view, but scrollView is a special view, actually, with an infinite content width. Therefore, trailing space and leading space constraints in scrollView change the width of views to their maximum possible values (In case with UILabel you can see resize to fit the text).
To avoid horizontal scrolling, you need to set specific width of each view, less than or equal to scrollView width. Specific width of views may be set with width constraints.
Instead of setting each view width, much better to add a view–container and set width to it, and inside it place the views as needed.
Views hierarchy:
View
-> ScrollView
-> ContainerView
-> UILabel
-> UILabel
-> ... other views that you need
Autolayout constraints:
ScrollView
-> leading space to View : 0
-> trailing space to View : 0
-> top space to View : 0
-> bottom space to View : 0
Container View
-> leading space to ScrollView : 0
-> trailing space to ScrollView : 0
-> top space to ScrollView : 0
-> bottom space to ScrollView : 0
-> width equal to ScrollView : 0
To set width equal constraint ctrl+drag from containerView to scrollView.
2) Vertical scroll is dependent on the total height of content. Blank space can be, if the last element inside containerView has a large value of the bottom space to superview.
Or do you mean bounce effect? You can disable vertical bounce of scrollView.
You can also easily do this in code. In my case, I have a UIStackView that's the only subview of a UIScrollView
// Create the stack view
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
// Add things to the stack view....
// Add it as a subview to the scroll view
scrollView.addSubview(stackView)
// Use auto layout to pin the stack view's sides to the scroll view
NSLayoutConstraint.activate([
stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: stackView.trailingAnchor),
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: stackView.bottomAnchor)
])
// Now make sure the thing doesn't scroll horizontally
let margin: CGFloat = 40
scrollView.contentInset = UIEdgeInsets(top: margin, left: margin, bottom: margin, right: margin)
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
let stackViewWidthConstraint = stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
stackViewWidthConstraint.constant = -(margin * 2)
stackViewWidthConstraint.isActive = true
The NSLayoutConstraint.activate bit is taken from Dave DeLong's excellent UIView extension here: https://github.com/davedelong/MVCTodo/blob/master/MVCTodo/Extensions/UIView.swift#L26

Center Align UIImageview and Large UILabel AutoLayout

I have a UIImageView and a UILabel. Label has greater height than image, so I want to center align Y position for both.
Here is original case:
When I apply Center Y from image to label, label content is truncated.
Please can someone guide me for correct constraints... Thanks!
I am using the setup above in my storyboard. A UIImageView on the left and a UITextView on the right; setup in a UIViewController. I setup my constraints like this:
UIImageView
Width Equals: // Whatever you want
Height Equals: // Whatever you want
Align Center Y: Text View
Leading Space to Superview: 16
Trailing Space to Text View: 8
UITextView
Align Center Y: Image View
Trailing Space to Superview: 16
Leading Space to Image View: 8
Top Space to Top Layout Guide: 16
Height Equals: // Whatever you want; this will change
The center Y constraint will keep the UIImageView centered with the UITextView. The top space constraint on the UITextView is what will set the vertical positioning for the views. The height constraint on the UITextView is where the dynamic height portion comes in. Make an outlet to your view controller for the UITextView and the text view height constraint. Also set yourself as the text view's delegate. This will allow us to change everything dynamically as text in the text view is changed.
class ViewController: UIViewController, UITextViewDelegate {
#IBOutlet weak var textView: UITextView!
#IBOutlet weak var textViewHeight: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
self.textView.delegate = self
}
func textViewDidChange(textView: UITextView) {
// Ask the text view how much size it needs to fit its content if it has to
// fit in its current width but can grow vertically as much as it needs
let sizeToFitIn = CGSizeMake(textView.bounds.size.width, CGFloat(MAXFLOAT))
let newSize = self.textView.sizeThatFits(sizeToFitIn)
self.textViewHeight.constant = newSize.height
}
}
I don't use a center constraint if I want to center something because it doesn't work for me always either, as you said. What i do is i add a constraint for leading space and trailing space for X centering and top space and bottom space for Y centering.
That would center your label with 30px space on the left and right side. If you want to use the entire space just make the constant to 0. (For Y just change the other two --> Note to activate the constraint you have to click on the red line)

Resources