Posted at

Facebookアプリの記事ローディングに似たUIの実装

More than 1 year has passed since last update.

FacebookやSlackのアプリ等でみかける、ローディング中のアニメーションを実装してみました。

20161214164554.gif

コードはこちら: https://github.com/Matsue/shimmer-sample


よくある読込中のコンポーネント


  1. Progress Bar (プログレスバー)

    Screen Shot 2016-12-13 at 15.56.46.png


  2. Spinner (スピナー)

    Screen Shot 2016-12-13 at 15.57.29.png


  3. Skelton Screen (スケルトンスクリーン)

    Screen Shot 2016-12-13 at 15.58.56.png


上記の3つでいうと、作ったものはスケルトンスクリーンシマー効果を使った実装です。

エフェクトにはFacebook製のShimmerを使っています。

スケルトンスクリーンを使うと、UIActivityIndicatorViewによるスピナーよりも、次に表示されるコンテンツに近い状態を見せることができるので体感が良くなりそうです。

シマーのエフェクトがあるとローディングの状態であることが分かりやすくなりますね。


Shimmerの使い方

import Shimmer

...

// どこかでFBShimmeringViewを初期化

shimmeringView.isShimmering = true
shimmeringView.contentView = contentView // 好きなviewをcontentViewにセット