Xamarin.iOS 中的索引標籤和索引標籤控制器

索引標籤應用程式用於 iOS，以支援使用者介面，其中多個畫面無法依特定順序存取。 透過類別 UITabBarController ，應用程式可以輕鬆地包含這類多螢幕案例的支援。 UITabBarController 負責多畫面管理，讓應用程式開發人員能夠專注於每個畫面的詳細數據。

通常，索引標籤應用程式是使用 主視窗的 來建置UITabBarControllerRootViewController。 不過，使用一些額外的程式代碼，索引卷標式應用程式也可以連續使用至一些其他初始畫面，例如應用程式第一次呈現登入畫面的案例，後面接著索引卷標式介面。

此頁面討論這兩種案例：當索引標籤位於應用程式檢視階層的根目錄，以及非RootViewController 案例中時。

UITabBarController 簡介

支援 UITabBarController 下列索引標籤式應用程式開發：

• 允許將多個控制器新增至其中。
• 透過類別提供索引標籤式使用者介面 UITabBar ，讓使用者在控制器與其檢視之間切換。

控制器會透過其 ViewControllers 屬性新增至 UITabBarController ，也就是UIViewController數位。 本身 UITabBarController 會處理載入適當的控制器，並根據選取的索引標籤呈現其檢視。

索引標籤是 類別的 UITabBarItem 實體，這些實例包含在實體中 UITabBar 。 每個 UITabBar 實例都可透過 TabBarItem 每個索引標籤中控制器的屬性來存取。

若要瞭解如何使用 UITabBarController，讓我們逐步解說建置使用的簡單應用程式。

索引標籤式應用程式逐步解說

在本逐步解說中，我們將建立下列應用程式：

雖然 Visual Studio for Mac 中已經有索引卷標式應用程式範本可供使用，但在此範例中，這些指示會從空白項目運作，以進一步瞭解應用程式的建構方式。

建立應用程式

從建立新的應用程式開始。

在 Visual Studio for Mac 中選取 [檔案新增方案] 選單項，然後選取 iOS 應用程式空白專案範本，將專案TabbedApplication命名為 ，如下所示： > >>>

新增 UITabBarController

接下來，選取 [檔案 > 新檔案 ] 並選擇 [一般：空類別] 範本，以新增空白類別 。 將檔案 TabController 命名如下：

類別 TabController 將包含的實作 UITabBarController ，該實作會管理 的 UIViewControllers陣列。 當用戶選取索引標籤時， UITabBarController 會負責呈現適當檢視控制器的檢視。

若要實作 ， UITabBarController 我們需要執行下列動作：

1. 將的 TabController 基類設定為 UITabBarController 。
2. 建立 UIViewController 實體以新增至 TabController 。
3. 將 UIViewController 實例新增至指派給 ViewControllers 屬性的 TabController 陣列。

將下列程式代碼新增至 TabController 類別，以達成下列步驟：

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

請注意，針對每個 UIViewController 實例，我們設定 Title 的 UIViewController屬性。 將控制器新增至 UITabBarController時， UITabBarController 將會讀取 Title 每個控制器的 ，並將它顯示在相關聯的索引卷標標籤上，如下所示：

將 TabController 設定為 RootViewController

控制器在索引標籤中放置的順序會對應至它們新增至 ViewControllers 陣列的順序。

若要將 載入 UITabController 為第一個畫面，我們需要將窗口 RootViewController設為的 ，如 下列程式 AppDelegate代碼所示：

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

如果我們現在執行應用程式，預設 UITabBarController 會載入已選取的第一個索引標籤。 選取任何其他索引標籤會導致相關聯的控制器檢視呈現 UITabBarController, ，如下所示，終端使用者已選取第二個索引標籤：

修改 TabBarItems

既然我們有執行中的索引標籤應用程式，讓我們修改 TabBarItem 以變更顯示的影像和文字，以及將徽章新增至其中一個索引標籤。

設定系統專案

首先，讓我們設定第一個索引標籤來使用系統專案。 在 的 TabController建構函式中，移除設定 實例之 控制器的 Title tab1 行，並將它取代為下列程序代碼，以設定控制器的 TabBarItem 屬性：

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

