Material Components for iOS のFlexibleHeaderを使ってみた

8405 ワード
iOS Swift MaterialDesign iOS テキストリンク

Material Components for iOS

Material ComponentsはGoogleが提供している、Material Designの実装を助けてくれるコンポーネントライブラリです。
詳しくは、次のページを読みましょう
https://github.com/material-components/material-components-ios

FlexibleHeaderとは

Google純正アプリの詳細画面などでみられる、スクロールに合わせヘッダー部分の高さが動的に変わるデザインに用いられています。

Flexible header
https://material.io/develop/ios/components/flexible-headers/

Swifterの方は、次のShrineというDemoアプリを参考にするのがおすすめです。
https://github.com/material-components/material-components-ios/tree/develop/demos/Shrine

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のみで実装した場合と操作感が変わってしまう恐れがあります。