Xử lý kích thước cuộn trong UICollectionViewCell

Question

Im tạo ngang UICollectionView và bên trong UICollectionViewCell tôi có scrollview và bên trong scrollview tôi có một imageView.

Vấn đề tôi gặp phải là khi tôi phóng to hình ảnhXem, scrollView đang lấy tất cả kích thước ô, vì vậy nó không phù hợp với chiều cao và chiều rộng của kích thước hình ảnh. Bằng cách cuộn lên và xuống hình ảnh biến mất khỏi scrollview, tôi không có ý tưởng whats sai trong mã của tôi.

ColectionViewCell Mã của tôi:

class CollectionViewCell: UICollectionViewCell { 
    @IBOutlet var scrollView: UIScrollView! 
    @IBOutlet var ImageV: UIImageView! 
} 

đang CollectionView:

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! CollectionViewCell 

    cell.scrollView.contentMode = UIViewContentMode.ScaleAspectFit 
    cell.scrollView.delegate = self 
    cell.ImageV.image = UIImage(named: array[indexPath.row]) 
    cell.ImageV.contentMode = UIViewContentMode.ScaleAspectFit 

    cell.scrollView.minimumZoomScale = 1 
    cell.scrollView.maximumZoomScale = 4; 
    cell.scrollView.contentSize = cell.ImageV.frame.size 

    return cell 
} 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 

    return CGSize(width: self.collectionView.frame.size.width , height: self.collectionView.frame.size.height - 100) 

} 

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? { 

    let indexPath = NSIndexPath(forItem: Int(currentIndex), inSection: 0) 

    if let cell1 = self.collectionView.cellForItemAtIndexPath(indexPath) { 
    let cell = cell1 as! CollectionViewCell 
    let boundsSize = cell.scrollView.bounds.size 
    var contentsFrame = cell.ImageV.frame 

    if contentsFrame.size.width < boundsSize.width{ 
     contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width)/2 
    }else{ 
     contentsFrame.origin.x = 0 
    } 

    if contentsFrame.size.height < boundsSize.height { 
     contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height)/2 
    }else{ 
     contentsFrame.origin.y = 0 
    } 
    return cell.ImageV  
    }  
    return UIView()  
} 


func scrollViewDidEndDecelerating(scrollView: UIScrollView) { 

    currentIndex = self.collectionView.contentOffset.x/self.collectionView.frame.size.width; 
    oldcell = currentIndex - 1 

    let indexPath = NSIndexPath(forItem: Int(oldcell), inSection: 0) 
    if let cell1 = self.collectionView.cellForItemAtIndexPath(indexPath) { 
    let cell = cell1 as! CollectionViewCell 
    cell.scrollView.zoomScale = 0 
    } 
} 

hình ảnh xem trước: https://i.imgur.com/Gr2p09A.gifv

Dự án của tôi được tìm thấy ở đây:https://drive.google.com/file/d/0B32ROW7V8Fj4RVZfVGliXzJseGM/view?usp=sharing

Answer 1

Vâng Đầu tiên cho phép bắt đầu với UIViewController đó là tổ chức của bạn UICollectionView:

Định nghĩa một biến để giữ bố trí xem bộ sưu tập:

var flowLayout:UICollectionViewFlowLayout = UICollectionViewFlowLayout() 

Bạn sẽ phải ghi đè viewWillLayoutSubviews và thao tác này sẽ xử lý kích thước collectionView.

override func viewWillLayoutSubviews() { 
    super.viewWillLayoutSubviews() 

    flowLayout.itemSize = CGSize(width: view.frame.width, height:view.frame.height) 

} 

Ngoài ra, bạn sẽ cần phải ghi đè viewDidLayoutSubviews để xử lý các kích thước của mỗi tế bào mới để thiết lập nó để mặc định kích thước:

override func viewDidLayoutSubviews() { 

     if let currentCell = imageCollectionView.cellForItemAtIndexPath(desiredIndexPath) as? GalleryCell { 
      currentCell.configureForNewImage() 
     } 
} 

trong ViewDidLoad thiết lập collectionView là ngang với bố trí dòng chảy:

