[실전] Swift Material components iOS 로 UI 가져오기

https://github.com/material-components/material-components-ios

material-components/material-components-ios

UI를 코드로 직접 다 구현하지 않고, material components kit를 받아와서 사용할 수 있다. 

Wow!

 

1. Terminal에서 git clone 하는 법

% git clone https://github.com/material-components/material-components-ios
% ls
% cd catalog
% ls
catalog % pod install

 

2. podfile 설치하고 프로젝트 파일 열기. 

 

3. MDCCatalog, MDCDragons 핸드폰에 설치하고 구경하기

빌드 할 때 주의사항

해당 프로젝트 Target에

Signing & Capabilities에서 맨 위에 Automatically manage signing 체크 해준 후

팀 추가 해주기!

 

구경. 내가 쓰고싶은 기능 고르기

4. 새 프로젝트 생성

나는 CollectionsSimpleSwiftDemo 파일을 활용하여 프로젝트의 코어 시스템을 구현해보겠다. 

원하는 기능 찾으면 Pods 폴더 안에 MaterialcomponentsExamples 폴더에서 찾음.

Pods - DevelopmentPods - MaterialcomponentsExamples - Collections - examples - CollectionsSimpleSwiftDemo.swift

거의 오브젝티브 C로 작성이 되어있다는 단점 ㅠㅠ

하지만 swift 파일도 있으니 잘 찾아보고 활용하길..!!

원하는 위치에 Xcode 파일을 새로 생성해주고 Terminal 켜서 

% pod init 하여 podfile 생성

% open -a Xcode Podfile 로 pod file 열어서 원하는 dependency 추가

platform :ios, '9.0'

target 'VolumetricInternal' do
  use_frameworks!
  pod 'MaterialComponents'

end

% pod install

.xcworkspace 파일 열기 

 

5. Storyboard 삭제, Layout by Code 설정

CollectionsSimpleSwiftDemo 안의 코드를 전체 복사하여 새로 만들어준 프로젝트 파일의 ViewController 안에 붙여넣어준다.

그리고 실행해보면...? 빈 화면만 뜬다. 왜???

기본으로 보여지는 Main Interface가 Storyboard로 설정이 되어있어서 그렇다. 

MaterialComponents는 코드로 UI를 작성해놓았기 때문에 

기존의 스토리보드 설정을 다 지워주고 SceneDelegate에 코드로 다시 entry point 를 새로 생성해주어야 한다.

(Tutorial 2. AutoLayout by Code 참고)

 

그런 다음 실행했더니 잘 된다!!!

 

6. Firebase Storage 연동하기

이번 프로젝트에서는 master님이 기존에 만들어 놓으신 firebase 프로젝트에서 스토리지를 받아와야 한다. 

✓ Firebase 구성 파일 다운로드 하는 법 : 

Firebase 스토리지와 연동해주기 위해서는 Firebase 해당 프로젝트의 설정 - 프로젝트 설정 - 하단의 해당 iOS앱의 GoogleService-Info.plist 파일을 다운받아 xcode 폴더 안에 넣어준다. 

그리고 프로젝트 General - Bundle Identifier에 번들 ID를 넣어준다.

(Firebase 연동은 Tutorial 5 참고)

 

7. Firebase Storage 사용법

podfile 열어 pod 'Firebase/Storage' 추가해주고 % pod install

import Firebase 해주고

application:didFinishLaunchingWithOptions: 메서드 내에 FirebaseApp.configure() 선언해준다. 

뷰컨트롤러에 let ref = Storage.storage().reference().child("storage/폴더이름")

으로 폴더 경로를 설정해준다.

 

8. Storage에서 리스트 받아오기

파일 경로를 설정해 주었다면, 해당 폴더로부터 listAll(completion:) 메서드를 통해 내부 리스트를 읽어들일 수 있다.

먼저, 클라스 내에 var files: [String] = [] 로 빈 Array를 생성해주고, //1

viewDidLoad() 안에서 listAll() 메서드를 통해 스토리지의 파일들을 prefixes로 받아와 파일 이름들을 files 리스트에 추가해준다. //2

이 메서드는 *completion handler 이기 때문에, 클라스 내 다른 네트워크들이 끝나면 비동기로 실행이 된다. 

따라서 collectionView에 다시 reload를 해 주어야 결과값이 잘 출력된다. //3

 

import UIKit
import MaterialComponents.MaterialCollections
import Firebase

class ListController: MDCCollectionViewController {
    
    let reusableIdentifierItem = "itemCellIdentifier"
    let ref = Storage.storage().reference().child("storage/v1/asset")
	
    // 1. Storage에서 리스트를 받아올 빈 array 생성
    var files: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView?.register(MDCCollectionViewTextCell.self,
                                      forCellWithReuseIdentifier: reusableIdentifierItem)
        
        // Customize collection view settings.
        self.styler.cellStyle = .card
        
        // 2. listAll()메서드를 통해 파일 이름을 받아와 array에 추가해주기
        ref.listAll (completion: { (result, error) in
            for item in result.prefixes {
                print(item.name)
                self.files.append(item.name)
            }
            // 3. 리스트에 잘 담겼는지 확인 후 collectionView에 reload 해주기
            print(self.files)
            self.collectionView.reloadData()
        })
    }
    
    // MARK: UICollectionViewDataSource 
    override func collectionView(_ collectionView: UICollectionView,
                                 numberOfItemsInSection section: Int) -> Int {
        return files.count
    }
    
    override func collectionView(_ collectionView: UICollectionView,
                                 cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reusableIdentifierItem,
                                                      for: indexPath)
        if let cell = cell as? MDCCollectionViewTextCell {
            cell.textLabel?.text = files[indexPath.item]
        }
        
        return cell
    }
}

// MARK: Catalog by convention
extension ListController {
    
    @objc class func catalogMetadata() -> [String: Any] {
        return [
            "breadcrumbs": [ "Collections", "Simple Swift Demo"],
            "primaryDemo": false,
            "presentable": false,
        ]
    }
}