솝커톤 : 대한독립영화만세 iOS 클라이언트 파트

🔥참여 인원 🔥

이름	파트
송지훈	26기 YB/iOS
김태훈	26기 YB/iOS
노한솔	26기 YB/iOS

이동하기

---

• 사용 개념 : Cocoapods 연동, Alamofire HTTP 통신 / Kingfisher 을 이용한 이미지 캐싱

---

Kingfisher 로 이미지 가져오기

import Kingfisher
extension UIImageView {
    func setImage(from url: String) {                           // 이 기본 함수에 대해서 kingfisher 를 이용해 커스텀 할 예정
        
        // URL이 들어오는 것을 Cache 키로 사용
        let cache = ImageCache.default
        cache.removeImage(forKey: url)                          // 이거 없어도 기본적 동작은 가능함
        self.kf.indicatorType = .activity                       // 그 이미지 다운로드 하고 있다는 걸 나타내기 위해 indicator (동그라미 돌아가는거) 표시
        cache.retrieveImage(forKey: url) { result in
            switch result {                                     // 저번 로그인 및 회원 가입
                                                                // 캐시에 이미지가 있는 경우
            case .success(let value):                           // 성공했을때?
                switch value.cacheType {
                                                            // setImage을 호출 시, 자동으로 캐시에 저장하고 호출함
                case .none: self.kf.setImage(with: URL(string: url)!, placeholder: UIImage(systemName: "pencil"), options: [.transition(.fade(1))])
                // 이미지 업로드 성공했을때 1초 fade 효과 넣어주고, 로딩하는 동안  pencil 이미지로 placeholder 를 달아줌
                case .memory: self.image = value.image
                case .disk: self.image = value.image
                }
            case .failure(let error):           // 만약 해당 url에 사진 불러오는 걸 실패한다면,
                print(error.errorCode) // 에러 코드 출력하고
                self.image = UIImage()
            }
        }
    }
}

스토리보드 구조

(결과물)

다음과 같이 카테고리 별 제목이 들어가는 부분을 ReusableHeader 형태를 활용해서 구현했다.

      func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        switch kind {
          case UICollectionView.elementKindSectionHeader:
            let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderReusableView", for: indexPath) as! HeaderReusableView
            
            if indexPath.section == 0
            {
                view.headerTItle.text = "내가 찜한 영화"
                view.headerMenu1.setTitle("", for: .normal)
                view.headerMenu2.setTitle("", for: .normal)
                view.headerMenu3.setTitle("", for: .normal)
            }

UICollectionReusableView 를 활용해 이 함수 내에서 ReusuableHeader IBOutlet 텍스트를 섹션별로 따로 지정해주었다.

---

다른 스토리 보드내 ViewController 호출하기

let tabStoryBoard = UIStoryboard(name: "TableView", bundle: nil)

우선 다른 스토리보드를 name을 통해 정의한다.

여기서의 name 은 스토리보드 파일 이름을 사용 한다!

             guard let tabbarController = tabStoryBoard.instantiateViewController(identifier:
                   "tabBarStoryBoard") as? UITabBarController else { return }

             tabbarController.modalPresentationStyle = .fullScreen
             self.present(tabbarController, animated: true, completion: nil)

여기에 있는 Storyboard Id를 identifier에 넣어서 표시하고자 하는 Viewcontroller 와 연결 시켜 준다. 이후에 .fullScreen 으로 modal style을 정해주고 Present 해준다.

---

각 컬렉션 뷰에서 셀 크기 조정해주기

extension SecondSectionCell: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let height = self.bounds.height - 20
        let width = height * (114 / 180)
        
        return CGSize(width: width.rounded(), height: height.rounded())
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 12
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: -10, left: 16, bottom: 10, right: CGFloat(16 + (colors.count - 1) * 10))
    } // 전체 콜렉션 뷰에 대한 좌우상하 마진조정
}

영화 정보 뷰 구현하기

Layout

이 뷰는 스크롤 뷰 내부에 Banner, 두개의 CollectionView를 넣는 형식으로 구성하였다.

Banner 구현

Banner는 Scrollview를 기반으로 구현하였고, Banner 라는 이름의 함수에 URL 배열을 파라미터로 받아 배열의 크기만큼 imageview를 만들어 URL을 연결하여 이미지를 띄우고 subview에 추가하는 작업을 수행하였다.

그리고 pagecontroller를 구현하였다.