モバイル チュートリアル:タブ コンポーネントを使用してページを表示する(iOS および Android)

提供: Appmethod Topics
移動先: 案内検索

モバイル チュートリアル:モバイル アプリケーション開発(iOS および Android) への移動


タブは FMX.TabControl.TTabControl で定義されており、複数のタブ ページを保持できるコンテナとなります。それぞれのタブ ページには、UI 要素として任意のコントロールを含むことができます。これらのページのタブを非表示にしたり、タブを表示せずにページを移動することができます。


IOSTabs.png

タブごとに以下を指定できます。

  • テキスト ラベル - iOS と Android の両方
  • 定義済みアイコン — iOS の場合のみ
  • カスタム アイコン — iOS とAndroid の両方

iOS および Android のタブでネイティブ スタイルを使用する

このチュートリアルでは、iOS と Android で同じスタイルを使ってタブを表示します。ただし、この方法は推奨できません。
各プラットフォームのネイティブ スタイルを次のようなものと考えることをお勧めします。

  • Android の場合:
    • 通常、タブは画面の上部に置かれます(そのため、TTabPositionTopPlatformDefault に設定してください)。
    • タブは、伝統的にテキストのみで表示されます。ただし、FireMonkey ではカスタム アイコンをタブ上に表示するよう指定することができます(「タブのカスタム多重解像度アイコンを使用する」を参照してください)。
  • iOS の場合:
    • 通常、タブは画面の下部に表示されます(そのため、TTabPositionBottomPlatformDefault に設定してください)。
    • タブ項目は常にテキストとアイコンの両方で表示されます。これは各タブの StyleLookup プロパティで設定することができます。

メモ: TTabPosition 列挙型の値 PlatformDefault を使用して、そのターゲット プラットフォームのデフォルトの動作に従った形で、タブの位置を設定することができます。PlatformDefaultTTabPosition に設定された場合:

  • iOS アプリケーションの場合、タブは TTabControl に下辺に沿って配置されます。
  • Android アプリケーションの場合、タブは TTabControl の上辺に沿って配置されます。

フォーム デザイナを使用してタブ ページを設計する

アプリケーションにタブ ページを作成するには、TTabControl コンポーネントを使用します。手順は以下のとおりです。

  1. 次のいずれかを選択します。
  2. フォーム デザイナの[ビュー]フィールドで、サポートしたいプラットフォームごとにビューを作成します。このチュートリアルでは、iOS と Android のビューを使用します。
  3. [ツール パレット]から TTabControl を選択します。
    SelectTTabControlFromToolPalette.png

  4. TTabControl をドロップすると、空のタブ コントロールフォーム デザイナに表示されます(タブ コントロールの位置を手で調整する必要があるかもしれません)。

iOS

EmptyTabControlOnMobileDesigner.png

Android

AndroidEmptyTabControlOnMobileDesigner.png



  1. 通常、アプリケーションでタブ コントロールを使用する場合には、全画面を使ってページを表示します。
    そのためには、タブ コントロールのデフォルトの位置揃えを変更する必要があります。[オブジェクト インスペクタ]で、タブ コントロールの Align プロパティを Client に変更します。
    ChangeAlignPropertyForTabControlXE6.png

  2. タブ コントロールを右クリックし、コンテキスト メニューから[項目エディタ...]を選択します。
    SelectItemEditorForTabControl.png

  3. [項目の追加]を 3 回クリックします。すると、次の図のように TabItem のインスタンスが 3 つ作成されます。ダイアログ ボックスを閉じます。
    ItemEditorForTabControl.png


  4. フォーム デザイナで、最初のタブ項目を選択し、その StyleLookup プロパティを変更します。

    iOS 7

    SetStyleLookupForTabItem iOS7.png

    Android

    AndroidSetStyleLookupForTabItem.png



  5. 各ページには任意のコンポーネントを配置することができます。
    別のページに移動するには、フォーム デザイナ上で対象のタブをクリックするか、[オブジェクト インスペクタ]ActiveTab プロパティを変更します。
    ChangeActiveTab.png

  6. タブの位置を変更するには、タブ コントロール コンポーネントの TabPosition プロパティを選択します。
    各タブについて、TabPosition プロパティ用に以下のいずれかの値を[オブジェクト インスペクタ]で選択できます。
    SelectTabPositionPropertyForTabControlXE7.jpeg

iOS および Android でのタブ設定を比較する

次の図には、TabPosition の設定(TopBottomDotsNone)を同じにしたときに iOS アプリケーションと Android アプリケーションがどのように表示されるかを示しています。
ただし、モバイル プラットフォームごとに適切に異なる設定にすることをお勧めします。「iOS および Android のタブでネイティブ スタイルを使用する」を参照してください。

Top
iOS Android
TabControlTop.png AndroidTabControlTop.png
タブが上部に表示されます



Bottom
iOS Android
TabControlButtom.png AndroidTabControlBottom.png
タブが下部に表示されます



