Xamarin iOS教程之頁面控制元件

大學霸發表於2015-06-23
iOS控制元件

Xamarin iOS教程之頁面控制元件

Xamarin iOS 頁面控制元件

在iPhone手機的主介面中，經常會看到一排小白點，那就是頁面控制元件，如圖2.44所示。它是由小白點和滾動檢視組成，可以用來控制翻頁。在滾動滾動檢視時可通過頁面控制元件中的小白點來觀察當前頁面的位置，也可通過點選頁面控制元件中的小白點來滾動到指定的頁面。


圖2.44  頁面控制元件

在此圖中，小白點對應的當前頁被高亮顯示。此控制元件指示內容分為兩個頁面。

【示例2-26】以下將使用頁面檢視來控制影像的顯示。具體步驟如下：

（1）建立一個Single View Application型別的工程，命名為2-11。

（2）新增影像1.jpg、2.jpg、3.jpg到建立工程的Resources資料夾中。

（3）開啟2-11ViewController.cs檔案，編寫程式碼，實現在使用滾動檢視來控制元件影像的顯示。程式碼如下：

  • using System;

  • using System.Drawing;

  • using MonoTouch.Foundation;

  • using MonoTouch.UIKit;

  • namespace Application

  • {

  •          public partial class __11ViewController : UIViewController

  •          {

  •                    UIImageView page1;

  •                    UIImageView page2;

  •                    UIImageView page3;

  •                    UIScrollView scrollView;

  •                    UIPageControl pageControl;

  •               ……                                                                  //這裡省略了檢視控制器的構造方法和析構方法

  •                    #region View lifecycle

  •                    public override void ViewDidLoad ()

  •                    {

  •                             base.ViewDidLoad ();

  •                            

  •                             // Perform any additional setup after loading the view, typically from a nib.

  •               //新增滾動檢視物件scrollView

  •                             scrollView = new UIScrollView ();

  •                             scrollView.Frame = new RectangleF (0, 0, 320, 495);

  •                             //滾動檢視結束滾動時所呼叫的方法

  •                             scrollView.DecelerationEnded += this.scrollView_DecelerationEnded;

  •               //新增頁面

  •                             pageControl = new UIPageControl ();

  •                             pageControl.Frame = new RectangleF (0, 540, 320, 37);

  •                             pageControl.Pages = 3;                                        //設定頁面控制元件的頁數，即小白點

  •                             //當頁面控制元件的數值發生改變時呼叫

  •                             pageControl.ValueChanged += this.pageControl_ValueChanged;

  •               //滾動檢視的滾動事件

  •                             scrollView.Scrolled += delegate {

  •                                      Console.WriteLine ("Scrolled!");

  •                             } ;

  •                             scrollView.PagingEnabled = true;

  •                             RectangleF pageFrame = scrollView.Frame;

  •                             scrollView.ContentSize = new SizeF (pageFrame.Width * 3, pageFrame.Height);

  •               //新增影像檢視物件page1

  •                             page1 = new UIImageView (pageFrame);

  •                             page1.ContentMode = UIViewContentMode.ScaleAspectFit;

  •                             page1.Image = UIImage.FromFile ("1.jpg");

  •                             pageFrame.X += this.scrollView.Frame.Width;

  •                             //新增影像檢視物件page2

  •                             page2 = new UIImageView (pageFrame);

  •                             page2.ContentMode = UIViewContentMode.ScaleAspectFit;

  •                             page2.Image = UIImage.FromFile ("2.jpg");

  •                             pageFrame.X += this.scrollView.Frame.Width;

  •                             //新增影像檢視物件page3

  •                             page3 = new UIImageView (pageFrame);

  •                             page3.ContentMode = UIViewContentMode.ScaleAspectFit;

  •                             page3.Image = UIImage.FromFile ("3.jpg");

  •                             scrollView.AddSubview (page1);

  •                             scrollView.AddSubview (page2);

  •                             scrollView.AddSubview (page3);

  •                             this.View.AddSubview (scrollView);

  •                             this.View.AddSubview (pageControl);

  •                    }

  •                   

  •                    private void scrollView_DecelerationEnded (object sender, EventArgs e)

  •                    {

  •                             float x1 = this.page1.Frame.X;                    //獲取影像檢視物件page1的x位置

  •                             float x2 = this.page2.Frame.X;                    //獲取影像檢視物件page2的x位置

  •                             float x = this.scrollView.ContentOffset.X;  //獲取滾動檢視物件scrollView目前滾動的x位置

  •                             //判斷x是否和x1相等

  •                             if (x == x1)

  •                             {

  •                                      this.pageControl.CurrentPage = 0;                   //設定頁面控制元件當前的頁

  •                             } else if (x == x2)                                                               //判斷x是否和x2相等

  •                             {

  •                                      this.pageControl.CurrentPage = 1;

  •                             } else

  •                             {

  •                                      this.pageControl.CurrentPage = 2;

  •                             }

  •                    }

  •                   

  •                    private void pageControl_ValueChanged (object sender, EventArgs e)

  •                    {

  •                             PointF contentOffset = this.scrollView.ContentOffset;

  •               //使用switch語句判斷當前的頁數

  •                             switch (this.pageControl.CurrentPage)

  •                             {

  •                             case 0:

  •                                      contentOffset.X = this.page1.Frame.X;

  •                                      this.scrollView.SetContentOffset (contentOffset, true);  //設定滾動檢視目前滾動的位置

  •                                      break;

  •                             case 1:

  •                                      contentOffset.X = this.page2.Frame.X;

  •                                      this.scrollView.SetContentOffset (contentOffset, true);

  •                                      break;

  •                             case 2:

  •                                      contentOffset.X = this.page3.Frame.X;

  •                                      this.scrollView.SetContentOffset (contentOffset, true);

  •                                      break;

  •                             default:

  •                                      break;

  •                             }

  •                    }

  • ……                                                            //這裡省略了檢視載入和解除安裝前後的一些方法

  •                    #endregion

  •          }

  • }

執行效果如圖2.45所示。


圖2.45  執行效果

在頁面控制元件中，需要開發者需要注意以下2個問題：

1.頁面控制元件的屬性設定

頁面控制元件屬性設定並不多，一般就是設定頁數以及當前頁。設定頁面控制元件的頁數，需要使用Pages屬性，其語法形式如下：

  • 頁面控制元件物件.Pages=頁數;

其中，頁數是一個整型資料。設定頁面控制元件的當前頁，需要使用CurrentPage屬性，其語法形式如下：

  • 頁面控制元件物件.CurrentPage=當前頁;

其中，當前頁是一個整型資料。

2.頁面控制元件的響應

頁面控制元件的響應需要使用ValueChanged事件實現。示例2-26中的程式碼如下：

  • pageControl.ValueChanged += this.pageControl_ValueChanged;

本文選自：Xamarin iOS開發實戰大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29597077/viewspace-1708766/，如需轉載，請註明出處，否則將追究法律責任。

相關文章