I have a ViewController, which has a tableView, and has two views on top of the table view. I need to collapse a view (outlined in red in the image), when the user scrolls up, and move another view (orange button), up with the table. I'm planning on using the scrollViewDidScroll delegate method to detect the offset of the table, and handle the collapsing with that.
How do I go about implementing this?
//Custom delegate method, which returns offset of scrollViewDidScroll
func didScrollScrollView(offset: CGFloat){
print(offset)
//I have the offset, which is -30 on load. How do I implement collapsing of the view highlighted in red?
}
you need to access the frame of the view or better its heightConstraint.
If you have a reference to the heightConstrain you can do:
var previousOffset: CGFloat = -30
func didScrollScrollView(offset: CGFloat){
let diff = previousOffset - offset
previousOffset = offset
var newHeight = heightConstraint.constant + diff
if newHeight < 0 {
newHeight = 0
} else if newHeight > 60 { // or whatever
newHeight = 60
}
heightConstraint.constant = newHeight
}
If you don't use Autolayout you need to update the frames manualy.
Also set clipsSubviews=true (clippedToBounds) in interface builder or in code
Related
I have created custom header but I don't know how to animate while scrolling.
Please check below image and let me know how to animate while scrolling.
This animated header in Fotmob app.
First of all add header view as UIvVew and add UIScrollView or UITableView below headerView same as screenshot and follow below step.
set a fixed height constraint to the header view (125 for example) and attach it to top, left and right.
make the UIScrollView below to use all the available space so set to zero top, bottom, left and right constraints.
connect the header view height constraint to the ViewController in order to have something like:
#IBOutlet var headerViewHeightConstraint: NSLayoutConstraint!
set the UIScrollView delegate to the ViewController
declare two properties to limit the maximum and the minimum height of the header view, fox example:
let headerViewMaxHeight: CGFloat = 125
let headerViewMinHeight: CGFloat = 44 + UIApplication.shared.statusBarFrame.height
The entire workaround is based on update the header view height constraint while the UIScrollView is scrolling, so let’s implement the UIScrollViewDelegate and the most important delegate for our case, the scrollViewDidScroll:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let headerViewMinHeight: CGFloat = 44 + UIApplication.shared.statusBarFrame.height
let yPos = mainScrollView.contentOffset.y
let newHeaderViewHeight: CGFloat = headerViewHeightConstraint.constant - yPos
if newHeaderViewHeight > headerViewMaxHeight {
// Here, Manage Your Score Format View
headerViewHeightConstraint.constant = max(headerViewMaxHeight, newHeaderViewHeight)
} else if newHeaderViewHeight < headerViewMinHeight {
headerViewHeightConstraint.constant = headerViewMinHeight
} else {
headerViewHeightConstraint.constant = newHeaderViewHeight
scrollView.contentOffset.y = 0 // block scroll view
}
}
I have created the same, Check the below image
Overview
TableView
Sample MVVM pattern
Swift 5.0 above
Xcode 11 above
Find the GIT URL for code
HeaderAnimation
I have simple UIScrollView with two subviews: UIView and UITableView set in vertical mode. Both of them have their own height constraint:
I set it like this:
tableViewHeightConstraint.constant = CGFloat(height) //height is calculated based on number of cells multiplied 130
calendarViewHeightConstraint.constant = UIApplication.shared.keyWindow!.rootViewController!.traitCollection.isIpad ? 630 : 470
But sometimes when I scroll to the bottom, and then add a new cell to the table view and recalculate height it seems that scroll of scroll view is locked, and I can bouncing but the scroll disappear and I can only bouncing, although I know that I can scroll to the content above or below the current view on the screen. What may be the reason?
I really have to do this like this. There is no possibility to put my view inside table view header view.
This is where I recalculate height:
func controllerDidChangeContent(_ controller: NSFetchedResultsController<NSFetchRequestResult>) {
tableView.endUpdates()
updateView()
updateTableViewHeight()
}
private func updateTableViewHeight() {
var height = goalFetchedResultsController.fetchedObjects!.count * 130
height += 45
if MyType.selected.hasMonthReport {
height += 130
}
if MyType.selected.hasAnnualReport {
height += 70
height += 130
}
tableViewHeightConstraint.constant = CGFloat(height)
}
New cell is added inside delegate of NSFetchedResultsController.
I'm thinking you need to change your calculation way of height of TableView like,
var height = tablView.contentSize.heigh // You can do + or - here
// your other stuff of calculation.
tableViewHeightConstraint.constant = CGFloat(height)
self.view.layoutIfNeeded() // You need to call after change constraint.
I want to scroll the UIView when collection view scrolls as shown in below video
func scrollViewDidScroll(_ scrollView: UIScrollView) {
print(scrollView.contentOffset.x)
let contentSize = self.propertyImageCollectionView.contentSize
let xOffSet = (((scrollView.contentOffset.x * self.propertyImageCollectionView.frame.width) / (contentSize.width - self.progressViewWidthConstratint.constant)))
let xValue = xOffSet + ((self.progressViewWidthConstratint.constant * self.progressViewLeadingConstraint.constant) / self.propertyImageCollectionView.frame.width)
print( self.progressViewWidthConstratint.constant)
print( xOffSet)
print(xValue)
if xValue > 0 && xValue < self.propertyImageCollectionView.frame.width - self.progressViewWidthConstratint.constant{
self.progressViewLeadingConstraint.constant = xValue
}
}
The view is not scrolling upto end of screen. It stops scrolling before some points. Where am I lacking in my code. I also tried to use KVO but not succeed. Do you have any alternative approach?
I have a UICollectionViewController and I added two UIViews as subviews. One is the purple UIView and above it is another white UIView, with the blue collection view getting scrolled up behind both.
Below those UIViews, I made the collectionView.contentInset from the top 300 (that's the total size of two UIViews' height). What I'm trying to accomplish is to scroll the collection view along with the two UIViews above. It's almost similar to the solution on this thread (Move a view when scrolling in UITableView), except when I override scrollViewDidScroll, the whole frame gets scrolled up and cells go behind the two Views. All I want is to scroll up the UIViews, and then scroll through the collection views. I feel like this might involve nested scroll views.
This was how I overrode scrollViewDidScroll:
var rect = self.view.frame
rect.origin.y = -scrollView.contentOffset.y - 300
self.view.frame = rect
EDIT: I posted a video that demonstrates what I want to do per iOS Tumblr app: https://youtu.be/elfxtzoiHQo
I have achieved the same requirement through some basic steps as below.
//Declare the view which is going to be added as header view
let requiredView = UIView()
//Add your required view as subview of uicollectionview backgroundView view like as
collectionView.backgroundView = UIView()
collectionView.backgroundView?.addSubview(requiredView)
//After that control the frame of requiredHeaderView in scrollViewDidScroll delegate method like
func scrollViewDidScroll(scrollView: UIScrollView) {
let per:CGFloat = 60 //percentage of required view to move on while moving collection view
let deductValue = CGFloat(per / 100 * requiredView.frame.size.height)
let offset = (-(per/100)) * (scrollView.contentOffset.y)
let value = offset - deductValue
let rect = requiredView.frame
self.requiredView.frame = CGRectMake(rect.origin.x, value, rect.size.width, rect.size.height)
}
It sounds like what you want is a header.
you can specify a class or nib for the header with either of these:
self.collectionView.registerClass(_:, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier:)
registerNib(_:, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: )
you should also specify a reference height if you are using a flow layout: self.flowLayout.headerReferenceHeight = ...
then you can provide the header via your UICollectionViewController in: collectionView(_:, viewForSupplementaryElementOfKind:, at:) by checking for the section header kind.
Here is a decent tutorial on this for reference: https://www.raywenderlich.com/78551/beginning-ios-collection-views-swift-part-2
You have a library CSStickyHeaderFlowLayout
From the ReadMe:
UICollectionView replacement of UITableView. Do even more like Parallax Header, Sticky Section Header. Made for iOS 7.
Try this.
headerViewYConstraint is header view's top y constraint.
Stores the last contact offset.
var lastContentOffset: CGFloat = 0
override func scrollViewDidScroll(scrollView: UIScrollView) {
if scrollView != contentScrollView {
if scrollView.dragging || scrollView.decelerating {
let newOffset = scrollView.contentOffset.y
let headerViewHeight = headerView.frame.width
if headerViewHeight > 0 && scrollView.contentSize.height > view.frame.height + headerViewHeight{
var topOffset = newOffset == 0 ? 0.0 : (headerViewYConstraint.constant + lastContentOffset - newOffset)
topOffset = min(0, max(topOffset, -headerViewHeight))
if headerViewYConstraint.constant > topOffset || newOffset < headerViewHeight || lastDirectionalContentOffset - newOffset > cellHeight(){
headerViewYConstraint.constant = topOffset
}
} else {
headerViewYConstraint.constant = 0
}
lastContentOffset = newOffset
}
}
}
I need to show UIRefreshControl at the bottom of the UITableView like in the following Objective-C libraries:
https://github.com/emenegro/bottom-pull-to-refresh
https://github.com/vlasov/CCBottomRefreshControl
but I'm using Swift and noticed some problems when using "Bridging-Header.h" file with these libraries.
What is the alternative and the easiest way to achieve such behavior?
Thanks in advance.
I got into the same problem in my project, and found this answer. You can add a UIActivityIndicatorView instance on the bottom of the table, initially hidden, and when it enters the if condition above, unhide it and start its animation.
You may need to change the table's bottom offset, add "1 cell" height to it while it's loading and place it back when it finishes inside the if condition as well.
In Swift 3:
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
// Use this 'canLoadFromBottom' variable only if you want to load from bottom iff content > table size
let contentSize = scrollView.contentSize.height
let tableSize = scrollView.frame.size.height - scrollView.contentInset.top - scrollView.contentInset.bottom
let canLoadFromBottom = contentSize > tableSize
// Offset
let currentOffset = scrollView.contentOffset.y
let maximumOffset = scrollView.contentSize.height - scrollView.frame.size.height
let difference = maximumOffset - currentOffset
// Difference threshold as you like. -120.0 means pulling the cell up 120 points
if canLoadFromBottom, difference <= -120.0 {
// Save the current bottom inset
let previousScrollViewBottomInset = scrollView.contentInset.bottom
// Add 50 points to bottom inset, avoiding it from laying over the refresh control.
scrollView.contentInset.bottom = previousScrollViewBottomInset + 50
// loadMoreData function call
loadMoreDataFunction(){ result in
// Reset the bottom inset to its original value
scrollView.contentInset.bottom = previousScrollViewBottomInset
}
}
}
var refreshControl: UIRefreshControl!
//Pull to refresh
self.refreshControl = UIRefreshControl()
self.refreshControl.attributedTitle = NSAttributedString(string: "Pull to refresh")
self.refreshControl.addTarget(self, action: "pullToRefresh:", forControlEvents: UIControlEvents.ValueChanged)
self.messageTableView.addSubview(refreshControl)
//Refresh the table view (pull to refresh)
func pullToRefresh(sender:AnyObject)
{
print("pull to refresh...")
}