Dots
iOS Android
TabControlDots.png AndroidTabControlDots.png
タブは表示されません。

代わりに、別のページが存在することを示す 3 つのドット([...])が表示されます。



None
iOS Android
TabControlTopNone.png AndroidTabControlNone.png
タブやドットは、設計時には表示されますが実行時には表示されません。
ページの変更は、コードまたはアクションでしか行うことができません。



プラットフォーム デフォルト
iOS Android
Ios.jpeg Android.jpeg
タブはプラットフォームのデフォルト設定で表示されます。



タブのカスタム多重解像度アイコンを使用する

アプリケーションでは、タブにカスタム多重解像度アイコンやカスタム テキストを使用することができます。
このチュートリアルでは、カスタム アイコンとカスタム テキストを備えた次の 3 つのタブを作成する方法を説明します。

ThreeTabsWithText.png

メモ:

  • Android アプリケーションでは、定義済みのアイコンがサポートされていないため、使用できるのはカスタム アイコンだけです。
  • iOS アプリケーションでは、定義済みアイコンとカスタム アイコンのどちらでも使用できます。
  • iOS や Android でカスタム アイコンを使用するには、フォーム デザイナでデザイン デバイスに iOS または Android を選択し、TTabItemStyleLookup プロパティを tabitemcustom に設定し、このセクションで説明する方法でカスタム アイコンを指定します。
  • iOS の場合には、TTabItemStyleLookup プロパティを TabItemSearch.pngtabitemsearch)など任意のアイコンに設定すると定義済みアイコンを使用できます。
  • このセクションで使用しているカスタム グリフは、$(BDS)\Images\GlyFX ディレクトリ内の zip ファイルに含まれています。
    ここで使用している 3 つの PNG は、Aero ディレクトリにあります。
    • users_32 (People)
    • unlock_32 (Security)
    • tree_32 (Organization)
    これらのイメージまたは GlyFX コレクション内の利用できるその他のイメージを使用したい場合は、MultiResBitmap エディタを使用する前に、glyFX.zip ファイルを解凍します。

タブ上に多重解像度カスタム アイコンを表示する

  1. マルチデバイス アプリケーションの場合、フォーム デザイナに TabControl コンポーネントをドロップし、Align プロパティを Client に設定し、TabControl にタブをいくつか追加します。
    TabsAtTop.png

  2. 1 つのタブを選択し、[オブジェクト インスペクタ]で TTabItem の CustomIcon プロパティの参照([...])ボタンをクリックします。
    TabItemCustomIconBitmapXE6.png

  3. MultiResBitmap エディタが開きます。
    MultiResBitmapEditor0.png
    最初に表示される空の[縮尺]のエントリは、縮尺が 1.000 であると見なされます。
    Size サイズのドロップダウン リストをクリックして[デフォルト サイズ]を選択し、サイズを 32 x 32 に設定します。
    DefaultSize.png

  4. 以下の手順を繰り返して、サポートしたい縮尺を追加します。
    1. [新しい項目の追加]をクリックします。New.bmp
    2. NNN はキー サイズで、1.5 ビット、2 ビット、3 ビットのいずれかです。
    • 必要な縮尺をすべて追加すると、エディタは次のようになります。
      AllTheScalesAdded2.png

  5. [ファイルからすべてに入力]ボタン MResBMPFill.png をクリックし、使用したい .png ファイルを探して選択し、[開く]をクリックします。
    選択した画像が、MultiResBitmap エディタのそれぞれの[縮尺]のエントリに適切な縮尺で表示されます。
    EditorFullyPopulated2.png

  6. MultiResBitmap エディタを閉じます。
  7. 残りの tabitem について 2 ~ 6 の手順を繰り返し、各 tabitem にカスタム アイコン画像を割り当てます。
  8. Text プロパティでそれぞれのタブのテキストを変更します。
    TabItemTextProperty.png

カスタム アイコンを定義すると、FireMonkey フレームワークによって、指定した .png ファイルから選択時の画像非選択時の(淡色表示の)画像が生成されます。この変換は、ビットマップ データのアルファ チャネルを使って行われます。以下に例を示します。

元の画像 選択時の画像 非選択時の画像
Users 32 h.png TabItemSelected.png TabItemNotSelected.png



カスタム アイコンに単一解像度ビットマップを使用する

[ビットマップ エディタ]を使って単一解像度ビットマップだけを使用することもできます。 単一解像度ビットマップの場合は、[構造]ビューに 1 つの縮尺だけが表示されます。

SingleResBitmapInStructureView.png

