Custom UIScrollView paging with scrollViewWillEndDragging - ios

I'm trying to use the new scrollViewWillEndDragging:withVelocity:targetContentOffset: UIScrollView delegate call in iOS 5 but i can't seem to get it to actually respond to me correctly. I'm changing the targetContentOffset->x value but it never ends up being used. I know the code is being ran because it'll hit breakpoints in that function. I've even tried setting the offset value to a hard coded number so i'd know where it would end up but it never works.
Has anyone been able to use this correctly and make it work? Is there any other delegate call that must be implemented in order for this to work?
Here's my code in case someone sees something wrong with it:
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
// goodOffsetX returns the contentOffset i want the scrollView to stop at
CGFloat goodOffsetX = [self _horizontalContentOffsetForTargetHorizontalContentOffset:(*targetContentOffset).x velocity:velocity.x];
NSLog( #" " );
NSLog( #"scrollViewWillEndDragging" );
NSLog( #" velocity: %f", velocity.x );
NSLog( #" currentX: %f", scrollView.contentOffset.x );
NSLog( #" uikit targetX: %f", (*targetContentOffset).x );
NSLog( #" pagedX: %f", goodOffsetX );
targetContentOffset->x = goodOffsetX;
}

You can implement custom paging with this code:
- (float) pageWidth {
return ((UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout).itemSize.width +
((UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout).minimumInteritemSpacing;
}
- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {
CGFloat pageWidth = self.collectionView.frame.size.width + 10 /* Optional Photo app like gap between images. Or use [self pageWidth] in case if you want the next page be also visible */;
_currentPage = floor((self.collectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
NSLog(#"Dragging - You are now on page %i", _currentPage);
}
- (void) scrollViewWillEndDragging:(UIScrollView*)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint*)targetContentOffset {
CGFloat pageWidth = self.collectionView.frame.size.width + 10; // [self pageWidth]
int newPage = _currentPage;
if (velocity.x == 0) { // slow dragging not lifting finger
newPage = floor((targetContentOffset->x - pageWidth / 2) / pageWidth) + 1;
}
else {
newPage = velocity.x > 0 ? _currentPage + 1 : _currentPage - 1;
if (newPage < 0)
newPage = 0;
if (newPage > self.collectionView.contentSize.width / pageWidth)
newPage = ceil(self.collectionView.contentSize.width / pageWidth) - 1.0;
}
NSLog(#"Dragging - You will be on %i page (from page %i)", newPage, _currentPage);
*targetContentOffset = CGPointMake(newPage * pageWidth, targetContentOffset->y);
}
Of course you must set pagingEnabled = NO.
_currentPage is a class iVar.
Thanks to http://www.mysamplecode.com/2012/12/ios-scrollview-example-with-paging.html for pointing the right way.

SWIFT 3
With a demo here https://github.com/damienromito/CollectionViewCustom
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth = Float(itemWidth + itemSpacing)
let targetXContentOffset = Float(targetContentOffset.pointee.x)
let contentWidth = Float(collectionView!.contentSize.width )
var newPage = Float(self.pageControl.currentPage)
if velocity.x == 0 {
newPage = floor( (targetXContentOffset - Float(pageWidth) / 2) / Float(pageWidth)) + 1.0
} else {
newPage = Float(velocity.x > 0 ? self.pageControl.currentPage + 1 : self.pageControl.currentPage - 1)
if newPage < 0 {
newPage = 0
}
if (newPage > contentWidth / pageWidth) {
newPage = ceil(contentWidth / pageWidth) - 1.0
}
}
let point = CGPoint (x: CGFloat(newPage * pageWidth), y: targetContentOffset.pointee.y)
targetContentOffset.pointee = point
}

I was able to run a quick test and got this to correctly fire and make my object stop as desired. I did this using the following simple test:
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
targetContentOffset->x = scrollView.contentOffset.x - 10;
}
It seems that this method is likely not the issue in your code, but it is more likely that your 'goodOffsetX' is not correctly calculating a valid value to stop at.

Swift 2.2:
extension SomeCollectionViewController {
override func scrollViewWillBeginDragging(scrollView: UIScrollView) {
let pageWidth = Float(collectionView!.frame.size.width)
let xCurrentOffset = Float(collectionView!.contentOffset.x)
currentPage = floor((xCurrentOffset - pageWidth / 2) / pageWidth) + 1
}
override func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth = Float(collectionView!.frame.size.width)
let targetXContentOffset = Float(targetContentOffset.memory.x)
let contentWidth = Float(collectionView!.contentSize.width)
var newPage = currentPage
if velocity.x == 0 {
newPage = floor((targetXContentOffset - pageWidth / 2) / pageWidth) + 1
} else {
newPage = velocity.x > 0 ? currentPage + 1 : currentPage - 1
if newPage < 0 {
newPage = 0
}
if newPage > contentWidth / pageWidth {
newPage = ceil(contentWidth / pageWidth) - 1.0
}
}
targetContentOffset.memory.x = CGFloat(newPage * pageWidth)
}
}
I also used the collectionView?.decelerationRate = UIScrollViewDecelerationRateFast as suggested by #skagedal to improve page speed.

public func scrollViewWillEndDragging(_ scrollView: UIScrollView ,withVelocity velocity: CGPoint, targetContentOffset:
UnsafeMutablePointer<CGPoint>){
let pageWidth = Float(appWidth + itemSpacing)
let targetXContentOffset = Float(targetContentOffset.pointee.x)
var newPage = Float(currentPageIndex)
// I use this way calculate newPage:
newPage = roundf(targetXContentOffset / pageWidth);
//if velocity.x == 0 {
// newPage = floor( (targetXContentOffset - Float(pageWidth) / 2) / Float(pageWidth)) + 1.0
//} else {
// newPage = Float(velocity.x > 0 ? newPage + 1 : newPage - 1)
// if newPage < 0 {
// newPage = 0
// }
// if (newPage > contentWidth / pageWidth) {
// newPage = ceil(contentWidth / pageWidth) - 1.0
// }
//}
let targetOffsetX = CGFloat(newPage * pageWidth)
let point = CGPoint (x: targetOffsetX, y: targetContentOffset.pointee.y)
targetContentOffset.pointee = point
}

Related

UICollectionView scroll issue with paging enabled after tap

I have a collectionView that returns back to the first cell when I tap a new cell in the second page.
Although it should be the second page, I am getting Page 0.0 in the second one and 0.0 in the first one too.
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageWidth = collectionCustom.frame.size.width
let page = floor((collectionCustom.contentOffset.x - pageWidth / 2) / pageWidth) + 1
print("Page number: \(page)")
}
I have nothing happening in the didSelectItem method, so why am I getting that scroll?
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: (inout CGPoint)) {
let pageWidth: Float = Float(collectionCustom.frame.width)
// width + space
let currentOffset: Float = Float(collectionCustom.contentOffset.x)
let targetOffset: Float = Float(targetContentOffset.x)
var newTargetOffset: Float = 0
if targetOffset > currentOffset {
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth
}
else {
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth
}
if newTargetOffset < 0 {
newTargetOffset = 0
}
else if newTargetOffset > Float(collectionCustom.contentSize.width) {
newTargetOffset = Float(collectionCustom.contentSize.width)
}
targetContentOffset.x = CGFloat(currentOffset)
collectionCustom.setContentOffset(CGPoint(x: CGFloat(newTargetOffset), y: CGFloat(0)), animated: true)
var index: Int = Int(newTargetOffset / pageWidth)
var cell: UICollectionViewCell? = collectionCustom.cellForItem(at: IndexPath(item: index, section: 0))
cell = collectionCustom.cellForItem(at: IndexPath(item: index + 1, section: 0))
}
}
If you want to current page than you should get you page from scrollview as this
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = round(scrollView.contentOffset.x / collectionCustom.frame.width) // You can change width according you
pageControl.currentPage = Int(pageNumber)
}

UITableView - Prevent overscroll without disabling bounce

Is there anyway to prevent a tableview from being dragged down past the top while still allowing it to bounce?
I have a tableview that I can drag up to cover full-screen. When dragging it back down, it will sometimes still be in scrolling mode so instead of dragging the entire container view down, it will allow the tableview to scroll beyond the top.
If I disable bounce, this fixes it but I'd like to somehow keep the bounce but disable the ability to catch it in that state and continue dragging.
Something like:
if (isBouncing){
_tableview.enabled = NO;
}else{
_tableview.enabled = YES;
}
I also tried the below code but it basically does the same thing as [_tableView setBounces:NO]
if (scrollView.contentOffset.y < 0) {
[scrollView setContentOffset:CGPointMake(0, 0)];
}
Try this:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGPoint p = scrollView.contentOffset;
if(scrollView.contentOffset.y<0)
{ p.y=0;
scrollView.contentOffset = p;
}
}
I tried adding this to scrollViewDidScroll and it prevented from over scrolling when dragging but allowed over scrolling by deceleration (bounce):
func scrollViewDidScroll(scrollView: UIScrollView) {
if (scrollView.contentOffset.y <= 0.0) {
scrollView.scrollEnabled = false
scrollView.scrollEnabled = true
}
}
I think this answer should help you https://stackoverflow.com/a/28570023/4755417
func scrollViewWillEndDragging(scrollView: UIScrollView!, withVelocity velocity: CGPoint, targetContentOffset: UnsafePointer<CGPoint>) {
var pageWidth = Float(200 + 30)
var currentOffset = Float(scrollView.contentOffset.x)
var targetOffset = Float(targetContentOffset.memory.x)
var newTargetOffset = Float(0)
var scrollViewWidth = Float(scrollView.contentSize.width)
if targetOffset > currentOffset {
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth
} else {
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth
}
if newTargetOffset < 0 {
newTargetOffset = 0
} else if newTargetOffset > currentOffset {
newTargetOffset = currentOffset
}
Float(targetContentOffset.memory.x) == currentOffset
scrollView.setContentOffset(CGPointMake(CGFloat(newTargetOffset), 0), animated: true)
}

UICollectionView with Paging Enable

I have to create Grid view like Appstore iOS app. I want to do this with UICollectionView paging. I have also implemented the code but not able to scroll like that.
What I want to do is there will one image in Center and at both sides(left and right), it should show some portion of previous and next image. I have set Frame for UICollectionView is 320*320. cell size is 290*320.(cell min spacing is 10)1
Below are two links which depicts my requirement. Thanks in advance.
(This is what I want) 2
Have you tried setting the scroll direction of your UICollectionViewFlowLayout to horizontal?
[yourFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
You'll need to enable paging on your collection view like so:
[yourCollectionView setPagingEnabled:YES];
I took shtefane's answer and improved on it. Enter your own cellWidth and cellPadding values.
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
withVelocity:(CGPoint)velocity
targetContentOffset:(inout CGPoint *)targetContentOffset
{
CGFloat cellWidth = self.cellWidth;
CGFloat cellPadding = 9;
NSInteger page = (scrollView.contentOffset.x - cellWidth / 2) / (cellWidth + cellPadding) + 1;
if (velocity.x > 0) page++;
if (velocity.x < 0) page--;
page = MAX(page,0);
CGFloat newOffset = page * (cellWidth + cellPadding);
targetContentOffset->x = newOffset;
}
If you use pagining in collectionView it will scroll by one page Not one cell. You can disable pagining and implement ScrollViewDelegate
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
CGFloat pageW = 300;
int page = scrollView.contentOffset.x / pageW;
CGFloat newOffset =(page + ((velocity.x > 0)? 1 : -1)) * (pageW - 20);
CGPoint target = CGPointMake(newOffset, 0);
targetContentOffset = &target;
NSLog(#"end Drag at %f /%i /%f",scrollView.contentOffset.x, page, velocity.x);
}
Only one different from standart paging: If you drag fast Collection will scroll more than one cell.
And don't forget to add UIScrollViewDelegate
Just use collectionView.isPagingEnabled = true;
Here's a working swift4 version of Rickster answer:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let cellWidth = 174 as CGFloat
let cellPadding = 10 as CGFloat
var page = (scrollView.contentOffset.x - cellWidth / 2) / (cellWidth + cellPadding) + 1
if (velocity.x > 0) { page += 1 }
if (velocity.x < 0) { page -= 1 }
page = max(page,0)
targetContentOffset.pointee.x = page * (cellWidth + cellPadding)
}
Ref to Rickster's answer and I rewrite with Swift 4:
/* paging */
extension AlbumViewController {
/* In case the user scrolls for a long swipe, the scroll view should animate to the nearest page when the scrollview decelerated. */
override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
scrollToPage(scrollView, withVelocity: CGPoint(x:0, y:0))
}
override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
scrollToPage(scrollView, withVelocity: velocity)
}
func scrollToPage(_ scrollView: UIScrollView, withVelocity velocity: CGPoint) {
let cellWidth: CGFloat = cellSize
let cellPadding: CGFloat = 10
var page: Int = Int((scrollView.contentOffset.x - cellWidth / 2) / (cellWidth + cellPadding) + 1)
if velocity.x > 0 {
page += 1
}
if velocity.x < 0 {
page -= 1
}
page = max(page, 0)
let newOffset: CGFloat = CGFloat(page) * (cellWidth + cellPadding)
scrollView.setContentOffset(CGPoint(x:newOffset, y:0), animated: true)
}
}
full source is here
this supports RTL (Right to Left)
collectionView.decelerationRate = .fast
// paging
extension ViewController: UIScrollViewDelegate {
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.dragStartPoint = scrollView.contentOffset
}
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let isRTL = UIApplication.shared.userInterfaceLayoutDirection == .rightToLeft
let pageWidth = UIScreen.main.bounds.size.width - ViewController.left - ViewController.right + ViewController.lineSpacing
if scrollView.contentOffset.x == targetContentOffset.pointee.x { // no decelerate
if fabsf(Float(self.dragStartPoint.x - scrollView.contentOffset.x)) > 40 { // min move distance = 40
let dragLeft = self.dragStartPoint.x < scrollView.contentOffset.x
if dragLeft {
self.currentPage = isRTL ? self.currentPage - 1 : self.currentPage + 1
} else {
self.currentPage = isRTL ? self.currentPage + 1 : self.currentPage - 1
}
}
} else if scrollView.contentOffset.x > targetContentOffset.pointee.x {
let maxRight = scrollView.contentSize.width - UIScreen.main.bounds.size.width
if scrollView.contentOffset.x <= maxRight { // not right bounce
self.currentPage = isRTL ? self.currentPage + 1 : self.currentPage - 1
}
} else {
if scrollView.contentOffset.x >= 0 { // not left bounce
self.currentPage = isRTL ? self.currentPage - 1 : self.currentPage + 1
}
}
self.currentPage = max(0, self.currentPage)
self.currentPage = min(self.numberOfPages - 1, self.currentPage)
var offset = targetContentOffset.pointee
if isRTL {
offset.x = CGFloat(self.numberOfPages - self.currentPage - 1) * pageWidth
} else {
offset.x = CGFloat(self.currentPage) * pageWidth
}
targetContentOffset.pointee = offset
}
}

