Currently tableview cells look like this: current cell image When my app first opens it looks like the picture on the left and when I scroll one page down it looks like the picture on the right.
However I want it to look like a carousel: like this
I want it so when it I scroll (paging enabled) the bottom cell comes to middle cell spot, and the new bottom cell is at the old bottom cell spot, and the middle cell is at the top cell spot.
Possible Solutions/Questions:
How would I make the UITableViewCells infinitely loop, and thus start off with the ability to scroll up and down, since the last cell would be above the first cell to begin with. Right now there is no cell above the first one, which poses a problem.
CODE:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
targetContentOffset.pointee.y = self.tableView.contentOffset.y + 100
}
I want to basically snap the bottom card/ top card that is swiping to the middle of the screen.
Related
I have a list of cells of varying height, and I want the scroll to top perfectly at the top of a cell.
For this I can use
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
And I can set the targetContentOffset to the top of a cells frame.
However if cells yet to be laid out have a height different from their estimated height, then this destination cells origin will change, and I don't get a chance to account for this.
Is there anyway to land perfectly on a cell after a scroll when the origin can change?
I’m trying to implement a custom top bar that behaves similarly to the iOS 11+ large title navigation bar, where the large title section of the bar collapses when scrolling down the content:
The difference is that my bar needs a custom height and also a bottom section that doesn’t collapse when scrolled. I managed to get that part working:
The bar is implemented using a UIStackView & with some non-required layout constraints, but I believe its internal implementation is not relevant. The most important thing is that the height of the bar is tied to scrollview's top contentInset. These are driven by scrollview's contentOffset in UIScrollViewDelegate.scrollViewDidScroll method:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let topInset = (-scrollView.contentOffset.y).limitedBy(topBarHeightRange)
// changes both contentInset and scrollIndicatorInsets
adjustTopContentInset(topInset)
// changes top bar height
heightConstraint?.constant = topInset
adjustSmallTitleAlpha()
}
topBarHeightRange stores the minimum and maximum bar height
One thing that I'm having a problem with is that when the user stops scrolling the scrollview, it's possible that the bar will end up in a semi-collapsed state. Again, let's look at the desired behavior:
Content offset is snapped to either the compact or expanded height, whichever is "closer". I'm trying to achieve the same in UIScrollViewDelegate.scrollViewWillEndDragging method:
func scrollViewWillEndDragging(_ scrollView: UIScrollView,
withVelocity velocity: CGPoint,
targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let targetY = targetContentOffset.pointee.y
// snaps to a "closer" value
let snappedTargetY = targetY.snappedTo([topBarHeightRange.lowerBound, topBarHeightRange.upperBound].map(-))
targetContentOffset.pointee.y = snappedTargetY
print("Snapped: \(targetY) -> \(snappedTargetY)")
}
The effect is far from perfect:
When I look at the printout it shows that the targetContentOffset is modified correctly. However, visually in the app the content offset is snapped only to the compact height but not to the expanded height (you can observe that the large "Title" label ends up being cut in half instead of back to the "expanded" position.
I suspect this issue has something to do with changing the contentInset.top while the user is scrolling, but I can't figure out how to fix this behavior.
It's a bit hard to explain the problem, so I hope the GIFs help. Here's the repo: https://github.com/AleksanderMaj/ScrollView
Any ideas how to make the scrollview/bar combo snap to compact/expanded height properly?
I took a look at your project and liked your implementation.
I came up with a solution in your scrollViewWillEndDragging method by adding the following code at the end of method:
if abs(targetY) < abs(snappedTargetY) {
scrollView.setContentOffset(CGPoint(x: 0, y: snappedTargetY), animated: true)
}
Basically, if the scroll down amount is not worth hiding the large title (it happens if targetY is less than snappedTargetY) then just scroll to value of snappedTargetY to show the large title back.
Seems to be working for now, but let me know if you encounter any bugs or find a way to improve.
Whole scrollViewWillEndDragging method:
func scrollViewWillEndDragging(_ scrollView: UIScrollView,
withVelocity velocity: CGPoint,
targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let targetY = targetContentOffset.pointee.y
// snaps to a "closer" value
let snappedTargetY = targetY.snappedTo([topBarHeightRange.lowerBound, topBarHeightRange.upperBound].map(-))
targetContentOffset.pointee.y = snappedTargetY
if abs(targetY) < abs(snappedTargetY) {
scrollView.setContentOffset(CGPoint(x: 0, y: snappedTargetY), animated: true)
}
print("Snapped: \(targetY) -> \(snappedTargetY)")
}
So, I have a infinite scrolling tableView of same size cells. Each cell has just a single image and what I'm trying to achieve is that as soon as a scroll flick happens, I'm trying to determine at what indexPath it will arrive at and preload Images for that index only.
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let contentOffset = CGPoint(x: targetContentOffset.pointee.x, y: targetContentOffset.pointee.y)
let totalRowsVisible = Int(tableView.bounds.height / rowHeight) + 1
let rowNumber = tableView.indexPathForRow(at: contentOffset)?.row ?? Int((contentOffset.y + offSetParameter) / rowHeight)
}
Right now this is what I'm using to determine the indexPath of tableview as soon as dragging ends but this is giving me incorrect results many times (especially when I scroll really fast).
Also when I add more rows to the tableView (at the bottom), the contentOffset changes weirdly and targetContentOffset Parameter is loaded somewhere else.
I have not found any solution anywhere.
EDIT: So, in the comments people have asked my specific requirement. The requirement exactly is as stated, that whenever a scroll begins and dragging ends, I have to determine what destination the scroll will end at and begin fetching content for that row before reaching the destination. So no matter how fast or slow the scroll occurs I just download images for the indexPath
So I have a collection view horizontal and I want when the user scroll to set the scroll where I want.
#IBOutlet var joke_cards: UICollectionView!
extension ViewController: UIScrollViewDelegate{
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
joke_cards.contentOffset.x = scrollView.contentOffset.x + 1000
joke_cards.reloadData()
}
}
But this doesn't work, it scrolls normally, I want to specify how much to scroll, any suggestions?
So I think I need to be a bit more clear, what I want is to flip through some cards horizontally thats why I need when the user stars to swipe to show the next cell in the middle
If you want to manually scroll the user to a certain area you need first to define the area you need to scroll into view. This will depend a little bit on where exactly you are trying to scroll, but if the goal is just to scroll 1000 points to the right you can define the rect and scrolling like so:
let destinationRect = CGRect(x: scrollView.contentOffset.x + 1000, y: scrollView.contentOffset.y, width: 1, height: 1)
scrollView.scrollRectToVisible(destinationRect, animated: true)
Please note that scrolling will stop as soon as any part of the rect is visible, so if you want contentOffset.x + 1000 to be in the center you will need to do some more math to create the destinationRect.
The other option, since you are using a UICollectionView is to figure out which cell is at the point you want to scroll to, and scroll that cell to a certain position. In this example I safely unwrap the optional indexPath at the point you specified, and scroll that cell to be centered horizontally in the collectionView:
if let indexPath = self.joke_cards.indexPathForItem(at: CGPoint(x: scrollView.contentOffset.x, y: scrollView.frame.midY)) {
self.joke_cards.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
}
I have a horizontal scrollable collectionView with two cells that take up the screen. Inside those cells is an embedded collection view that scrolls vertically. Is there a way for me to scroll the vertical CV inside the first cell, while using its ContentOffset to scroll the vertical CV in the second cell?
Here's how I'm trying to accomplish it:
let scrollView = notification.userInfo!["scrollView"] as! UICollectionView
if scrollView.contentOffset.y <= 250.0 {
childViewControllerForPosts.collectionViewForGroups?.collectionView.setContentOffset(CGPointMake(0, scrollView.contentOffset.y), animated: false)
self.topVerticalConstraint?.constant = -scrollView.contentOffset.y
}
else {
if self.topVerticalConstraint?.constant > -250 {
// Make sure it stays at -250
self.topVerticalConstraint?.constant = -250
}
}
The FeedCell would be the main collection view (which horizontally scrolls) that contains the vertical scrolling collection view. I'm trying to access the second one to change the vertical contentOffset when I scroll the one in first one.
Here's how I'm trying to save the variable that should contain the second main collection view:
collectionViewForGroups = collectionView(collectionView!, cellForItemAtIndexPath: NSIndexPath(forItem: 1, inSection: 0)) as? FeedCell
EDIT:
Note that when I scroll horizontally, the vertical scroll view didn't change. But I want it to change with the one I just scrolled in the gif. If I were to scroll the 2nd vertical collection view, the UIView above will reappear because the topLayConstraint changes due to the vertical contentOffset change.