【Swift】データがない時に表示させるEmptyStateKitライブラリを使ってみる

kazy
今回は以前、使ってみたいライブラリでも紹介したSwiftライブラリであるEmptyStateKitを使ってみたいと思います。

EmptyStateKit以外のオススメライブラリについては、こちらに記載しています。

iOSアプリを個人開発するなら使ってみたいライブラリ15選

2019年7月19日

環境

まず実行した環境です。

  • Xcode 10.2
  • Swift 4.2
  • EmptyStateKit 1.0.7

ではさっそく準備していきます。

EmptyStateKitライブラリをインストール

https://github.com/alberdev/EmptyStateKit

EmptyStateKitはCocoaPodsに対応しているので、ドキュメントに記載の通り

以下をPodfileに追加。

pod installします。

あとはファイルにimport EmptyStateKitを指定して、使うだけですね。

注意
ちなみにpodでライブラリの導入が終わったら、.xcworkspaceが生成されるので、Xcodeでこちらのファイルを開き直さないとエラーができます。

EmptyStateKitを使ってみる

僕はめっきり英語ができないのでGoogle翻訳しながら進めます。

Complete empty states data

READMEに書いてある使い方をみてみますと

1.完全な空の状態データ
空の状態データを完成するには、EmptyStateDataSourceの実装を選択するか、image、title、description、およびtitleButtonの各パラメータを使用してカスタム列挙状態を拡張します。
ステートデータをView Controllerの外部に保存するには、2番目のオプションをお勧めします。

https://github.com/alberdev/EmptyStateKit

とありますね。

つまり

①EmptyStateDataSourceをこちらで実装するか、
②image、title、description、titleButtonを使用してカスタムEnumのExtensionを実装する

のどちらかが必要があるように読み取れます。

今回は、おすすめされている②を実装する方法でやってみます。

image、title、description、titleButtonを使用してカスタムEnumのExtensionを実装する

READMEにカスタムEnumのサンプルがあるので、それを使用します。

State.swiftを新規作成して以下を貼り付け。

Show or hide your empty state

テーブルビューまたはコレクションビューで空の状態を使用して、最新のコンテンツ機能を維持することができます。
このためには、テーブルまたはコレクションビューは空(0行)でなければなりません。
EmptyStateKitテーブルまたはコレクションのバックグラウンドビューを完成させ、separatorStyleを削除して空の状態を表示します。

https://github.com/alberdev/EmptyStateKit

TableViewやCollectionViewで使用する場合はセルが0でないといけないようです。

separatorStyleは.noneにしてくださいとのこと。

今回は、ViewControllerにそのまま表示させてみるので、これは無視します。

viewDidLoadに以下を追加して表示されるか確認します。

このように表示されました。

んー、位置が下すぎますし、ボタンの文言が省略されてしまっていますね。

Xcodeでビジュアルレイアウトを表示させてみましょう。

なるほど。画像が空なので下に表示されているように見えたわけですね。
ということは、レイアウトは合っているようです。問題なし。

また、ボタンの幅は以下の指定で変更が可能でした。

一旦次にいきます。

Handling button action with EmptyStateDelegate

EmptyStateDelegateボタンアクションを委任するためのプロトコルを
実装し
ます。
空の状態ビューにデリゲートを割り当てることを忘れないでください

https://github.com/alberdev/EmptyStateKit

ボタンのハンドリングはデリゲートを実装する必要があるようです。

ViewControllerに以下のデリゲートを実装します。

そして、viewDidLoadにはデリゲートの設定を忘れずに行います。

これでボタンをタップしたらEmptyViewは非表示になるようになります。

基本的な実装は以上です。

とてもシンプルで簡単ですね。

EmptyStateFormat

外観のカスタマイズの設定になります。

EmptyStateKitはEmptyStateFormatクラスで外観の設定をカスタマイズすることができます。

使用できるプロパティは以下です。

プロパティ名内容
titleAttributes[NSAttributedString.Key: Any]タイトルの属性
descriptionAttributes[NSAttributedString.Key: Any]説明文の属性
buttonAttributes[NSAttributedString.Key: Any]ボタンの属性
buttonColorUIcolorボタン背景色
buttonShadowRadius CGFloatボタン影の丸み
buttonRadiusCGFloatボタン角の丸み
buttonWidthCGFloatボタンの横幅
buttonTopMarginCGFloatボタンの上部マージン
coverImageBoolイメージを背景にするかどうか
animationEmptyStateAnimationイメージのアニメーション
実際には、タイトル、説明文も適用される
alphaCGFloatEmptyViewの透過度
backgroundColorUIColorEmpjtyViewの背景色
gradientColorsome(UIColor,UIcolor)EmptyViewの背景グラデーション
positionEmptyStatePositionEmptyViewに表示する
タイトル、イメージ、説明の位置
top,center,bottomで指定する
verticalMarginCGFloat垂直のマージン
horizontalMarginCGFloat水平のマージン
imageSizeCGSizeイメージのサイズ

EmptyStateAnimation

画像とイメージのアニメーションを指定できます。

使用できるアニメーションのタイプは以下です。

・fade

上記のように使用します。
fade()で2つ引数があるのは、1つ目がテキストのfadeアニメーション、2つ目がイメージのアニメーションとなります。

・Scale

fadeと同じように使用します。引数に関してもfadeと同様です。

EmptyStateViewPosition

EmptyStateView自体のポジションを指定できます。

EmptyStateTextPosition

タイトル、説明文のポジションを指定できます。

EmptyStateImagePosition

イメージのポジションを指定できます。

ちなみにImageのアスペクトの設定はAspect Fitになっているそうです。

少しカスタマイズする

ほんの少しだけformatやらアニメーションを設定して表示してみます。

こんな感じになりました。

画像はEmptyStateKitのExampleにあるサンプル画像をお借りしています。

感想

簡単に実装してみた感想はというと、とても簡単に実装することができて便利な印象を受けました。

カスタマイズ性も悪くないです。

とりあえず、かなり凝ったEmpty画面を作るわけではなければ、十分使えるライブラリだと思います。

しいていうと、アニメーションの種類が少ないことと、画像はデフォルトで用意してないので、自分のいい感じのものを設定する必要があります。

それでもこれを使用するだけで簡単にEmpty表示ができちゃうのは、非常に良い。

アプリでEmpty表示を検討されている方は、ぜひ使ってみてはいかがでしょうか?

https://github.com/alberdev/EmptyStateKit

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA