Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

iOSとAndroidのUXの違いを実際に作りながら理解してみる

Delphiを使ってマルチデバイス開発を実践し、OSごとの違いを学ぶ

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/03/11 14:00

目次

タブを使ってみる

 Delphiのよいところは、すぐに画面を設計して、その場で外観を確認できることです。さっそく、タブをiOSとAndroidで使いわけてみましょう。

新規マルチデバイスアプリケーションの作成

 マルチデバイスアプリケーションを新規に作成します。テンプレートに「タブ」付きのアプリが用意されているのですが、これを使ってしまうと、タブの構成の仕方を順序立ててみることができないので、あえて空のアプリケーションを選択します。

 表示されたフォーム(現在はWindowsのUIになっています)に、TTabControlを配置します。

図6 TTabControlを配置したフォーム

 ご覧のようにコンポーネントはただの四角です。マウスを右クリックすると、[TTabItemの追加]というメニューがあります。これを数回選択すると、複数のタブページが作成されました。

図7 タブページを作成したところ

 コンポーネントの構成を表示する構造ペイン(上図左上)を見ると、TTabControlの下に、TTabItemがあり、親子関係になっていることが見て取れます。

OSごとの違いを見る

 外観が古臭くてどうもテンションが上がらないので、スタイルをWindowsからiOSに変えてみます。

図8 iOSスタイルでタブを表示

 ご覧のように、タブの位置が上ではなく下に変わりました。青い色の文字もiOSっぽいです。せっかくですから、Androidにも変えてみましょう。

図9 Androidスタイルでタブを表示

 OSによってタブの位置が変わるのは、TabPositionプロパティのおかげです。オブジェクトインスペクタで、配置したTTabControlのTabPositionプロパティの値を見ると、PlatformDefaultになっています。この値をたとえば、Bottomに変更すると、Androidでも、タブが下に配置されます。

TTabControlのもうひとつの表示オプション

 ところで、TabPositionプロパティには、Dotsというオプションもあります。これを選択すると、次のように画面上にドットが表示され、ホーム画面のように、複数ページをすばやく切り替えて使用するようにできます。

図10 TabPositionプロパティにDotsを選択

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • EDN編集部(イーディーエヌ編集部)

    エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

バックナンバー

連載:EDN CodeZine出張所

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5