【XamarinによるiOS超入門】ページコントロール ( UIPageControl )

1 コントロールの配置

f:id:furuya02:20150130145728p:plain:w150:left

ページコントロール(UIPageControl)は、複数ページの中で現在位置を表現するコントロールです。コントロールをタップしてページを移動させる実装も可能です。

f:id:furuya02:20150130150006p:plain:right

ページコントロールはサイズが固定なので、画面に表示できるドット数（ページ数）には限界があります。（iPhone5を縦にした場合、20ページが限界でした）

このコントロールを配置する基本的なコードは次のとおりです。

View.Boundsで画面のサイズを取得し、画面の一番下に高さ50で配置しました。
また、白バックだとデフォルトのドットが見えないので、見やすいようにバックを黒色にしました。

 public override void ViewDidLoad() {
    base.ViewDidLoad();

    //ページ数
    const int pageSize=5;
    //ページコントロールのサイズ（高さ）
    const int height = 50; 

    // ページコントロールの生成 
    var pageControl = new UIPageControl{
        Frame = new RectangleF(0, (float)View.Bounds.Height - height, (float)View.Bounds.Width, height),//画面の一番下に高さでheightで表示する
        BackgroundColor = UIColor.Black,//デフォルトのインジケータの色が見えやすいように背景色を黒にする
        Pages = pageSize,
    };
     //ビューに追加
    Add(pageControl);
}

2 総ページ数・現在のページ

ページの総数は、Pagesプロパティで指定します。また、現在のページはCurrentPageプロパティに設定します。なお、CurrentPageは、「0」が１ページ目です。
（最終ページを超える数値を現在ページに設定すると、最後のページになり、0以下を設定した場合0になります）

pageControl.Pages = 10;//全部で１０ページ
pageControl.CurrentPage = 3;//現在のページは4ページ

ストーリーボードを使用している場合は、「# of Pages」及び「Current」を使用します。
f:id:furuya02:20150130160023p:plain

ページ総数が1ページの場合に、デフォルトでは１ドットが表示されますが、HidesForSinglePageでこれを非表示にできます。

pageControl.HidesForSinglePage = false;//ページ数が１ページの場合、非表示とする

DefersCurrentPageDisplayをtrueにすると、UpdateCurrentPageDisplayメソッドを呼び出すまで、コントロールの表示更新を遅延させることができます。
これは、ページ更新の処理が重い場合などに、コントロールの表示をマッチさせるために使用されます。

動作は、概ね次のとおりです。

(1)ユーザーによるコントロールのタッチ
(2)ValueChangedイベントの発生
(3)UpdateCurrentPageDisplayの呼び出し
(4)ページコントロールの表示更新

デフォルト（DefersCurrentPageDisplay=false）では、(3)を実行しなくても(4)まで処理が進みますが、DefersCurrentPageDisplay=trueの場合は、(3)を実行しない限り(4)は処理されません。

pageControl.DefersCurrentPageDisplay = true;//更新の遅延
//ページコントロールが変化した時のイベント
pageControl.ValueChanged += (s, a) => {

    //ページ更新の処理
    //・・・・

    pageControl.UpdateCurrentPageDisplay();//(3)ページコントロールの表示更新
};

ストーリーボードを使用している場合は、下記のチェックを使用します。
f:id:furuya02:20150130160043p:plain

3 外観（色合い）

ドットの色は、デフォルトでは、現在ページ白、その他はグレーの半透明になっていますが、これは変更が可能です。
f:id:furuya02:20150131065306p:plain

pageControl.CurrentPageIndicatorTintColor = UIColor.Yellow;//現在ページ
pageControl.PageIndicatorTintColor = UIColor.Red;//その他のページ

f:id:furuya02:20150131065753p:plain

4 イベント

ページコントロールのタップで実際にページを変化させるためには、そのイベントを処理しなければなりません。また、ページ自体がスライド等で変更された場合、そのイベントでページコントロールの表示を更新する必要があります。

f:id:furuya02:20150130151531p:plain:w150:left
ここでは、スクロールビューと連携したコードを紹介します。

ここでのスクロールビューは、横に５ページとなっています。
ページコントロールをタッブしても、スクロールビューをスライドしても、どちらでもページが変更されます。

public override void ViewDidLoad() {
    base.ViewDidLoad();

    //ページ数
    const int pageSize = 5;

    //スクロールビューの生成
    var scrollView = CreateScrollView(pageSize);
    Add(scrollView);//スクロールビューの追加

    // ページコントロールの生成 
    var pageControl = new UIPageControl{
        Frame = new RectangleF(0, (float)View.Bounds.Height - 50, (float)View.Bounds.Width, 50),//画面の一番下に高さで50で表示する
        BackgroundColor = UIColor.Black,//デフォルトのインジケータの色が見えやすいように背景色を黒にする
        Pages = pageSize,
    };
    Add(pageControl);//ページコントロールの追加


    //ページコントロールが変化した時のイベント
    pageControl.ValueChanged += (s, a) => {
        var page = pageControl.CurrentPage;//変化後のページ
        //スクロールビューのオフセットを変更する
        scrollView.ContentOffset = new PointF((float)View.Bounds.Width * page, 0);//スクロールビューに反映させる
    };
    //スクロールビューが変化した時のイベント
    scrollView.DecelerationEnded += (s, a) => {
        var page = scrollView.ContentOffset.X / View.Bounds.Width;//変化後のページ
        pageControl.CurrentPage = (nint)page;//ページコントロールに反映させる
    };
}

//スクロールビューの生成
UIScrollView CreateScrollView(int pageSize) {
    //ビューの縦横のサイズ
    var w = (float)View.Bounds.Width;
    var h = (float)View.Bounds.Height;

    //スクロールビューの生成
    var scrollView = new UIScrollView(View.Bounds) {
         PagingEnabled = true,//ページ単位のスクロール
         ContentSize = new SizeF(w * pageSize, h)// 現在のページを基準に、縦１倍、横５倍
    };
            
    // スクロールビューの各ページの中央にページ数を表示する
    for (var i = 0; i < pageSize; i++) {
        var label = new UILabel(new RectangleF(0, 0, 100, 30)) {
            Text = "PAGE" + i, 
            Center = new PointF(w / 2 + w * i, h / 2), 
            TextAlignment = UITextAlignment.Center, 
        };
        scrollView.Add(label); //スクロールビューに追加
    }
    return scrollView;
}