リスト表示画面を作ろう!


スマートフォンで一般的によく使われるListViewクラス

プロジェクト

スマートフォンでもっともよく使われるListViewerクラスを解説します。

「COM.CAEDE.CAEDESAMPLE」内の「menu-block.scurl」内の「MenuBlockGraphic」クラスです。

スマートフォンでは一覧形式で表示する画面の大きさがありませんので、ListViewを使用して、詳細を見る場合は選択してブレイクダウンする手法を使います。タブレットの場合は左に常に表示して右側に詳細が出力されるように使います。 ListViewerクラスで使用するデータはConnectedListModelやDefaultListModelViewを使用しますが、ConnectedListModel、DefaultListModelViewについては「11.データを管理しよう!」の部分で解説します。

サンプル・アプリケーションではListViewerを使用して幅(width)と高さ(height)にmake-elasticプロシージャを設定しています。make-elasticプロシージャは親のオブジェクトのサイズに合わせて幅や高さを伸長圧縮させることができる機能です。スマートフォンやタブレットの画面サイズはさまざまであり、しかも縦横に向きを変えることもできます。そのため、その種類に応じたサイズに設定する必要がありますが、make-elasticプロシージャを設定しおけばどのようなサイズであってもピッタリフィットした画面が生成されます。このプロシージャについては「 9.エラスティックとダイナミックレイアウト 」で詳しく説明します。またnameは動的にデータを設定するときなどにScreenクラスから使用します。

「menu-block.scurl」の「MenuBlockGraphic」クラス