如何在不扭曲其内容的情况下沿一个轴调整UICollectionViewCell的大小？

Question

我试图仅沿一个轴调整UICollectionViewCell的大小，而不会扭曲其内容。

我已经阅读了涉及UICollectionViewLayoutAttributes layoutAttributesForItemAtIndexPath和layoutAttributesForElementsInRect的类似问题的答案。我也尝试在UICollectionViewCell子类中使用initWithFrame和awakeFromNib。我试图在这些方法中将UIViewContentMode设置为UIViewContentModeScaleAspectFit或UIViewContentModeScaleAspectFill，但这没有效果。

到目前为止，当我只沿一个轴拉伸时，我仍会得到扭曲的文字。

因此...

我有一个UICollectionView，其单元格在xib中定义。目前该单元格仅包含UILabel。集合视图使用UICollectionViewFlowLayout进行一些小的自定义：

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

UICollectionView嵌入在UIScrollView中，完全适合滚动视图的尺寸。滚动视图大小设置为在两个方向上远大于屏幕。硬编码的数字仅用于测试;我稍后会将它们变成适当的常量。

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;

结果是一个可以在任何方向滚动的网格。那部分正在发挥作用。

网格需要是可伸缩的，无论是按比例还是一次只能沿一个轴。我正在使用以下捏合手势识别器来进行单轴缩放（同样，y的硬编码1.0值仅用于测试）：

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

当我用捏合手势调整集合视图的大小时，每个单元格中的标签会拉伸并变形。这是一个屏幕抓取：deformed collection view http://afterburnerimages.com/IMG_0078.PNG

我会很乐意提供任何其他相关信息，非常感谢所有的帮助！

Answer 1

Oky你正在使用包含集合视图的scrollview然后你可以使用scrollview委托进行缩放，在你的情况下它是拉伸，更好你可以使用如下

例如，

- (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;

}

并使用滚动视图委托来执行缩放

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

结果就像gif下面按比例拉伸而不影响集合视图的内容，希望这有助于你...：）