ライブラリ
Swift
SkeletonView

「SkeletonView」アプリのローディング表示

SkeletonView

YouTube、Facebook、Tinderなどのアプリで見かけるローディング表示。

IMG_08401419C89C-1.jpeg

UIActivityIndicatorViewを利用していません。

SkeletonViewを使用すると読み込んだ先にどういうものが表示されるのかが、ユーザーに分かりやすく伝えることが出来ます。

導入方法

SkeletonView

CocoaPodsとCarthageが用意されています。

CocoaPods

$ pod init

Podfileに以下を記載。

pod "SkeletonView"

インストールします。

$ pod install

Carthage

1.Cartfileを作成

$ touch Cartfile

2.Cartfileを編集

$ vim Cartfile

3.Cartfileに記載

github "Juanpe/SkeletonView"

4.ライブラリをビルド

少し時間が掛かります

$ carthage update --platform iOS

5.Linked Frameworks and Librariesに追加

Linked Frameworks and LibrariesにSkeletonView.frameworkを追加します

6.RunScriptに記載

/usr/local/bin/carthage copy-frameworks

Import Filesに記載

$(SRCROOT)/Carthage/Build/iOS/SkeletonView.framework

実装方法

import UIKit
import SkeletonView

class ViewController: UIViewController {

    @IBOutlet var label: UILabel!
    @IBOutlet var ImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // ローディング表示したい子ビューにtrueを設定する
        label.isSkeletonable = true
        ImageView.isSkeletonable = true

        // 親ビューに指定するだけで反映されます
        view.showAnimatedGradientSkeleton()
    }
}

image.png

ローディングを止めるタイミングで.hideSkeleton()を指定することでAPIから取得した文字列等を表示することが出来ます。

view.hideSkeleton()

アニメーション

ローディング表示中のアニメーションは4つ用意されています。

view.showSkeleton()                 // Solid
view.showGradientSkeleton()         // Gradient
view.showAnimatedSkeleton()         // Solid animated
view.showAnimatedGradientSkeleton() // Gradient animated

UITableView

SkeletonTableViewDataSourceというUITableViewDataSourceを継承したものが用意されています。

UITableViewでローディング表示を行うことも可能ですのでぜひこちらをチェックしてみて下さい