UICollectionView horizontal paging with 3 items

I need to show 3 items in a UICollectionView, with paging enabled like this
but I am getting like this
I have made custom flow, plus paging is enabled but not able to get what i need. How can i achieve this or which delegate should i look into, or direct me to some link from where i can get help for this scenario.
- (void)awakeFromNib
{
self.itemSize = CGSizeMake(480, 626);
self.minimumInteritemSpacing = 112;
self.minimumLineSpacing = 112;
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.sectionInset = UIEdgeInsetsMake(0, 272, 0, 272);
}
Edit:
Demo link: https://github.com/raheelsadiq/UICollectionView-horizontal-paging-with-3-items
After a lot searching I did it, find the next point to scroll to and disable the paging. In scrollviewWillEndDragging scroll to next cell x.
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
float pageWidth = 480 + 50; // width + space
float currentOffset = scrollView.contentOffset.x;
float targetOffset = targetContentOffset->x;
float newTargetOffset = 0;
if (targetOffset > currentOffset)
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth;
else
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth;
if (newTargetOffset < 0)
newTargetOffset = 0;
else if (newTargetOffset > scrollView.contentSize.width)
newTargetOffset = scrollView.contentSize.width;
targetContentOffset->x = currentOffset;
[scrollView setContentOffset:CGPointMake(newTargetOffset, scrollView.contentOffset.y) animated:YES];
}
I also had to make the left and right small and center large, so i did it with transform.
The issue was finding the index, so that was very difficult to find.
For transform left and right in this same method use the newTargetOffset
int index = newTargetOffset / pageWidth;
if (index == 0) { // If first index
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
[UIView animateWithDuration:ANIMATION_SPEED animations:^{
cell.transform = CGAffineTransformIdentity;
}];
cell = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index + 1 inSection:0]];
[UIView animateWithDuration:ANIMATION_SPEED animations:^{
cell.transform = TRANSFORM_CELL_VALUE;
}];
}else{
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
[UIView animateWithDuration:ANIMATION_SPEED animations:^{
cell.transform = CGAffineTransformIdentity;
}];
index --; // left
cell = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
[UIView animateWithDuration:ANIMATION_SPEED animations:^{
cell.transform = TRANSFORM_CELL_VALUE;
}];
index ++;
index ++; // right
cell = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
[UIView animateWithDuration:ANIMATION_SPEED animations:^{
cell.transform = TRANSFORM_CELL_VALUE;
}];
}
And in cellForRowAtIndex add
if (indexPath.row == 0 && isfirstTimeTransform) { // make a bool and set YES initially, this check will prevent fist load transform
isfirstTimeTransform = NO;
}else{
cell.transform = TRANSFORM_CELL_VALUE; // the new cell will always be transform and without animation
}
Add these two macros too or as u wish to handle both
#define TRANSFORM_CELL_VALUE CGAffineTransformMakeScale(0.8, 0.8)
#define ANIMATION_SPEED 0.2
The end result is
Part one of #Raheel Sadiq answer in Swift 3, without Transform.
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth: Float = Float(self.collectionView.frame.width / 3) //480 + 50
// width + space
let currentOffset: Float = Float(scrollView.contentOffset.x)
let targetOffset: Float = Float(targetContentOffset.pointee.x)
var newTargetOffset: Float = 0
if targetOffset > currentOffset {
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth
}
else {
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth
}
if newTargetOffset < 0 {
newTargetOffset = 0
}
else if (newTargetOffset > Float(scrollView.contentSize.width)){
newTargetOffset = Float(Float(scrollView.contentSize.width))
}
targetContentOffset.pointee.x = CGFloat(currentOffset)
scrollView.setContentOffset(CGPoint(x: CGFloat(newTargetOffset), y: scrollView.contentOffset.y), animated: true)
}
Swift 3.0
Complete Solution based on Raheel Sadiq
var isfirstTimeTransform:Bool = true
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell : UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCustomViewCell", for: indexPath)
if (indexPath.row == 0 && isfirstTimeTransform) {
isfirstTimeTransform = false
}else{
cell.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
}
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.bounds.width/3, height: collectionView.bounds.height)
}
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
// Simulate "Page" Function
let pageWidth: Float = Float(self.collectionView.frame.width/3 + 20)
let currentOffset: Float = Float(scrollView.contentOffset.x)
let targetOffset: Float = Float(targetContentOffset.pointee.x)
var newTargetOffset: Float = 0
if targetOffset > currentOffset {
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth
}
else {
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth
}
if newTargetOffset < 0 {
newTargetOffset = 0
}
else if (newTargetOffset > Float(scrollView.contentSize.width)){
newTargetOffset = Float(Float(scrollView.contentSize.width))
}
targetContentOffset.pointee.x = CGFloat(currentOffset)
scrollView.setContentOffset(CGPoint(x: CGFloat(newTargetOffset), y: scrollView.contentOffset.y), animated: true)
// Make Transition Effects for cells
let duration = 0.2
var index = newTargetOffset / pageWidth;
var cell:UICollectionViewCell = self.collectionView.cellForItem(at: IndexPath(row: Int(index), section: 0))!
if (index == 0) { // If first index
UIView.animate(withDuration: duration, delay: 0.0, options: [ .curveEaseOut], animations: {
cell.transform = CGAffineTransform.identity
}, completion: nil)
index += 1
cell = self.collectionView.cellForItem(at: IndexPath(row: Int(index), section: 0))!
UIView.animate(withDuration: duration, delay: 0.0, options: [ .curveEaseOut], animations: {
cell.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
}, completion: nil)
}else{
UIView.animate(withDuration: duration, delay: 0.0, options: [ .curveEaseOut], animations: {
cell.transform = CGAffineTransform.identity;
}, completion: nil)
index -= 1 // left
if let cell = self.collectionView.cellForItem(at: IndexPath(row: Int(index), section: 0)) {
UIView.animate(withDuration: duration, delay: 0.0, options: [ .curveEaseOut], animations: {
cell.transform = CGAffineTransform(scaleX: 0.8, y: 0.8);
}, completion: nil)
}
index += 1
index += 1 // right
if let cell = self.collectionView.cellForItem(at: IndexPath(row: Int(index), section: 0)) {
UIView.animate(withDuration: duration, delay: 0.0, options: [ .curveEaseOut], animations: {
cell.transform = CGAffineTransform(scaleX: 0.8, y: 0.8);
}, completion: nil)
}
}
}
#raheel-sadiq answer is great but pretty hard to understand, I think. Here's a much readable version, in my opinion:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint,
targetContentOffset: UnsafeMutablePointer<CGPoint>) {
//minimumLineSpacing and insetForSection are two constants in my code
//this cell width is for my case, adapt to yours
let cellItemWidth = view.frame.width - (insetForSection.left + insetForSection.right)
let pageWidth = Float(cellItemWidth + minimumLineSpacing)
let offsetXAfterDragging = Float(scrollView.contentOffset.x)
let targetOffsetX = Float(targetContentOffset.pointee.x)
let pagesCountForOffset = pagesCount(forOffset: offsetXAfterDragging, withTargetOffset: targetOffsetX, pageWidth: pageWidth)
var newTargetOffsetX = pagesCountForOffset * pageWidth
keepNewTargetInBounds(&newTargetOffsetX, scrollView)
//ignore target
targetContentOffset.pointee.x = CGFloat(offsetXAfterDragging)
let newTargetPoint = CGPoint(x: CGFloat(newTargetOffsetX), y: scrollView.contentOffset.y)
scrollView.setContentOffset(newTargetPoint, animated: true)
//if you're using pageControl
pageControl.currentPage = Int(newTargetOffsetX / pageWidth)
}
fileprivate func pagesCount(forOffset offset: Float, withTargetOffset targetOffset: Float, pageWidth: Float) -> Float {
let isRightDirection = targetOffset > offset
let roundFunction = isRightDirection ? ceilf : floorf
let pagesCountForOffset = roundFunction(offset / pageWidth)
return pagesCountForOffset
}
fileprivate func keepNewTargetInBounds(_ newTargetOffsetX: inout Float, _ scrollView: UIScrollView) {
if newTargetOffsetX < 0 { newTargetOffsetX = 0 }
let contentSizeWidth = Float(scrollView.contentSize.width)
if newTargetOffsetX > contentSizeWidth { newTargetOffsetX = contentSizeWidth }
}
you will have to override targetContentOffsetForProposedContentOffset:withScrollingVelocity: method of the flow layout. This way you snap the stopping point of the scrollview.
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
CGFloat yOffset = MAXFLOAT;
CGRect proposedRect;
proposedRect.origin = proposedContentOffset;
proposedRect.size = self.collectionView.bounds.size;
CGPoint proposedCenterPoint = CGPointMake(CGRectGetMidX(proposedRect), CGRectGetMidY(proposedRect)) ;
NSArray *array = [super layoutAttributesForElementsInRect:proposedRect];
for (UICollectionViewLayoutAttributes *attributes in array)
{
CGFloat newOffset = attributes.center.y - proposedCenterPoint.y;
if ( fabsf(newOffset) < fabs(yOffset))
{
yOffset = newOffset;
}
}
return CGPointMake(proposedContentOffset.x, proposedContentOffset.y + yOffset);
}
Also you will beed to set the sectionInset of the flow layout to center the first cell and the last cell. My example is the height but easy to switch to width.
CGFloat height = (self.collectionView.bounds.size.height / 2.0 ) - (self.itemSize.height / 2.0) ;
self.sectionInset = UIEdgeInsetsMake(height, 30.0, height, 30.0) ;
Mine solution to horizontal collection view paging
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if scrollView == collectionView { collectionView.scrollToPage() }
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if scrollView == collectionView { if !decelerate { collectionView.scrollToPage() } }
}
And small extension to collectionView
public func scrollToPage() {
var currentCellOffset = contentOffset
currentCellOffset.x += width / 2
var path = indexPathForItem(at: currentCellOffset)
if path.isNil {
currentCellOffset.x += 15
path = indexPathForItem(at: currentCellOffset)
}
if path != nil {
logInfo("Scrolling to page \(path!)")
scrollToItem(at: path!, at: .centeredHorizontally, animated: true)
}
}
I am having collection view cell with leading and trailing padding of 15px and was facing paging issue, so I resolved it overriding scrollViewWillEndDragging. You can use below function as:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth: Float = Float(UIScreen.main.bounds.size.width)
let currentOffset = Float(scrollView.contentOffset.x)
let targetOffset: Float = Float(targetContentOffset.pointee.x)
var newTargetOffset: Float = 0
if targetOffset > currentOffset {
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth
} else {
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth
}
if newTargetOffset < 0 {
newTargetOffset = 0
} else if CGFloat(newTargetOffset) > scrollView.contentSize.width {
newTargetOffset = Float(scrollView.contentSize.width)
}
targetContentOffset.pointee.x = CGFloat(currentOffset)
let index = Int(newTargetOffset / pageWidth)
if index != 0 {
let spacingForCell:Float = 15
scrollView.setContentOffset(CGPoint(x: CGFloat( newTargetOffset - spacingForCell*Float(index)), y: 0), animated: true)
} else {
scrollView.setContentOffset(CGPoint(x: CGFloat(newTargetOffset), y: 0), animated: true)
}
}