使用 UITabBarSystemItem建立 UITabBarItem 時，iOS 會自動提供標題和影像，如下列螢幕快照所示，顯示第一個索引標籤上的 [我的最愛] 圖示和標題：

設定影像

除了使用系統專案之外，的 UITabBarItem 標題和影像也可以設定為自定義值。 例如，變更設定 TabBarItem 名為 tab2 之控制器屬性的程式代碼，如下所示：

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

上述程式代碼假設名為 second.png 的影像已新增至專案的根目錄（或 Resources 目錄）。 若要支援所有螢幕密度，您需要三個影像，如下所示：

建議的大小會根據影像的樣式而有所不同（圓形、方形、寬或高）。

屬性 Image 只需要設定為 second.png 檔名，iOS 會在需要時自動載入更高解析度的檔案。 您可以在使用影像指南中深入瞭解這一點。 根據預設，索引標籤專案為灰色，選取時會呈現藍色色調。

覆寫標題

Title當 屬性直接在 上TabBarItem設定時，它會覆寫控制器本身上設定Title的任何值。

這個螢幕快照中的第二個 （中間） 索引標籤會顯示自訂標題和影像：

設定徽章值

索引標籤也可以顯示徽章。 例如，新增下列程式代碼行，以在第三個索引標籤上設定徽章：

tab3.TabBarItem.BadgeValue = "Hi";

執行此作業會產生紅色標籤，其中索引標籤左上角有字串 「Hi」，如下所示：

徽章通常用來顯示未讀取的新項目數目指示。 若要移除徽章，請將 設定 BadgeValue 為 null，如下所示：

tab3.TabBarItem.BadgeValue = null;

非 RootViewController 案例中的索引標籤

在上述範例中，我們示範如何在視窗是 RootViewController 視窗的 時使用 UITabBarController 。 在此範例中，我們將檢查如何在不是 RootViewController 時使用 UITabBarController ，並示範其建立方式使用分鏡腳本。

初始畫面範例

在此案例中，初始畫面會從不是 UITabBarController的控制器載入。 當使用者點選按鈕與畫面互動時，會將相同的檢視控制器載入至 UITabBarController，然後向用戶呈現。 下列螢幕快照顯示應用程式流程：

讓我們針對此範例啟動新的應用程式。 同樣地，我們將使用 iPhone > 應用程式 > 空白專案 （C#） 樣本，這次將專案 InitialScreenDemo命名為 。

在此範例中，分鏡腳本是用來配置檢視控制器。 若要新增分鏡腳本：

• 以滑鼠右鍵按兩下 [項目名稱]，然後選取 [ 新增 > 檔案]。

• 當 [新增檔案] 對話框出現時，流覽至 [iOS > 空白 iPhone 分鏡腳本]。

讓我們呼叫這個新的分鏡腳本 MainStoryboard ，如下所示：

將分鏡腳本新增至先前非分鏡腳本檔案時，有幾個重要步驟要注意，本文涵蓋於 分鏡腳本 簡介指南中。 這些包括：

1. 將分鏡文稿名稱新增至 的 Info.plist[主要介面] 區段：

   

2. App Delegate在您的 中，使用下列程序代碼覆寫 Window 方法：

   public override UIWindow Window {
       get;
       set;
   }
   

在此範例中，我們將需要三個檢視控制器。 一個名為 ViewController1的 ，將作為初始檢視控制器，並在第一個索引標籤中使用。另外兩個名稱為 ViewController2 和 ViewController3，分別用於第二個和第三個索引標籤中。

按兩下MainStoryboard.storyboard 檔案開啟設計工具，然後將三個檢視控制器拖曳至設計介面。 我們希望每個檢視控制器都有自己的類別對應至上述名稱，因此，在 [身分識別>類別] 底下，輸入其名稱，如下列螢幕快照所示：

Visual Studio for Mac 會自動產生所需的類別和設計工具檔案，這可以在 Solution Pad 中看到，如下所示：

