Storyboard UI_html/css_WEB-ITnose を使用してタブ バーのマルチページ アプリケーションを構築する

メインコンテンツ

タブバーマルチビューとナビゲーションバーマルチビューの違い

ストーリーボードでタブバーマルチビューアプリケーションを構築

簡単な説明

タブバーアプリケーションはマルチビューです-view application 。画面の下部にタブ バーと呼ばれるボタンの行が表示されます。ボタン 1 つで新しいビュー コントローラー (タブ) がアクティブになり、下部のタブ バーを保持したまま新しいビューが表示されます。下の図に示すように、3 つのタブ バーがあります。

もう 1 つの一般的なマルチビュー iPhone アプリケーションは、ナビゲーション ベースのアプリケーションであり、ナビゲーション コントローラーを備えており、ナビゲーション バーを使用して一連の階層化されたビューを制御します。ナビゲーション コントローラーは、現在のビューの深さを追跡し、前のビューに戻るための制御を提供します。タブ バーは、2 つ以上のオプションから 1 つのオプションを選択するために使用され、選択できるのは 1 つだけです (タブ バーは主に、並列ページ間の選択に使用されます)。

参考: この簡単な紹介は主に「Mastering iOS Development」の第 6 章「マルチビュー アプリケーション」を参照しています

ストーリーボードを使用してタブ バーを構築する

ここでは、ストーリーボードを使用してタブ バー マルチを構築する方法について説明します-アプリケーション UI を表示します。

1タブ バー コントローラーを選択します

まず、ストーリーボードのオブジェクト選択でタブ バー コントローラーを選択します:

ストーリーボードでは、以下に示すような UI インターフェイスが表示されます。最初のページ (タブ バー コントローラー) は必要ありません。タブ ページ (次の 2 ページ) での操作は自動的にタブ バー コントローラーに更新されるため、これを操作する必要があります。

2 独自の TableView コントローラーを追加します

上の図からわかるように、タブ バー コントローラーをストーリーボードにドラッグすると、そのタイプはビュー コントローラーで、削除できます。次に、必要に応じて独自のビュー コントローラーを追加します。

まず最初の組み込みビュー コントローラーを削除し、次に右側から TableView コントローラーをドラッグします

上の図に示すように、独自の TableView コントローラーを追加した後、タブからジャンプを作成します。バー コントローラーから TableViewController へ (Control キーを押したままタブ バー コントローラーから TableViewController まで線をドラッグします) 上の図から、プッシュ、モーダル、カスタムの通常の 3 つのメソッドに加えて、もう 1 つのビューがあることがわかります。コントローラー。ここでは、この接続を選択する必要があります。

3 タブ バーのラベル スタイルを変更します。

追加した TableViewController のタブ アイコン (タブ バー項目) を選択します。

属性のプロパティを表示します。検査官:

上にマークされた 2 つの項目は変更できます。 1 つ目はラベル アイコンの下に表示されるテキストで、2 つ目はアイコン ICON です。変更後の効果は次のとおりです:

この時点で、Tab Bar Controller のタブ バーが自動的に更新されていることがわかります (これは、Tab BarController を変更する必要がないことを前述したことです)。 :

同様に、付属の他の ViewController を削除し、必要な TableViewController を追加して、先ほど行った操作を繰り返します:

4新しいコントローラを追加します

ドラッグした Tab BarController前に示したものには View Controller が 2 つしかなく、ラベル バーにはラベル アイコンが 2 つだけあります。ここでは、新しいビュー コントローラー TableViewController を追加します

ここでは、新しく追加された TableView コントローラー クラスのタブ バー コントローラーが接続されていない場合、タブ バーには 2 つのタブしかなく、新しく追加された TableView コントローラーにもタブがないことがわかります。タブバー。次に、先ほどの方法に従って Tab Bar Controller を接続しますが、動作はまったく同じです。

タブ バー コントローラーと TableView コントローラーを接続すると、タブ バー コントローラーのタブ バー ラベルの数が自動的に 3 つになることがわかります。同様に、新しく追加された TableViewController のラベル スタイルを変更できます。

この時点で、3 つの TableView タブを備えたタブ バーのマルチページ UI が完成しました。次のステップはコントローラーとモデルを追加することですが、ここでは紹介しません。

5 実行

タブの切り替えを確認するために、各ページにラベルを追加しました。

6 参照

詳細については、このビデオも参照してください。

http://teamtreehouse.com/library/build-a-selfdestructing-message-iphone-app-2/designing-and-starting-the-app/a-storyboard-with-a-tab-bar -controller

備考

ここでのタブバーマルチページアプリケーションは、タブバーページに入る方法、入力方法、および違いについてはまだ説明していません。タブバーコントローラーとナビゲーションバー』の記事で詳しく解説します。

デモのソース コードはここからダウンロードできます:

Guo Liu

初編集: 2014 年 8 月 23 日土曜日