// Set up flow layout 
    flowLayout.scrollDirection = UICollectionViewScrollDirection.Horizontal 
    flowLayout.minimumInteritemSpacing = 0 
    flowLayout.minimumLineSpacing = 0 

    // Set up collection view 
    imageCollectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height), collectionViewLayout: flowLayout) 

    imageCollectionView.translatesAutoresizingMaskIntoConstraints = false 
    imageCollectionView.registerClass(GalleryCell.self, forCellWithReuseIdentifier: "GalleryCell") 
    imageCollectionView.dataSource = self 
    imageCollectionView.delegate = self 
    imageCollectionView.pagingEnabled = true 
    view.addSubview(imageCollectionView) 

    imageCollectionView.contentSize = CGSize(width: 1000.0, height: 1.0) 

Trong phương pháp UICollectionViewcellForItemAtIndexPath chỉ tải hình ảnh mà không cần cài đặt bất cứ điều gì:

cell.image = UIImage(named: array[indexPath.row]) 

Bây giờ cho phép chuyển sang GalleryCell lớp và xử lý scrollview khi phóng to:

class GalleryCell: UICollectionViewCell, UIScrollViewDelegate { 

    var image:UIImage? { 
     didSet { 
      configureForNewImage() 
     } 
    } 

    var scrollView: UIScrollView 
    let imageView: UIImageView 

    override init(frame: CGRect) { 

     imageView = UIImageView() 
     imageView.translatesAutoresizingMaskIntoConstraints = false 
     scrollView = UIScrollView(frame: frame) 
     scrollView.translatesAutoresizingMaskIntoConstraints = false 

     super.init(frame: frame) 
     contentView.addSubview(scrollView) 
     contentView.addConstraints(scrollViewConstraints) 

     scrollView.addSubview(imageView) 

     scrollView.delegate = self 
     scrollView.maximumZoomScale = 4 
    } 

    required public init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

    internal func configureForNewImage() { 
     imageView.image = image 
     imageView.sizeToFit() 

     setZoomScale() 
     scrollViewDidZoom(scrollView) 
    } 

    public func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? { 
     return imageView 
    } 

    public func scrollViewDidZoom(scrollView: UIScrollView) { 

     let imageViewSize = imageView.frame.size 
     let scrollViewSize = scrollView.bounds.size 

     let verticalPadding = imageViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imageViewSize.height)/2 : 0 
     let horizontalPadding = imageViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imageViewSize.width)/2 : 0 

     if verticalPadding >= 0 { 
      // Center the image on screen 
      scrollView.contentInset = UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding) 
     } else { 
      // Limit the image panning to the screen bounds 
      scrollView.contentSize = imageViewSize 
     } 


} 

Tôi đã thử nghiệm nó với ví dụ và nó sẽ giải quyết vấn đề của bạn với scrollview và @Spencevail giải thích chủ yếu là lý do tại sao nó là gây ra !

Answer 2

Bạn cần đặt contentInset trên scrollview của mình. Điều đang diễn ra là contentSize của UIScrollView ban đầu được đặt để khớp với kích thước màn hình với hình ảnh bên trong. Khi bạn phóng to trên scrollview, contentSize mở rộng tương ứng, vì vậy những khu vực màu đen ở trên và dưới các bức ảnh khi bạn phóng to tất cả các cách mở rộng khi bạn phóng to. Nói cách khác Bạn đang mở rộng khu vực trên và dưới hình ảnh của bạn có thể đi. Nếu bạn điều chỉnh contentInset, nó sẽ mang đến vùng chết đó và không cho phép scrollview di chuyển hình ảnh ra khỏi cửa sổ.

public func scrollViewDidZoom(scrollView: UIScrollView) { 

    let imageViewSize = imageView.frame.size 
    let scrollViewSize = scrollView.bounds.size 

    let verticalPadding = imageViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imageViewSize.height)/2 : 0 
    let horizontalPadding = imageViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imageViewSize.width)/2 : 0 

    if verticalPadding >= 0 { 
     // Center the image on screen 
     scrollView.contentInset = UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding) 
    } else { 
     // Limit the image panning to the screen bounds 
     scrollView.contentSize = imageViewSize 
    } 

} 

Điều này trông gần như giống với mã nguồn mở Cocoapod mà tôi quản lý, SwiftPhotoGallery. Hãy xem mã cho SwiftPhotoGalleryCell và bạn sẽ có được một ý tưởng khá tốt về cách thực hiện điều này. (Hãy chỉ cần sử dụng cocoapod quá nếu bạn muốn!)