建立 UI

接下來，我們將使用 Xamarin iOS 設計工具，為每個 ViewController 的檢視建立簡單的使用者介面。

我們想要從右側的 ToolBox 將 和 Button 拖曳Label到 ViewController1。 接下來，我們將使用 Properties Pad 將控件的名稱和文字編輯為下列內容：

• 標籤：Text = 一個
• 按鈕 ： Title = 用戶採取一些初始動作

我們將控制事件中 TouchUpInside 按鈕的可見度，我們需要在程序代碼後置中參考它。 讓我們使用 Properties Pad 中的 Name aButton 來識別它，如下列螢幕快照所示：

您的設計介面現在看起來應該類似下列螢幕快照：

讓我們將標籤新增至 ViewController2 和 ViewController3，將標籤分別變更為 『Two』 和 『Three』。 這會醒目提示使用者要查看的索引標籤/檢視。

連接按鈕

我們會在應用程式第一次啟動時載入 ViewController1 。 當使用者點選按鈕時，我們會隱藏按鈕，並在第一個索引標籤中載入 UITabBarController 實例 ViewController1 。

當使用者放開 aButton時，我們想要觸發 TouchUpInside 事件。 讓我們選取按鈕，然後在 [屬性] 面板的 [事件 ] 索引標籤中，宣告事件處理程式 – InitialActionCompleted 以在程式代碼中參考。 以下螢幕快照說明：

我們現在需要告訴檢視控制器在事件引發 InitialActionCompleted時隱藏按鈕。 在 中 ViewController1，新增下列部分方法：

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

儲存盤案，然後執行應用程式。 我們應該會看到第一個畫面出現，按鈕在 [觸控] 上消失。

新增索引標籤控制器

我們現在的 [初始] 檢視如預期般運作。 接下來，我們想要將它新增至 UITabBarController，以及 Views 2 和 3。 讓我們在設計師中開啟分鏡腳本。

在 [工具箱] 中，搜尋 Controllers & Objects 下的 Tab 列控制器，並將它拖曳到設計介面上。 如下列螢幕快照所示，Tab 列控制器為無 UI，因此預設會使用兩個檢視控制器：

選取底部的黑色列並按 delete 鍵，以刪除這些新的檢視控制器。

在我們的分鏡腳本中，我們可以使用 Segues 來處理 TabBarController 和檢視控制器之間的轉換。 與初始檢視互動之後，我們想要將它載入至向用戶顯示的 TabBarController。 讓我們在設計工具中設定此專案。

Ctrl-Click 和 Drag from the button to the TabBarController. 在滑鼠上，將會出現操作功能表。 我們想要使用強制回應 segue。

若要設定每個索引標籤，請依序從 TabBarController 按下至每個檢視控制器，然後從操作功能表中選取 [關聯性] 索引標籤，如下所示：

您的分鏡文稿應該類似下列螢幕快照：

如果我們按下其中一個索引標籤項目並瀏覽屬性面板，您可以看到許多不同的選項，如下所示：

我們可以使用此功能來編輯某些屬性，例如徽章、標題和iOS標識碼等。

如果我們立即儲存並執行應用程式，我們發現當 ViewController1 實例載入 TabBarController 時，按鈕會重新出現。 讓我們藉由檢查目前的檢視是否有父檢視控制器來修正此問題。 如果確實如此，我們知道我們在 TabBarController 內，因此應該隱藏按鈕。 讓我們將下列程式代碼新增至 ViewController1 類別：

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

當應用程式執行且用戶點選第一個畫面上的按鈕時，會載入UITabBarController，並從第一個索引卷標放置的第一個畫面檢視，如下所示：

摘要

本文涵蓋如何在應用程式中使用 UITabBarController 。 我們逐步解說如何將控制器載入每個索引標籤，以及如何在索引標籤上設定屬性，例如標題、影像和徽章。 接著，我們會使用分鏡文本，在不是RootViewController視窗的 時，檢查如何在執行時間載入 UITabBarController 。

相關連結

• Images.zip
• UITabBarController 類別參考