カスタム アイコンに単一解像度ビットマップを指定するには、上記手順の最初のステップを実行し、それから以下の作業を行います。

  1. [構造]ビューで、CustomIcon の下の Empty を選択します。
    TabItemCustomIconBitmapXE6 1.png

  2. 次に、[オブジェクト インスペクタ]で、TabItem1.CustomIcon[0]Bitmap フィールドの参照([...])ボタンをクリックします。[ビットマップ エディタ]が開きます。
    TabItemCustomIconBitmapXE6 2.png

  3. [ビットマップ エディタ][読み込み...]ボタンをクリックし、PNG ファイルを選択します。
    推奨サイズは、標準解像度の場合には 30 x 30 ピクセル、高解像度の場合には 60 x 60 ピクセルです。
    BitmapEditorForCustomIcon.png

  4. [OK]をクリックして[ビットマップ エディタ]を閉じます。

  5. [オブジェクト インスペクタ]で、StyleLookup プロパティを tabitemcustom に設定します。
    TabItemStyleLookupProperty.png

タブ コントロール内のコントロールを定義する

既に説明したように、それぞれのタブ ページには、任意の数のコントロール(別のタブ コントロールでもかまいません)を含むことができます。その場合には、さまざまなタブ ページを[構造]ビューで簡単に参照したり管理することができます。

iOS

TabControlCanContainAnotherTabControl.png

Android

AndroidTabControlCanContainAnotherTabControl.png



実行時にページを変更する

ユーザーがタブをタップしたときに

タブが表示されている(TabPosition プロパティが None 以外に設定されている)場合は、エンド ユーザーがタブをタップすると、それだけでページが切り替わります。

アクションとアクション リストを使用して

1 つのアクションは 1 つ以上のユーザー インターフェイス要素(メニュー コマンド、ツールバー ボタン、コントロールなど)に対応します。アクションには 2 つの機能があります。

  • ユーザー インターフェイス要素に共通のプロパティを表します(コントロールが有効か、チェック ボックスがオンになっているかなど)。
  • コントロールが起動したときに応答します(アプリケーション ユーザーがボタンをクリックした、メニュー項目を選択したなど)。

ユーザーがボタンをクリックすることで別のタブ ページに移動できるようにする手順は次のとおりです。

  1. マルチデバイス アプリケーションに TabControl を配置し、そこにタブ項目(TabItem1、TabItem2、TabItem3)を追加します。
  2. [ツール パレット]からフォームに TButton を追加し、さらに ActionList コンポーネントを追加します。
    iOS:
    PlaceActionListComponentToForm.png

    Android:
    AndroidPlaceActionListComponentToForm.png

  3. フォーム デザイナで[マスタ]ビューをアクティブにします。それから、ボタン コンポーネントを選択し、[オブジェクト インスペクタ]で Action プロパティのドロップダウン メニューから[標準アクションの新規作成|タブ|TChangeTabActionを選択します。ユーザーがこのボタンをクリックすると、ここで定義したアクションが実行されます(タブ ページが切り替わります)。
    iOS:
    CreateNewChangeTabAction.png

    Android:
    AndroidCreateNewChangeTabAction.png

  4. [構造]ビューChangeTabAction1 を選択し、[オブジェクト インスペクタ]で Tab プロパティに TabItem2 を選択します。これで TabItem2 にリンクされるため、このアクションでページを TabItem2 に変更することができます。
    iOS:
    SelectTabPageForChangeTabAction.png

    Android:
    AndroidSelectTabPageForChangeTabAction.png

  5. 前のステップが終わると、ボタンのキャプション(Text プロパティ)が自動的に "Security に移動" に変化しています(この例では TabItem2 のキャプションが "Security" であるため)。新しいキャプション テキストに合わせてボタンのサイズを変更するか、ChangeTabAction1 コンポーネントの CustomText プロパティを次のように変更します。
    iOS:
    ChangeCustomText.png

    Android:
    AndroidChangeCustomText.png

  6. ChangeTabAction では、ページ間の移行を示すスライド アニメーションもサポートしています。このアニメーションを使用するには、Transition プロパティを Slide に設定します。
    SetChangeTabTransitionXE6.png



ソース コードによって

次の 3 つのどの方法を使っても、ソース コードからアクティブなタブ ページを変更することができます。

TTabItem のインスタンスを ActiveTab プロパティに代入する

Object Pascal の場合:

  TabControl1.ActiveTab := TabItem1;
C++ の場合:
  TabControl1->ActiveTab = TabItem1;

TabIndex プロパティを別の値に変更する

TabIndex プロパティは、0 から始まる整数値です。0 から TabControl1.TabCount - 1 の間の任意の数値を指定することができます。

Object Pascal の場合:

  TabControl1.TabIndex := 1;
C++ の場合:
  TabControl1->TabIndex = 1;

ChangeTabAction が定義されている場合はアクションをコードから実行することができる

Object Pascal の場合:

  // ターゲットがまだ定義されていない場合、実行時に設定することができる
  ChangeTabAction1.Tab := TabItem2;

  // アクションを呼び出す
  ChangeTabAction1.Execute;
C++ の場合:
  ChangeTabAction1->Tab = TabItem2;
  ChangeTabAction1->Execute();

関連項目