Xamarin.iOS スクロールビュー・ページコントロール

【 Xamarin 記事一覧 】

1 スクロールビュー UIScrollView

UIScrollViewを使用すると、スクロールするビューを作成することができます。これにより、画面に入りきらない大きな画像を表示したり、書籍のようにページ送りを表現できます。

UIScrollViewは、コンストラクタで１ページ分のサイズによって初期化し、ContentSizeで実際のサイズを指定しています。サンプルでは、縦幅が１ページ分で、横幅が５ページ分なので、横スクロールします。

指定できる主要なプロパティは下記のとおりです

PagingEnabled ページ単位のスクロール
UserInteractionEnabled　スクロールの有効無効
IndicatorStyle スクロールバーの種類
ContentOffset 初期位置
MinimumZoomScale ピンチインで縮小したときの最小倍率
MaximumZoomScale ピンチアウトで拡大したときの最大倍率

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

    //ビューの縦横のサイズ
    var w = View.Bounds.Width;
    var h = View.Bounds.Height;

    const int pageSize = 5; //ページ数
    //スクロールビューの生成（ページ分のサイズで初期化する）
    var scrollView = new UIScrollView(View.Bounds);
    //スクロールビューの背景色
    scrollView.BackgroundColor = UIColor.White;
    //ページ単位でスクロールさせるかどうか
    scrollView.PagingEnabled = true;
    //スクロールの有効無効
    scrollView.UserInteractionEnabled = true;
    // スクロールの範囲を設定(現在のページを基準に、縦１倍、横５倍)
    scrollView.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, //ラベルの中央に文字列を表示
            Font = UIFont.FromName("Helvetica-Bold", 20f) //フォントの指定
        };
        scrollView.Add(label); //スクロールビューに追加する
    }
    //スクロールビューを追加する
    View.Add(scrollView);
}

2 ページコントロール PageControl

UIPageControlで、現在のページを表示できます。
図は、ページビューを先に作成したスクロールビューに連動させた例です。

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

    //ビューの縦横のサイズ
    var w = View.Bounds.Width;
    var h = View.Bounds.Height;

    // ページコントロールのインスタンス化(画面の中央で下から80の位置に初期化)
    var pageControl = new UIPageControl(new RectangleF((w-300)/2,h-80, 300, 50));

    //背景色
    pageControl.BackgroundColor = UIColor.Black;
    //ページ表示の色
    pageControl.CurrentPageIndicatorTintColor = UIColor.Red;
     
    // ページ数を設定
    pageControl.Pages = pageSize;
    // 現在のページを設定
    pageControl.CurrentPage = 0;

    // ページコントロールを追加する
    Add(pageControl);
          
}

ページコントロールをタップしてページを変更した場合に、それをスクロールビューに反映させると次のようになります。

    // ページ変化のイベントを処理
    pageControl.UserInteractionEnabled = true;
    pageControl.ValueChanged += (sender, args) =>{
                
        //変化後のページ
        // ラムダで処理しない場合は、senderから取得できる
        //var page = ((UIPageControl) sender).CurrentPage;
        var page = pageControl.CurrentPage;
        //スクロールビューのオフセットを修正する
        scrollView.ContentOffset = new PointF(w*page,0);
    };

また、逆に、スワイプでスクロールビューを変化させた時、ページビューに反映するには次のようになります。

    //スクロール終了時のイベント
    scrollView.DecelerationEnded+= (sender, args) => {
        var page = (int)(((UIScrollView) sender).ContentOffset.X/w);
        pageControl.CurrentPage = page;
    };

※サンプルプロジェクトは、「ファイル」-「新規作成」ｰ「新しいプロジェクト」ｰ「テンプレート」
「Vieual C#」- 「iOS」-「iPhone Storybord」-「Single View Application」から作成されています。

【 Xamarin 記事一覧 】