非同期通信後に、結果を受けて画面更新をする手法

Question

開発に行き詰っている部分がありまして、初めて質問させていただきます。よろしくお願いいたします。

イメージとしては以下のgifの「お知らせ」画面のように、通信結果を受けて結果を表示する画面を作りたいと考えています。

引用元：iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ

通信完了後にあたる画面はStoryboardで作成済みなのですが、ローディング中の画面（白背景＋UIActivityIndicatorView）をどのように実装すれば良いかわかりません。

といいますのも、UIActivityIndicatorViewを画面中央に配置しても、ローディング中は空のtableViewが背後に表示されるためです（ローディング完了後にtableView.reloadData()は実行しています）

ローディング画面を実装のためにいろいろ考えましたが、、、

1. viewDidLoadで白背景viewをaddSubviewしておいて、ローディング完了後にremoveFromSuperviewを実行して取り除く？
2. そもそも白背景しかないviewを作って遷移し、ローディング完了後に実際に表示させたいviewを読み込んで、setNeedsDisplay()を呼び出す？
3. SVProgressHUDなどのライブラリで、背景付きのスピナーを回す

最後のライブラリを使う手法は最後の手段ですが、よくみかけるUIだけにみなさんがどのように実装しているかが気になっています。

こういう感じでやっているよ、と気軽に教えていただけるととてもうれしいです！

Answer 1

1が素直で良いように思います。

代替案として2つ

a. UIActivityIndicatorView を画面いっぱいに表示

• 実装方法
• UIActivityIndicatorView の backgroundColor を white 、且つ frame を画面いっぱいに設定
• ロードが完了した時点で UIActivityIndicatorView を stopAnimating() すれば

背景ごと勝手に非表示になります( hidden = true になる /下の view のタッチは拾うはず)

• メリット/デメリット
• ローディング画面を繰り返し使いたい場合に便利
• 画面いっぱいの UIActivityIndicatorView は storyboard や xib じゃ実装できなかったかも

// メンバ変数として宣言
let indicator = UIActivityIndicatorView()

// viewDidLoad とかで
indicator.backgroundColor = UIColor.whiteColor()
self.view.addSubview(indicator)

// viewDidLayoutSubviews() で
// iOS の問題でこれだけはレイアウト完了後じゃないとダメだった気がする
indicator.frame = self.view.frame

// ローディング開始時
indicator.startAnimating()

// ローディング完了時
indicator.stopAnimating()

b. tableView の footer をなくす

• 質問者さんのおっしゃる"空のtableView"というのが、もし要素を入れていないのにセパレーターだけ画面いっぱいにある状態のことだとしたら、そのセパレーターは以下の1行でなくせます。

tableView.tableFooterView = UIView(frame: CGRectZero)

• これで セパレーターのない tableView (何も設定していなければ真っ白な背景)になるはずです
• もしこれ以外の場合、空部分のセパレーターを表示させたいのであればこの方法は向いてませんね

なお、どちらのコードも動作確認はしていません。
はじめに書いたように、質問者さんの案が良いと思いますが、参考までに。

Comments

[rox]

ご回答ありがとうございます。
UIActivityIndicatorViewを画面いっぱいにする方法は目からウロコでした。そりゃそうだという話ですね。
試してみたいと思います！

Answer 2

1番で良いと思いますが、「viewDidLoadで白背景viewをaddSubview」しなくても、Storyboard上で、UIActivityIndicatorViewの間に白背景viewを追加しておいて、ローディング完了後に非表示(hidden)にすればいいんじゃないでしょうか？

似たケースとして、データが無いときに「データがありませんview」を表示するために、この方法で実装したことがあります。

Answer 3

１番の方法で良いと思います。

Comments

[rox]

ご回答ありがとうございます。後押ししていただけてうれしいです！