EmptyStateKit以外のオススメライブラリについては、こちらに記載しています。
目次
- 1 環境
- 2 EmptyStateKitライブラリをインストール
- 3 EmptyStateKitを使ってみる
- 3.1 Complete empty states data
- 3.2 image、title、description、titleButtonを使用してカスタムEnumのExtensionを実装する
- 3.3 Show or hide your empty state
- 3.4 Handling button action with EmptyStateDelegate
- 3.5 EmptyStateFormat
- 3.6 EmptyStateAnimation
- 3.7 EmptyStateViewPosition
- 3.8 EmptyStateTextPosition
- 3.9 EmptyStateImagePosition
- 4 少しカスタマイズする
- 5 感想
環境
まず実行した環境です。
- Xcode 10.2
- Swift 4.2
- EmptyStateKit 1.0.7
ではさっそく準備していきます。
EmptyStateKitライブラリをインストール
https://github.com/alberdev/EmptyStateKit
EmptyStateKitはCocoaPodsに対応しているので、ドキュメントに記載の通り
以下をPodfileに追加。
|
1 |
pod 'EmptyStateKit' |
pod installします。
|
1 |
$ pod install |
あとはファイルにimport EmptyStateKitを指定して、使うだけですね。
EmptyStateKitを使ってみる
僕はめっきり英語ができないのでGoogle翻訳しながら進めます。
Complete empty states data
READMEに書いてある使い方をみてみますと
1.完全な空の状態データ
https://github.com/alberdev/EmptyStateKit
空の状態データを完成するには、EmptyStateDataSourceの実装を選択するか、image、title、description、およびtitleButtonの各パラメータを使用してカスタム列挙状態を拡張します。
ステートデータをView Controllerの外部に保存するには、2番目のオプションをお勧めします。
とありますね。
つまり
①EmptyStateDataSourceをこちらで実装するか、
②image、title、description、titleButtonを使用してカスタムEnumのExtensionを実装する
のどちらかが必要があるように読み取れます。
今回は、おすすめされている②を実装する方法でやってみます。
image、title、description、titleButtonを使用してカスタムEnumのExtensionを実装する
READMEにカスタムEnumのサンプルがあるので、それを使用します。
State.swiftを新規作成して以下を貼り付け。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
enum State: CustomState { case noNotifications case noSearch case noInternet var image: UIImage? { switch self { case .noNotifications: return UIImage(named: "Messages") case .noSearch: return UIImage(named: "Search") case .noInternet: return UIImage(named: "Internet") } } var title: String? { switch self { case .noNotifications: return "No message notifications" case .noSearch: return "No results" case .noInternet: return "We’re Sorry" } } var description: String? { switch self { case .noNotifications: return "Sorry, you don't have any message. Please come back later!" case .noSearch: return "Please try another search item" case .noInternet: return "Our staff is still working on the issue for better experience" } } var titleButton: String? { switch self { case .noNotifications: return "Search again?" case .noSearch: return "Go back" case .noInternet: return "Try again?" } } } |
Show or hide your empty state
テーブルビューまたはコレクションビューで空の状態を使用して、最新のコンテンツ機能を維持することができます。
https://github.com/alberdev/EmptyStateKit
このためには、テーブルまたはコレクションビューは空（0行）でなければなりません。EmptyStateKitテーブルまたはコレクションのバックグラウンドビューを完成させ、separatorStyleを削除して空の状態を表示します。
TableViewやCollectionViewで使用する場合はセルが0でないといけないようです。
separatorStyleは.noneにしてくださいとのこと。
今回は、ViewControllerにそのまま表示させてみるので、これは無視します。
viewDidLoadに以下を追加して表示されるか確認します。
|
1 |
view.emptyState.show(State.noInternet) |
このように表示されました。
んー、位置が下すぎますし、ボタンの文言が省略されてしまっていますね。
Xcodeでビジュアルレイアウトを表示させてみましょう。
なるほど。画像が空なので下に表示されているように見えたわけですね。
ということは、レイアウトは合っているようです。問題なし。
また、ボタンの幅は以下の指定で変更が可能でした。
|
1 |
view.emptyState.format.buttonWidth = 100.0 |
一旦次にいきます。
https://github.com/alberdev/EmptyStateKit
EmptyStateDelegateボタンアクションを委任するためのプロトコルを
実装し
ます。
空の状態ビューにデリゲートを割り当てることを忘れないでください
ボタンのハンドリングはデリゲートを実装する必要があるようです。
ViewControllerに以下のデリゲートを実装します。
|
1 2 3 4 5 6 |
extension ViewController: EmptyStateDelegate { func emptyState(emptyState: EmptyState, didPressButton button: UIButton) { view.emptyState.hide() } } |
そして、viewDidLoadにはデリゲートの設定を忘れずに行います。
|
1 |
view.emptyState.delegate = self |
これでボタンをタップしたらEmptyViewは非表示になるようになります。
基本的な実装は以上です。
とてもシンプルで簡単ですね。
EmptyStateFormat
外観のカスタマイズの設定になります。
EmptyStateKitはEmptyStateFormatクラスで外観の設定をカスタマイズすることができます。
使用できるプロパティは以下です。
| プロパティ名 | 型 | 内容 |
| titleAttributes | [NSAttributedString.Key: Any] | タイトルの属性 |
| descriptionAttributes | [NSAttributedString.Key: Any] | 説明文の属性 |
| buttonAttributes | [NSAttributedString.Key: Any] | ボタンの属性 |
| buttonColor | UIcolor | ボタン背景色 |
| buttonShadowRadius | CGFloat | ボタン影の丸み |
| buttonRadius | CGFloat | ボタン角の丸み |
| buttonWidth | CGFloat | ボタンの横幅 |
| buttonTopMargin | CGFloat | ボタンの上部マージン |
| coverImage | Bool | イメージを背景にするかどうか |
| animation | EmptyStateAnimation | イメージのアニメーション 実際には、タイトル、説明文も適用される |
| alpha | CGFloat | EmptyViewの透過度 |
| backgroundColor | UIColor | EmpjtyViewの背景色 |
| gradientColor | some(UIColor,UIcolor) | EmptyViewの背景グラデーション |
| position | EmptyStatePosition | EmptyViewに表示する タイトル、イメージ、説明の位置 top,center,bottomで指定する |
| verticalMargin | CGFloat | 垂直のマージン |
| horizontalMargin | CGFloat | 水平のマージン |
| imageSize | CGSize | イメージのサイズ |
EmptyStateAnimation
画像とイメージのアニメーションを指定できます。
使用できるアニメーションのタイプは以下です。
・fade
|
1 |
format.animation = EmptyStateAnimation.fade(0.2, 2.0) |
上記のように使用します。
fade()で2つ引数があるのは、1つ目がテキストのfadeアニメーション、2つ目がイメージのアニメーションとなります。
・Scale
|
1 |
format.animation = EmptyStateAnimation.scale(0.3, 0.3) |
fadeと同じように使用します。引数に関してもfadeと同様です。
EmptyStateViewPosition
EmptyStateView自体のポジションを指定できます。
|
1 2 3 4 5 |
public enum EmptyStateViewPosition { case top case center case bottom } |
EmptyStateTextPosition
タイトル、説明文のポジションを指定できます。
|
1 2 3 4 5 |
public enum EmptyStateTextPosition { case left case center case right } |
EmptyStateImagePosition
イメージのポジションを指定できます。
ちなみにImageのアスペクトの設定はAspect Fitになっているそうです。
|
1 2 3 4 5 |
public enum EmptyStateImagePosition { case top case bottom case cover(MarginTop?, MarginBottom?) } |
少しカスタマイズする
ほんの少しだけformatやらアニメーションを設定して表示してみます。
|
1 2 3 4 5 6 7 8 9 |
var format = EmptyStateFormat() format.buttonWidth = 200.0 format.gradientColor = .init((.red, .blue)) format.titleAttributes = [.foregroundColor: UIColor.white] format.descriptionAttributes = [.foregroundColor: UIColor.white] format.animation = EmptyStateAnimation.scale(0.2, 2.0) view.emptyState.format = format view.emptyState.show(State.noProfile) |
こんな感じになりました。
画像はEmptyStateKitのExampleにあるサンプル画像をお借りしています。
感想
簡単に実装してみた感想はというと、とても簡単に実装することができて便利な印象を受けました。
カスタマイズ性も悪くないです。
とりあえず、かなり凝ったEmpty画面を作るわけではなければ、十分使えるライブラリだと思います。
しいていうと、アニメーションの種類が少ないことと、画像はデフォルトで用意してないので、自分のいい感じのものを設定する必要があります。
それでもこれを使用するだけで簡単にEmpty表示ができちゃうのは、非常に良い。
アプリでEmpty表示を検討されている方は、ぜひ使ってみてはいかがでしょうか?
https://github.com/alberdev/EmptyStateKit
