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

SIN@SAPPOROWORKSの覚書

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

Xamarin.iOS アクティビティインジケータ

【 Xamarin 記事一覧 】


1 アクティビティインジケータ UIActivityIndicatorView

f:id:furuya02:20140614064026p:plain:w150:left
アクティビティインジケータを表示したい場合は、UIActivityIndicatorViewのインスタンスを生成し、表示したいビューに追加します。
その後、StartAnimating()で表示開始、StopAnimating()で表示停止となります。

アクティビティインジケータのスタイルには、次の3種類があります。
・UIActivityIndicatorViewStyle.Gray
・UIActivityIndicatorViewStyle.White
・UIActivityIndicatorViewStyle.WhiteLarge


下記のサンプルは、Startボタンで表示を開始し、Stopボタンで表示を停止してます。

//アクティビティインジケータのインスタンス
readonly UIActivityIndicatorView _indicator = new UIActivityIndicatorView();

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

   buttonStart.TouchUpInside += (sender, args) => Start();
   buttonStop.TouchUpInside += (sender, args) => Stop();
}

//表示開始
void Start() {
    //ビューの中央に表示
    _indicator.Center = View.Center;
    //スタイル指定
    _indicator.ActivityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray;
    // ビューに追加
    View.AddSubview(_indicator);
    // アニメーション開始
    _indicator.StartAnimating();
}

//表示終了
void Stop() {
    //アニメーション終了
    _indicator.StopAnimating();
}

2 Loading...を表示するオーバーレイビュー

f:id:furuya02:20140614064027p:plain:w150:left
Xamarinの開発者ページにあるドキュメントを参考にして、「Loading...」と表示される、オーバーレイビューのサンプルを作成してみました。
http://developer.xamarin.com/Recipes/iOS/Standard_Controls/Popovers/Display_a_Loading_Message/
上記サンプルの簡略化版です。

//Loding...を表示するビュー
public class LoadingView : UIView {
    public LoadingView(RectangleF frame)
        : base(frame) {

        //オーバーレイウインドウ
        BackgroundColor = UIColor.Black;
        Alpha = 0.75f;//透明度

        //アクティビティインジケータの生成
        var indicator = new UIActivityIndicatorView(UIActivityIndicatorViewStyle.WhiteLarge);
        //中央より少し上に表示
        indicator.Center = new PointF(Frame.Width / 2, Frame.Height / 2 -20);
        //ビューに追加
        Add(indicator);
        //アニメーション開始
        indicator.StartAnimating();

        //ラベルの生成
        var label = new UILabel(new RectangleF(0,0, 100, 30)){
            Text = "Loading ...",
            TextColor = UIColor.White,//ラベルの色
            Center = new PointF(Frame.Width / 2, Frame.Height / 2 + 30),//中央より少し下に表示
            TextAlignment = UITextAlignment.Center//文字位置
        };
        //ビューに追加
        Add(label);
    }

    public void Hide() {
        Animate(0.5, () => {Alpha = 0;},RemoveFromSuperview);
    }
};

使い方は、次のようになります。

public override void ViewDidLoad() {
    base.ViewDidLoad();
    buttonStart.TouchUpInside += async (sender, args) => {
        var loadingView = new LoadingView(UIScreen.MainScreen.Bounds);
        View.Add(loadingView);//表示開始
        await Task.Run(() => Thread.Sleep(2000)); //2秒の遅延
        loadingView.Hide();//表示終了
    };
}

【 Xamarin 記事一覧 】