タブにカスタムアイコンを表示する

投稿者:: Chikako Yonezawa

概要: この記事では、カスタムアイコンを表示させるための手順について説明します。

モバイルアプリケーションを作成する際の使用頻度が高いコンポーネントとして、タブコンポーネント(TTabControl)があります。
タブコンポーネントを使用すると、表示されたタブをクリックすることで画面表示を切り替えることができます。(このタブは非表示することも可能です)

また、iOSと Androidでは、タブコントロールの表示について次のような違いがあります。

  • iOS : タブは主に画面の下部に表示。タブの項目としてアイコンとテキストが表示されます。
  • Android: タブは主に画面の上部に表示。タブの項目としてテキストのみであることが多い。

RAD Studio/Delphi/C++Builder では、iOSアプリでタブにアイコンを表示させる場合、よく使用されるアイコンが付属したデフォルトスタイルを使用するか、ご自身で作成したカスタムアイコンを設定します。
Andoridアプリで、タブにアイコンを表示させる場合はカスタムアイコンを設定します。

RAD Studio/Delphi/C++Builder では容易にカスタムアイコンを設定することができます。
この記事では、カスタムアイコンを表示させるための手順について説明します。

Note:
説明に使用している製品のバージョンは XE7となります。旧バージョンでも同様の操作となります。
この記事で使用しているカスタムアイコンは、<製品のインストールフォルダ>\Images\GlyFX に含まれているアイコンを使用しています。

    タブコントロールの配置

  1. [ファイル|新規作成|マルチデバイスアプリケーション - Delphi] または [ファイル|新規作成|マルチデバイスアプリケーション - C++Builder]を選択します。
  2. マルチデバイスアプリケーションの種類は「空のアプリケーション」を選択します。
  3. ツールパレットから TTabControlを選択し、ダブルクリック、またはドラッグ&ドロップして、デザイナ上にコンポーネントを配置します。
  4. 画面全部を TabControlで覆うため、オブジェクトインスペクタ上で、TabControlの Alignプロパティを Clientに設定します。
  5. タブを画面の横幅で均等に配置するため、TabControlの FullSizeプロパティを True に設定します。
  6. デザイナ上の TabCotrolをダブルクリックして「項目デザイナ」を表示させ、[項目の追加]ボタンを2回押し、2項目を追加します。
  7. 「項目デザイナ」の右上の×ボタンをクリックして、「項目デザイナ」を閉じます。

Hide image
Click to see full-sized image

ここまでの手順によりタブコントロールとタブ項目を設定しました。
次はこのタブ項目にカスタムアイコンを設定します。

    カスタムアイコンの設定

  1. 構造ペイン上の TabItem1をクリックし、オブジェクトインスペクタ上で CustomIcon プロパティの [...]ボタンをクリックします。
  2. Hide image

  3. MultiResBitmap エディタが表示されます。
  4. ファイル読み込みのボタンをクリックし、カスタムアイコンに使用するファイルを指定します。(ここでは GlyFX の \Icons\Aero\PNG\32x32 内の home_32.png を使用しています)
  5. Hide image

  6. MultiResBitmap エディタ上の[↑↓]ボタンを押して確定し、右上の×ボタンを押して MultiResBitmap エディタを閉じます。
  7. Hide image

  8. 1-4 の手順を TabItem2側にも行います。(ここでは GlyFX の \Icons\Aero\PNG\32x32 内の piggy_bank_32.png を使用しています)

これで設定は完了です。

    表示の違いについて

XE7では、フォームデザイナ上の「スタイル」の項目を切り替えることにより、ターゲットとなるプラットフォーム別の表示の状態を確認することができます。
それぞれのプラットフォームでの違いをご覧ください。

    Windows

    OS X

    iOS

    Android

次からのサーバー応答:: ETNASC03