読者です 読者をやめる 読者になる 読者になる

Xojo日本語ブログ

マルチプラットフォーム対応アプリが開発できるXojoのブログです。

iOSアプリでタブバーを表示する

Xojoを使えばiOSアプリも開発できます。今回はまずタブバーを表示する方法を紹介します。

画像を登録する

まずタブバーで表示する画像を用意します。オンライン上には多くのフリーアイコン配布サイトがあります。例えば iOS 9 Icon Pack - Download 7,800 Free Icons for iPhone Apps | Icons8 があります。今回はここから家と地図風のアイコンをダウンロードしました。この時、30x30/60x60/90x90の3つのサイズで用意する必要があります。

そしてXojo IDE側でイメージを追加します。アイコンではないので注意してください。

f:id:moongift:20161007053439p:plain

イメージを追加したら、その内容を見て画像をそれぞれドラッグ&ドロップします。@1xには30x30の画像、@2xには60x60、@3xには90x90の画像を登録します。

f:id:moongift:20161007053509p:plain

タブバー切り替え時のビューを用意する

デスクトップではウィンドウですが、iOSアプリの場合はViewと呼ばれます。そこでタブバーを切り替えた時に表示する新しいビューを用意します。挿入でViewを選択します。これはタブの分だけ用意してください。

f:id:moongift:20161007053533p:plain

iPhoneScreenを修正する

最後にiPhoneScreenを修正します。インスペクタのScreen Layoutの中にあるContentをTabsにします。

f:id:moongift:20161007053544p:plain

そしてTabsの編集をクリックします。表示されるモーダルで Label と Icon を変更します。

f:id:moongift:20161007053603p:plain

そうするとプレビューの表示もタブアイコンが変更されます。

f:id:moongift:20161007053618p:plain

Label を空にするとアイコンだけになります。

f:id:moongift:20161007053635p:plain

アプリを実行する

アプリを実行すると、タブが表示されて切り替えて表示できるようになります。

f:id:moongift:20161007053649p:plain


このようにして簡単にタブバーを使ったiOSアプリが作れるようになります。ウィンドウとViewといった具合に呼び方は変わりますが、使い勝手はデスクトップ、Web版と変わりません。ぜひiOSアプリ開発にもチャレンジしてみてください。