LoginSignup
35
21

More than 5 years have passed since last update.

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

Posted at

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にセット
35
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
21