Material Components for iOS

Material Components는 Google에서 제공하는 Material Design을 구현하는 데 도움이 되는 컴포넌트 라이브러리입니다.
자세한 내용은 다음 페이지를 읽으십시오.
htps : // 기주 b. 코 m / 마테리아 l - 코 m 포넨 ts / 마테리아 l - 코 m 포넨 ts - 이오 s

FlexibleHeader란?

Google 순정 앱의 상세 화면 등에서 볼 수 있는 스크롤에 맞추어 헤더 부분의 높이가 동적으로 바뀌는 디자인에 사용되고 있습니다.

Flexible header
htps : // 마테리아 l. 이오/데ゔぇぉp/이오 s/코 m포넨 ts/fぇぃbぇ-헤아데 rs/

Swifter는 다음 Shrine이라는 데모 앱을 참조하는 것이 좋습니다.
htps : // 기주 b. 코 m / 마테리아 l - 코 m 포넨 ts / 마테리아 l - 코 m 포넨 ts - 이오 s / t 레에 / ゔ ぇ p /

StoryBoard를 사용하여 구현 및 보기

절차는 다음과 같습니다.

화면 전체의 Container가 되는 ViewContorller를 만든다

MDCFlexibleHeaderContainerViewController를 상속받은 UIViewContorller를 만든다

Content가 되는 ViewContorller 만들기

Header를 제외한 부분, TableView 나 CollectionView 등 ScrollView를 구현한 UIViewContorller를 만든다

Header가 되는 View를 만든다

전체 화면의 Container가 되는 ViewContorller 만들기

MDCFlexibleHeaderContainerViewController를 상속받은 ViewController를 만듭니다.
StoryBoard로부터 생성하는 것을 상정하고 있으므로, viewDidLoad()로 초기 세트를 행하고 있습니다. getContentViewController()는 나중에 작성하는 "Content가 되는 ViewContorller"입니다.

MDCFlexibleHeaderContainerViewController 속성: contentViewController에 설정합니다.

class FlexibleHeaderViewController: MDCFlexibleHeaderContainerViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Content部分のViewControllerをセット
        let contentVC: ContentViewController = getContentViewController()
        self.contentViewController = contentVC
        // Header部分のViewを制御するため、headerViewControllerをContentにセット
        contentVC.headerViewController = self.headerViewController
        contentVC.setupHeaderView()
    }
}

Content가 되는 ViewContorller 만들기

Content가 되는 ViewController를 사용하면 Header의 View와 이를 제어하기 위한 MDCFlexibleHeaderViewController를 참조할 수 있습니다.

class ContentViewController: UITableViewController {
    var headerViewController: MDCFlexibleHeaderViewController?
    var headerContentView: HeaderView =  HeaderView.instantiateFromNib()
}

Header의 스크롤을 연동시키기 위해서, 스크롤의 Delegate인 scrollViewDidScroll를 연결합니다.

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        headerViewController!.scrollViewDidScroll(scrollView)
    }

이번 예에서는 「화면 전체의 Container가 되는 ViewController」로부터 콜하고 있습니다만, Header 부분의 View세트입니다. Header의 View세트와 그 내용이 되는 View를 세트하고 있습니다.

    func setupHeaderView() {
        let headerView = headerViewController!.headerView
        // ヘッダー部分のサイズセット
        headerView.trackingScrollView = self.tableView
        headerView.maximumHeight = 200
        headerView.minimumHeight = 72
        headerView.minMaxHeightIncludesSafeArea = false
        headerView.backgroundColor = UIColor.blue
        headerView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        // ヘッダー部分のコンテンツセット
        headerContentView.frame = (headerView.bounds)
        headerContentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        headerView.addSubview(headerContentView)
    }

Header가 되는 View 만들기

Header 부분에 표시하는 View를 작성합시다.

단점

다음의 공식 페이지에도 설명이 있습니다만, UINavigationController와 병용하는 경우,NavigationBar를 스스로 제어하지 않으면 안됩니다.

스크롤 조작할 수 있는 공간에도 주의가 필요합니다. Header 부분을 세로 스크롤해도 작동하지 않습니다. 이 근처, TableView만으로 구현한 경우와 조작감이 바뀌어 버릴 우려가 있습니다.