[Swift] Search 결과 UICollectionView로 표현(서드파티 라이브러리 사용)

오늘 할 일은

Search했을 때 검색에 해당하는 데이터를 UICollectionView로 표현할 건데,

데이터는 ImagePath(String)타입인데, UICollectionView에는 이미지가 들어가야 하므로,

서드파티 라이브러리를 사용하여 이를 적용시켜 Collection View에 이미지가 보여지는 것을 진행 해 보겠습니다.

 

---

 

오늘의 목표 먼저 영상 확인 하시죠

 

 

---

할 일

1. 뷰컨트롤러에 UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout 추가하기 
2. 받아온 파일 업데이트 시켜주기
3. Thread 오류 해결하기
4. 서드파티 라이브러리고 데이터->image로 표현

 

1. 뷰컨트롤러에 UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout

설정

UICollectionViewDataSource

extension SearchViewController: UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return movies.count

//몇 개가 넘어오는가 설정해줍니다.

 

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ResultCell", for: indexPath) as? ResultCell else {

            return UICollectionViewCell()

        }

        let movie = movies[indexPath.item]

//어떻게 표현할 것인가를 설정해 줍니다.

※ ViewController에 customCell class 설정과 identifier 설정하는 것은 생략하겠습니다.

 

UICollectionViewDelegateFlowLayout

extension SearchViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {      

        let margin: CGFloat = 8

        let itemSpacing: CGFloat = 10

        let width = (collectionView.bounds.width - margin * 2 - itemSpacing * 2) / 3

        let height = width * 10 / 7

        return CGSize(width: width, height: height)

    }

}

//셀의 크기 조절

 

---

 

 

2. 받아온 파일 업데이트 시켜주기

SearchAPI.search(searchTerm) { movies in

                self.movies = movies

                self.resultCollectionView.reloadData()

            }

 

이 부분까지 완성하게 되면 에러가 뜹니다.

 

3. Thread 오류 해결하기

class SearchAPI는 네트워킹이기 때문에 2,3,4Thread가 해야하는데,

resultCollectionView.reloadData()는 무거운 작업이기 때문에 main Thread로 변환시켜주라는 오류 입니다.

 

 DispatchQueue.main.async { 

                self.movies = movies

                self.resultCollectionView.reloadData()

            }

 

// main

// 이 코드블록을 SearchAPI.search(serchTerm) { movie in

}

코드블록 안에 붙여줍니다.

 

 

반응형

 

Main Thread (큐)로 할당하기

https://accompani-i.tistory.com/145

[Swift] GCD / Queue / Sync 와Async 차이

 

 

---

4. 서드파티 라이브러리고 데이터->image로 표현하기

받아온 결과를 UIImageView로 연결시키기 위해서는

class ResultCell: UICollectionViewCell {

    @IBOutlet weak var movieThumbnail: UIImageView!

Thumbnail을 UIImageView로 연결 시켜 주시고 

 

---

 

extension SearchViewController: UICollectionViewDataSource {} 코드블록 내에서 코드를 진행시켜 줍니다.

 

cell.movieThumbnail.image = movie.thumbnailPath 이런 방식의 코드를 사용해줘야 하는데, 오류가 납니다.

이유는 movieThumbnail.image타입과 movie.thumbnailPath 타입이 다르기 때문입니다(image vs String)

 

※ url to image ios swift open source로 구글에서 검색하여 ->kingfisher의 라이브러리를 사용할 예정입니다.

이것을 해결하기 위해서는 웹에서 받아온 데이터를 이미지 파일로 전환시켜주는 라이브러리를 추가합니다.

 

file -> addpackges -> kingfisher의 url을 복사 -> addpackges에 붙여넣기-> addpakage를 해서 라이브러리를 추가합니다.

 

추가하며 우리는 kingfisher의 라이브러리(툴)을 사용할 수 있습니다.

위와 같이 추가해 주시고

 

 let url = URL(string: movie.thumbnailPath)!

cell.movieThumbnail.kf.setImage(with: url)

        return cell

 

킹피셔 라이브러리를 통해서 url을 image로 변환시켜 줍니다.

 

 

그러면 결과는

제일 상단에 올린 영상처럼

검색하면, 검색 결과가 collectionview로 나오는 결과를 얻으실 수 있습니다.