Xamarin.IOS之多視圖

歡迎大家加入以下開源社區

Xamarin-Cn：https://github.com/Xamarin-Cn

Mvvmcross-Cn：https://github.com/Mvvmcross-Cn 

（另外微信訂閱號 Xamarin 所有者@善友兄也給予了運營權限，后面將開始陸續運營起來，給大家推送相關的文章）

 

 

繼上節《Xamarin.IOS之快速入門》之后，本節將會在此基礎之上具體擴展，主要是增加一個列表可以提供歷史撥打電話的記錄。下面我們直接進入正題。

 

首先打開MainStoryboard.storyboard，我們在這個基礎之上繼續修改。從工具欄中拖放一個Navigation Controller到故事板中，然后我們可以看到如下所示：

 

但是當前的主視圖控制器還是之前的，我們需要將新的設置為主視圖，所以我們要將拖放到下面這個視圖控制器，然后我們還需要刪除Navigation Controller所指向的那個視圖控制器，然后按下Ctrl並左擊Navigation Controller，進行拖拽，會發現一個藍色的線條，我們就需要講這個藍色線條拖拽到我們上節做的那個視圖控制器上，並在彈出的下拉中選擇Root，這樣就代表這個導航控制器的根視圖控制器就是我們上節的那個，進行這番操作的結果如圖：

我們可以看到我們的視圖控制器上多個了標題欄，我們可以雙擊它，修改成“Phoneword”。接着我們重新拖拽一個Button到Call按鈕下，並且寬度和上一個按鈕一樣，同時設置該按鈕的Name為CallHistoryButton，顯示的文字為Call History。完成之后的界面如下所示：

 

下面我們就需要去完成Call History跳轉到的視圖控制器，我們先從工具欄中拖拽一個Table View Controller放入到故事板中，然后打開屬性窗口修改該視圖控制器的Class為“CallHistoryController”並回車確認，這個時候你可以看到vs為我們生成了一個CallHistoryController.cs的文件，然后我們雙擊進入到然后輸入以下代碼：

partial class CallHistoryController : UITableViewController
    {
        public List<String> PhoneNumbers { get; set; }

        private static string callHistoryCellId = "CallHistoryCell";

        public CallHistoryController (IntPtr handle) : base (handle)
        {
            //注冊UITableViewCell類型並且標識符為callHistoryCallId指定的字符串
            TableView.RegisterClassForCellReuse(typeof(UITableViewCell), callHistoryCellId);

            //為TableView指定數據源
            TableView.DataSource = new CallHistoryDataSource(this);
            PhoneNumbers = new List<string>();
        }

        private class CallHistoryDataSource : UITableViewDataSource
        {
            private CallHistoryController mController;

            public CallHistoryDataSource(CallHistoryController controller)
            {
                mController = controller;
            }

            public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
            {
                //根據標識符獲取表格項
                var cell = tableView.DequeueReusableCell(CallHistoryController.callHistoryCellId);
                int row = indexPath.Row;
                //設置表格項顯示的文字
                cell.TextLabel.Text = mController.PhoneNumbers[row];
                return cell;
            }

            public override nint RowsInSection(UITableView tableView, nint section)
            {
                //返回數據總數
                return this.mController.PhoneNumbers.Count;
            }
        }
    }

 

 

完成了CallHistoryController之后，我們回到故事板中按下Ctrl和左擊從Call History按鈕中拖拽中藍色線條，放到CallHistoryController中。並在彈出的下拉中選擇第一個，這樣當我們點擊按鈕的時候就會實現跳轉到那個指定的視圖控制器了，下面我們還要修改RootViewController中的代碼，以便在撥打的時候記錄電話號碼，並且在顯示CallHistoryController前將記錄賦值給PhoneNumbers中。

 

我們先定義一個保存電話的數組，並在構造函數中初始化：

        public List<String> PhoneNumbers { get; set; }

        public RootViewController(IntPtr handle)
            : base(handle)
        {
            PhoneNumbers = new List<string>();
        }

 

 

然后在CallButton的TouchUpInside事件中的開頭部分增加下面這段代碼：

PhoneNumbers.Add(translatedNumber);

 

 

最后最關鍵的部分就是在CallHistoryController打開的之前將記錄傳遞過去，那么我們就需要重寫PrepareForSegue方法：

        public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
        {
            base.PrepareForSegue(segue, sender);
            var callHistoryController = segue.DestinationViewController as CallHistoryController;
            if(callHistoryController != null)
            {
                callHistoryController.PhoneNumbers = PhoneNumbers;
            }
        }

 

這里我們通過segue的DestinationViewController訪問將要打開的視圖控制器，並且嘗試強制轉換成CallHistoryController類型，如果是該類型則將記錄的數據賦值過去，這樣我們就完成了，下面我們可以看到最終的效果圖：

 

點擊Call History之后

 

當然除了可以直接指定按鈕打開的視圖控制器外，還可以通過代碼的方式去指定打開燈視圖控制器，前提是我們需要給這些視圖控制器設置Storyboard ID，所以我們需要先設置CallHistoryController的屬性中的Storyboard ID為“CallHistoryController”，然后注釋掉PrepareForSegue方法的代碼，並且刪掉我們在故事板中為Call History設置的跳轉，在ViewDidLoad中新增CallHistoryButton的監聽事件，如下所示：

            CallHistoryButton.TouchUpInside += (e, s) =>
            {
                CallHistoryController callHistory = Storyboard.InstantiateViewController("CallHistoryController") as CallHistoryController;
                if(callHistory != null)
                {
                    callHistory.PhoneNumbers = PhoneNumbers;
                    NavigationController.PushViewController(callHistory, true);
                }
            };

這里我們通過Storyboard的InstantiateViewController實例化指定的Storyboard ID的視圖控制器，並且轉換為對應的類型，如果不為null則將數據傳遞過去，並且通過NavigationController的PushViewContoller呈現這個視圖控制器。到此為止我們的開頭兩篇入門就結束了。