[swift] AlamofireImage를 사용하여 이미지 그리드 뷰 만들기

14 Nov 2023

swift

이번에는 AlamofireImage를 사용하여 이미지 그리드 뷰를 만드는 방법을 알아보겠습니다. AlamofireImage는 Swift에서 이미지 로딩과 캐싱을 단순화하고 처리하는 데 도움을 주는 라이브러리입니다.

AlamofireImage 설치

먼저, 프로젝트에 AlamofireImage를 설치해야 합니다. Cocoapods를 사용하여 설치하는 것이 가장 일반적인 방법입니다.

Podfile에 다음과 같이 AlamofireImage를 추가하고 pod install을 실행하세요.

pod 'AlamofireImage'

이미지 그리드 뷰 만들기

이제 이미지 그리드 뷰를 구성하기 위해 필요한 코드를 작성해보겠습니다.

import AlamofireImage

class ImageGridViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    
    let imageUrls = [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        "https://example.com/image3.jpg",
        "https://example.com/image4.jpg",
        // 추가 이미지 URL 추가
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.dataSource = self
        collectionView.delegate = self
        
        // 이미지를 비동기적으로 로드하고 캐싱하기 위해 AlamofireImage를 사용합니다.
        let imageDownloader = ImageDownloader(configuration: ImageDownloader.defaultURLSessionConfiguration(),
                                              downloadPrioritization: .fifo,
                                              maximumActiveDownloads: 4,
                                              imageCache: AutoPurgingImageCache())
        
        let imageProcessor = RoundCornerImageProcessor(cornerRadius: 10)
        
        // 이미지를 비동기적으로 로드하고 캐싱하는데 필요한 설정을 정의합니다.
        let imageOptions: UIImageView.ImageOptions = [
            .processor(imageProcessor),
            .transition(.fade(0.3))
        ]
        
        // 이미지를 가져와서 표시합니다.
        for imageUrl in imageUrls {
            if let url = URL(string: imageUrl) {
                let imageRequest = URLRequest(url: url)
                
                imageDownloader.download(imageRequest, options: [], progress: nil) { response in
                    if let image = response.result.value {
                        DispatchQueue.main.async {
                            // 다운로드한 이미지를 collectionView에 추가합니다.
                            collectionView.insertItems(at: [IndexPath(item: images.count, section: 0)])
                        }
                    }
                }
            }
        }
    }
}

extension ImageGridViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageUrls.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell
        
        // 이미지를 비동기적으로 로드하고 표시합니다.
        if let url = URL(string: imageUrls[indexPath.item]) {
            cell.imageView.af.setImage(withURL: url)
        }
        
        return cell
    }
}

extension ImageGridViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width / 2 - 10
        return CGSize(width: width, height: width)
    }
}

class ImageCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
}

위의 코드는 AlamofireImage를 사용하여 이미지 그리드 뷰를 만드는 과정을 담고 있습니다. imageUrls 배열에 이미지 URL을 추가하고, collectionView를 설정한 후, AlamofireImage를 사용하여 비동기적으로 이미지를 로드하고 캐싱하여 표시합니다.

이제 이미지 그리드 뷰를 만들기 위한 모든 준비가 되었습니다!

더 많은 정보를 얻기 위해서 AlamofireImage GitHub 페이지를 참조해보세요.

참고 자료

AlamofireImage GitHub 페이지