読者です 読者をやめる 読者になる 読者になる

SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

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

【 Xamarin 記事一覧 】 【XamarinによるiOS超入門 】


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」が1ページ目です。
(最終ページを超える数値を現在ページに設定すると、最後のページになり、0以下を設定した場合0になります)

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

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

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

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


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
ここでは、スクロールビューと連携したコードを紹介します。

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

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)// 現在のページを基準に、縦1倍、横5倍
    };
            
    // スクロールビューの各ページの中央にページ数を表示する
    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;
}

5 参考にさせて頂いたページ


UIKit User Interface Catalog: Page Controls
iOS 7 から始める UIKit 入門 コントロール編 #4 Page Control | Developers.IO
iOSヒューマンインターフェイスガイドライン: コントロール部品



【 Xamarin 記事一覧 】 【XamarinによるiOS超入門 】