How to center content in a UIScrollView with contentOffset - ios

Question

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?

Answer 1

I think you want:
CGFloat newContentOffsetX = (self.contentSize.width/2) - (self.bounds.size.width/2);
diagram:
|------------------------self.contentSize.width------------------------|
|-----self.width-----|
|-------- offset --------|
^ center

Answer 2

Use below code:
CGFloat newContentOffsetX = (scrollView.contentSize.width - scrollView.frame.size.width) / 2;
scrollView.contentOffset = CGPointMake(newContentOffsetX, 0);

Answer 3

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)

Answer 4

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)
}
}

Answer 5

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];
}

Answer 6

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)
}
}