How to center content in a UIScrollView with contentOffset

This should be a VERY easy problem but I'm having trouble getting the desired result. I have horizontally scrolling UIScrollView with a width of 320. The width of its content is 5000. I'm trying to center the content with:
// 'self' is the UIScrollView
CGFloat newContentOffsetX = (self.width/2) + (self.contentSize.width/2);
self.contentOffset = CGPointMake(newContentOffsetX, 0);
I don't understand why this is not centering the content. Can you see something wrong with the calculations?
I think you want:
CGFloat newContentOffsetX = (self.contentSize.width/2) - (self.bounds.size.width/2);
diagram:
|------------------------self.contentSize.width------------------------|
|-----self.width-----|
|-------- offset --------|
^ center
Use below code:
CGFloat newContentOffsetX = (scrollView.contentSize.width - scrollView.frame.size.width) / 2;
scrollView.contentOffset = CGPointMake(newContentOffsetX, 0);
Swift 4
Scroll to center of content of ScrollView
let centerOffsetX = (scrollView.contentSize.width - scrollView.frame.size.width) / 2
let centerOffsetY = (scrollView.contentSize.height - scrollView.frame.size.height) / 2
let centerPoint = CGPoint(x: centerOffsetX, y: centerOffsetY)
scrollView.setContentOffset(centerPoint, animated: true)
I created a simple UIScrollView extension with IBInspectable properties to center content horizontally and/or vertically. It works only when the scrollview content size is lower than the scrollview size.
Here's the Swift 5.2 code:
import UIKit
#IBDesignable class CenteredScrollView: UIScrollView {
#IBInspectable var verticallyCentered: Bool = false
#IBInspectable var horizontallyCentered: Bool = false
override var contentSize: CGSize {
didSet {
if contentSize.height <= bounds.height && verticallyCentered {
centerVertically()
}
if contentSize.width <= bounds.width && horizontallyCentered {
centerHorizontally()
}
}
}
private func centerVertically() {
let yContentOffset = (contentSize.height / 2) - (bounds.size.height / 2)
contentOffset = CGPoint(x: contentOffset.x, y: yContentOffset)
}
private func centerHorizontally() {
let xContentOffset = (contentSize.width / 2) - (bounds.size.width / 2)
contentOffset = CGPoint(x: xContentOffset, y: contentOffset.y)
}
}
Not the best solution but might work for you
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
[self centerScrollViewAnimated:NO];
}
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale {
[self centerScrollViewAnimated:YES];
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
*targetContentOffset = [self suggestedCenteredContentOffset];
}
- (CGPoint)suggestedCenteredContentOffset {
CGSize imageSize = self.pickedImage.size;
CGSize containerSize = self.zoomingScrollView.bounds.size;
CGPoint result = self.zoomingScrollView.contentOffset;
if ( self.zoomingScrollView.zoomScale * imageSize.width < containerSize.width )
result.x = MIN((self.zoomingScrollView.zoomScale * imageSize.width - containerSize.width)/2, 0);
if ( self.zoomingScrollView.zoomScale * imageSize.height < containerSize.height )
result.y = MIN((self.zoomingScrollView.zoomScale * imageSize.height - containerSize.height)/2, 0);
return result;
}
- (void)centerScrollViewAnimated:(BOOL)animated {
[self.zoomingScrollView setContentOffset:[self suggestedCenteredContentOffset] animated:animated];
}
Swift 5+
#IBDesignable class CenteredScrollView: UIScrollView {
#IBInspectable var isVerticallyCentered: Bool = false
#IBInspectable var isHorizontallyCentered: Bool = false
public func center(vertically: Bool, horizontally:Bool, animated: Bool) {
guard vertically || horizontally else {
return
}
var offset = contentOffset
if vertically && contentSize.height <= bounds.height {
offset.y = (contentSize.height / 2) - (bounds.size.height / 2)
}
if horizontally && contentSize.width <= bounds.width {
offset.x = (contentSize.width / 2) - (bounds.size.width / 2)
}
setContentOffset(offset, animated: animated)
}
override func layoutSubviews() {
super.layoutSubviews()
center(vertically: isVerticallyCentered, horizontally: isHorizontallyCentered, animated: false)
}
}

Resources