How can I resize a UICollectionViewCell along one axis without distorting its contents?

Question

I am trying to resize a UICollectionViewCell along only one axis without distorting its contents.

I have read answers for similar problems involving UICollectionViewLayoutAttributes layoutAttributesForItemAtIndexPath and layoutAttributesForElementsInRect. I have also tried using initWithFrame and awakeFromNib in a UICollectionViewCell subclass. I have attempted to set UIViewContentMode to UIViewContentModeScaleAspectFit or UIViewContentModeScaleAspectFill in those methods, but that has had no effect.

So far, I still get distorted text when I stretch along only one axis.

So...

I have a UICollectionView with its cells defined in a xib. Currently the cell only contains a UILabel. The collection view uses UICollectionViewFlowLayout to do some minor customizations:

self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
[self.flowLayout setMinimumLineSpacing:1.0f];
[self.flowLayout setItemSize:CGSizeMake(self.cellSize.width, self.cellSize.height)];
[self.flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[self.collectionView setCollectionViewLayout:self.flowLayout];

The UICollectionView is embedded inside a UIScrollView, and fits exactly inside the scroll view's dimensions. The scroll view size is set to be much larger than the screen in both directions. Hard-coded numbers are just for testing; I will turn them into appropriate constants later.

self.cellSize = CGSizeMake(150.0f, 150.0f);
CGSize scrollViewSize = self.scrollView.contentSize;
scrollViewSize.width = 20 * self.cellSize.width + 20.0f;
scrollViewSize.height = 20 * self.cellSize.height + 20.0f;
self.scrollView.contentSize = scrollViewSize;

self.collectionViewHeightConstraint.constant = self.scrollView.contentSize.height;
self.collectionViewWidthConstraint.constant = self.scrollView.contentSize.width;

The result is a grid which is scrollable in any direction. That part is working.

The grid needs to be stretchable, either proportionally or along only one axis at a time. I am using the following pinch gesture recognizer to make one-axis zooming happen (again, the hard-coded 1.0 value for y is just for testing):

- (IBAction)handlePinchGesture:(UIPinchGestureRecognizer *)recognizer
{
    recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, 1.0);
    recognizer.scale = 1;
}

When I resize the collection view with a pinch gesture, the label in each cell stretches and deforms. Here's a screen grab:
_{(source: afterburnerimages.com)}

I will supply any other pertinent information gladly, and all assistance is much appreciated!

It's not clear what you want to happen. If you stretch a view in only one dimension, everything in it is going to be stretched in one dimension, and so distorted -- that's just basic geometry, and has nothing to do with programming. What exactly do you expect to see with the text in your label? — rdelmar, Nov 06 '14 at 05:49
I'd like to have the label maintain its aspect ratio even when the cell's aspect ratio changes. The two options I thought of for that were to have the label remain the same size as the cell size changes, or have the label stretch proportionally when the cell doesn't. I'm hoping for control of the label's view separate from the cell's view. — Carl Smith, Nov 06 '14 at 20:23

Shankar BS · Answer 1 · 2014-11-06T09:27:04.963

Oky u are using scrollview which contains collection view then u can use scrollview delegate for zoom, in your case it is stretches, better u can use like below

for example,

- (void)viewDidLoad
{
   [super viewDidLoad];
   // Do any additional setup after loading the view, typically from a nib.
   _scrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
   _scrollView.delegate = self;

   UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
   [flowLayout setMinimumLineSpacing:1.0f];
   [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
   [self.collectionVIew setCollectionViewLayout:flowLayout];
   [self.collectionVIew registerClass:[CustomCollectionVIewCell class] forCellWithReuseIdentifier:@"CELL_ID"];

   //setting up content size for scroll view
   CGSize size = self.scrollView.contentSize;
   size.width = 200 * 10;
   size.height = 185 * 10;
   self.scrollView.contentSize = size;
   CGRect rect = CGRectZero;
   rect.origin = self.scrollView.bounds.origin;
   rect.size = size;
   self.collectionVIew.frame = rect;
   self.scrollView.backgroundColor = [UIColor greenColor];
   [self.scrollView addSubview:self.collectionVIew];
   [self.view addSubview:self.scrollView];

  // CGRect scrollViewFrame = self.scrollView.frame;
  // CGFloat scaleWidth = _collectionVIew.frame.size.width / self.scrollView.contentSize.width;
  // CGFloat scaleHeight = _collectionVIew.frame.size.height / self.scrollView.contentSize.height;
  // CGFloat minScale = MIN(scaleWidth, scaleHeight);


   //set min scale must be less than max zoom scale so that it can be zoomable
   self.scrollView.minimumZoomScale = 0.5;
   self.scrollView.maximumZoomScale = 1.0f;
  // self.scrollView.zoomScale = minScale; //default is 1.0f;

}

and use scroll view delegates to perform zoom

 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
  {
     return self.collectionVIew; //return collection view which is embedded inside scroll view
  }

and result is something like gif below stretching proportionally without effecting the contents of collection view , hope this helps u .. :)

enter image description here

Thanks for your suggestion. But I want to have the content stretch only horizontally, not proportionally. — Carl Smith, Nov 06 '14 at 08:42
I'd like to have the cells change shape (aspect ratio) without stretching and distortion the text. — Carl Smith, Nov 06 '14 at 08:48

How can I resize a UICollectionViewCell along one axis without distorting its contents?

1 Answers1