https://github.com/hyun99999/pinteresttutorial-ios

🥺Pinterest Layout Tutorial
https://github.com/hyun99999/pinteresttutorial-ios

Last synced: about 2 months ago
JSON representation

🥺Pinterest Layout Tutorial

• Host: GitHub
• URL: https://github.com/hyun99999/pinteresttutorial-ios
• Owner: hyun99999
• Created: 2021-06-20T12:52:48.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-23T05:57:24.000Z (almost 4 years ago)
• Last Synced: 2025-03-25T11:49:22.410Z (3 months ago)
• Language: Swift
• Size: 36.8 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PinterestTutorial-iOS

🥺Pinterest Layout Tutorial

이미지 크기에 따라서 동적으로 셀의 레이아웃을 설정하는 핀터레스트 레이아웃 구현해 보았다.

### 완성



### 코드

- UICollectionViewDelegateFlowLayout 의 서브클래스인 PinterestLayout 생성.

```swift

// PinterestLayout 에서 각 이미지 높이를 알 수 있도록 Delegate 생성.

protocol PinterestLayoutDelegate: AnyObject {

    func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath: IndexPath) -> CGFloat

}

class PinterestLayout: UICollectionViewFlowLayout {

    

    // delegate로 ViewController 를 나타낸다.

    weak var delegate: PinterestLayoutDelegate?

    

    private var contentHeight: CGFloat = 0

    

    private var contentWidth: CGFloat {

        guard let collectionView = collectionView else {

            return 0

        }

        let insets = collectionView.contentInset

        return collectionView.bounds.width - (insets.left + insets.right)

    }

    

    // 1. 콜렉션 뷰의 콘텐츠 사이즈를 지정합니다.

    override var collectionViewContentSize: CGSize {

        return CGSize(width: contentWidth, height: contentHeight)

    }

    

    // 다시 레이아웃을 계산할 필요가 없도록 메모리에 저장합니다.

    private var cache: [UICollectionViewLayoutAttributes] = []

    

    // 2. 콜렉션 뷰가 처음 초기화되거나 뷰가 변경될 떄 실행됩니다. 이 메서드에서 레이아웃을

    //    미리 계산하여 메모리에 적재하고, 필요할 때마다 효율적으로 접근할 수 있도록 구현해야 합니다.

    override func prepare() {

        guard let collectionView = collectionView, cache.isEmpty else { return }

        

        let numberOfColumns: Int = 2 // 한 행의 아이템 갯수

        let cellPadding: CGFloat = 5

        let cellWidth: CGFloat = contentWidth / CGFloat(numberOfColumns)

        

        let xOffSet: [CGFloat] = [0, cellWidth] // cell 의 x 위치를 나타내는 배열

        var yOffSet: [CGFloat] = .init(repeating: 0, count: numberOfColumns) // // cell 의 y 위치를 나타내는 배열

        

        var column: Int = 0 // 현재 행의 위치

        

        for item in 0.. yOffSet[1] ? 1 : 0

        }

    }

    

    // 3. 모든 셀과 보충 뷰의 레이아웃 정보를 리턴합니다. 화면 표시 영역 기반(Rect)의 요청이 들어올 때 사용합니다.

        override func layoutAttributesForElements(in rect: CGRect)

        -> [UICollectionViewLayoutAttributes]? {

            var visibleLayoutAttributes: [UICollectionViewLayoutAttributes] = []

            

            for attributes in cache {

                if attributes.frame.intersects(rect) { // 셀 frame 과 요청 Rect 가 교차한다면, 리턴 값에 추가합니다.

                    visibleLayoutAttributes.append(attributes)

                }

            }

            

            return visibleLayoutAttributes

        }

        

        // 4. 모든 셀의 레이아웃 정보를 리턴합니다. IndexPath 로 요청이 들어올 때 이 메서드를 사용합니다.

        override func layoutAttributesForItem(at indexPath: IndexPath)

        -> UICollectionViewLayoutAttributes? {

            return cache[indexPath.item]

        }

}

```

- MainVC 에서 PinterestLayoutDelegate 를 채택.

```swift

// MARK: - UICollectionViewDelegateFlowLayout

extension MainVC: PinterestLayoutDelegate {

    func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath: IndexPath) -> CGFloat {

        let cellWidth: CGFloat = (view.bounds.width - 4) / 2 // 셀 가로 크기

        let imageHeight = imageList[indexPath.item].image.size.height

        let imageWidth = imageList[indexPath.item].image.size.width

        // 이미지 비율

        let imageRatio = imageHeight/imageWidth

        

        

        return imageRatio * cellWidth

    }

}

```

### 출처

출처ㅣ[Swift. UICollectionView Pinterest 레이아웃](https://devmjun.github.io/archive/CollectionView-Pinterest)