現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。トップ全記事一覧テクノロジー2018.11.13UICollectionViewでレスポンシブUIを実現するためのコードをOSSとして公開しましたこんにちは、iOSアプリ黒帯の林(@kazuhiro494949)です。先日、ヤフーのiOSアプリ内で利用されているコードを一部切り出してOSSとして公開しました。https://github.com/yahoojapan/UICollectionViewSplitLayoutこのOSSを使うと、リストやグリッドで表示されているデータを画面サイズに合わせてレスポンシブに並べることができます。(図1)左は1カラムで縦に要素を並べている。右は2カラムで横並びに要素を並べているiOSのユニバーサルアプリ1で上記のようなデザイン要件を受け、既存の仕組みでは実現することが難しかったため開発しました。本記事では、その技術的な課題を解説し、解決策としてのOSSを紹介したいと思います。UICollectionViewとUICollectionViewLayoutはじめに、UICollectionViewというiOSアプリ開発において重要なクラスのひとつを簡単に説明します。iOSアプリでは、たくさんの要素を画面上に配置するためにUICollectionViewというクラスが選択肢の一つとして使われます。このクラスを使うと、例えば大量の写真サムネイルがグリッド上に並ぶといったUIを、必要十分なパフォーマンスで実装することができます。データ管理とレイアウト計算を分けて考えることができるよう設計されており、レイアウトの柔軟なカスタマイズが可能になっています。個々の要素はItemという概念で取り扱い、さらにそれらをまとめたSectionという上位の概念で全体のリストを管理します。(図2)UICollectionViewのSectionとItemレイアウトを変更したい場合には、UICollectionViewLayoutを継承したレイアウト計算クラスを作ります。それをUICollectionViewに渡すと、任意のレイアウトへ変更できます。(図3)例えばグリッド形式とカバーフロー形式で同じデータを使いながらレイアウトを切り替えるといったことができるこのレイアウト計算クラス部分が、今回公開したOSSです。SDKには標準でUICollectionViewFlowLayoutというレイアウト計算クラスが実装されています。何も指定しなければこれがレイアウトを行います。UICollectionViewFlowLayoutはセクションを縦もしくは横方向へ一直線に並べていきます。(図4)左は垂直方向へスクロールさせる設定にした場合。右は水平方向へスクロールさせる設定にした場合。使う側としては要素のサイズを指定するだけで勝手にレイアウトが決まっていくためとても楽なのですが、今回の要件のようなレスポンシブなレイアウトを実現することはできません。従来の方法では実現できないこのレイアウトを実現するために新しく作ったのがUICollectionViewSplitLayoutです。このレイアウト計算クラスの基本的なアイデアは、セクションを2カラムに分割して並べるという1点のみです。UICollectionViewSplitLayoutでは課題を解決するために、画面全体を2カラムで構成して各セクションを左右どちらに並べるか指定できるという仕様を持っています。左右の幅の比率もパラメータとして渡すことができ、任意のタイミングで2カラムと1カラムを切り替えることができます。(図5)セクションごとに色を分けて表示させている。thisより抜粋)アイデアはとてもシンプルなのですが、これによって簡単にUICollectionViewを使ったレスポンシブUIの実現ができるようになりました。それぞれの画面パーツには変更を加えず、そのレイアウトを柔軟に1カラムと2カラムで切り替えられます。Started”を御覧ください。Startedまたライブラリを使った実装のサンプルコードも同じリポジトリで公開しているので、実際にライブラリを導入したUIを動かしていただけるようになっています。ダウンロードして実行してみてください。UIStackViewとUICollectionViewUICollectionViewSplitLayoutのようなUIを実現する別の方法として、UIStackViewを使うという選択肢もあるでしょう。UIStackViewを使うと簡単に要素を並べていく事ができます。UIStackViewは並びを垂直方向と水平方向で動的に切り替えることができ、それを階層化することで見かけ上同じ動きが実装できます。そのため、リスト形式に要素を並べる方法の一つとして活用するケースも増えてきています。用途とそれに伴う内部的なアーキテクチャはUICollectionViewと異なります。従って計算コストやメモリ効率の面を考えても完全に置き換えられるわけではありません。画像を含む要素を数多く並べたいといった用途で素直に使ってしまうと危険です。UIStackViewの内部的な仕組みについてまとめた資料があるので、そちらも合わせて参照していただけると幸いです。まとめUICollectionViewの標準の仕組みでは作りにくいタイプのレスポンシブUIを実現する方法を考えました。その実装をOSSとして公開させていただきました。Requestもお待ちしています。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。