FireMonkey環境でリッチビジュアルなListViewを作る

こんにちは。Delphi大好きな太田アベルです。

 

先日に引き続きDelphi XE4を主体に体験記を書いています。

---

 

前回までの体験記事

Delphiで作ったMacアプリケーションの配布(バンドル .app化)
MacにDelphiのデバッガI/F PAServerをセットアップする
Delphi XE4発売！モバイル開発はどんな具合？

---

今日はFireMonkey環境でのリッチビジュアルなTListBoxの作り方です。

FireMonkey+StyleBook

VCL環境でのTListBoxでは、さまざまなビジュアル表現は描画イベント内で手動で描く必要がありました。

内部ではTBitmapを生成したりStreachDrawをかけたりと、なかなの手間です。

 

しかしFireMonkey+StyleBookを使えば、驚くほどカンタンにアイコン(Bitmap)表示をすることができます。

ただこの使い方は一度知ればカンタンなんですが、その方法をあんまり説明しているページがなくて苦労したので書いておこうと、そういう記事です。

StyleBook

StyleBook自体の詳しい解説は今日はいたしません。

フォームのビジュアル面を細かく設計できますよ、フォームの外観をがらっと変えることが出きますよ、とまあそういうものです。（今日は初心者向けの記事ではないのでこれでいいかな？）

 

しかし、ただビジュアル面を変えるだけのものだと思うとStyleBookの真価を見逃します。

各コンポーネントの内部構造を好き勝手に変えられる、とても素敵なシステムなんです。

リスト項目の内部構造を変えることで、アイコンやカラムの追加などが行えます。

使い方

---

使い方を解説しますが、XE4で解説しております。

XE3, XE2ではプロパティや用語が違う可能性がありますのでご注意ください。

---

 

FireMonkey HDアプリケーションを新規作成し、フォームにTListBox、TButtonをドロップ

 

TListBoxに項目を追加します

これは適当な数でかまいませんが、2個は追加してください。

 

カスタムスタイルの割り当て

次にこの項目の一つにカスタムスタイルを割り当てます。
1番先頭のアイテムを右クリックし、「カスタムスタイルの編集」をクリックします

 

スタイル編集画面

スタイル編集画面が開きます。
左側に「listboxitemstyle1: TLayout」という項目があると思います。これがListView項目のスタイルです。

 

右のコンポーネントパレットから「TImage」を追加します

この時フォームの設計のようにビジュアル部分に落としても追加されません。

 

左の構造パレットの方にドロップすると追加できます。（なぜだろうか）

 

AlignにAlLeftを指定します

 

ビジュアルはこのようになると思います。
自動的にマージンが割り当てられていますね。

 

上部の「適用して閉じる」を押して、ビジュアルデザイナを閉じます。

他の項目に割り当て

さて、この状態では項目1のみにスタイルが割り当てられましたが、2,3はそのままです。

2,3番目の項目にも同じスタイルを割り当てます。

2,3番目の項目を選択

オブジェクトインスペクタにStyleLookupという項目があります。

 

ドロップダウンすると設定されているスタイルが一覧できます。

先ほど作成したListBoxItem1Style1を選択します。

 

2,3番目にも同様のスタイルが設定されました。

プログラム中から画像を設定

Button1のイベントハンドラで、1番目の項目にアイコン画像を読み込んでみましょう。

スタイルの内部構造にはStylesDataプロパティからアクセスすることができます。

クラスのインスタンスの場合、AsObjectとしてインスタンスを取得できますので、今回はこのオブジェクトをTBitmapにキャストします。構文は以下のようになります。

TBitmap(ListBoxItem1.StylesData['image1'].AsObject).LoadFromFile('./a.jpg');

（a.jpgは適当な画像をexeと同じ場所に入れておきます。FireMonkeyのTBitmapは標準でJpeg,Gif,Pngを読み書きできます。うれしいですね！）

※ここでも注意

スタイルデザイナではTImageを貼り付けましたが、なぜか項目のインスタンスではTBitmapとして生成されています。

TImageでキャストするとエラーになりますのでご注意を。（なぜだろう）

実行

では実行してみます。

 

Button1を押すと・・・

見事に画像が表示されましたね！

 

これでアイコン付きのリストが簡単に作れます。

またTTextなどを追加すれば文字列を複数表示することもできます。

作り方しだいで非常に見やすいリストになるでしょう。

まとめ

FireMonkeyではいままでプログラム中から無理やりいじっていたような操作（コンポーネントの表示など）がビジュアルに、手軽に変えられるようになりました。

スタイルデザイナの活用方法で、開発期間も大きく変わってくるでしょう。

 

P.S

DEKOさんのDelphiフォーラムが非常に充実してきています。

このアウトプット力にはホント、頭が下がりすぎて地面に埋まりそうです。ええ。

なにか困ったら見てみると吉ですね。

 

ただ、使い方にも書いてありますが、「さっぱりわかりません。なんとかしてください」的なやめましょう。エスパー向けの質問は2chにでも書きましょう。