JavaScriptプログラマがSwift iOSアプリを2週間で作って公開してみた〜その13 Toast message & Loading modal〜


JavaScriptプログラマー(JSer)がSwiftデビューして、ただ作りたいアプリを作ってみたシリーズ第13回目です。

前回はNavigationやUITabBarItemのテーマカラーとかの設定など、見た目のカスタマイズについてでした。今回はユーザーが何かアクションを起こした後に表示するトーストのポップアップとかローディングマークについてです。


TwitStockerの中で使っているトーストとかトースターとか呼ばれるふわっと画面に表示されて消えるタイプの通知とローディングマークの表示に関しては外部ライブラリを使用しています。

Toast-Swift
https://github.com/Rannie/Toast-Swift

上記のライブラリ見た目はあまりiOS的ではなくAndroid的なのですが、、今回は生産性重視で作ったアプリなのでそこはあまり気にせず。。使い方など紹介します。

まずは、ライブラリをインポートします。上記のgithub上のソースコードのToastディレクトリ上にあるHRToast+UIView.swiftを自分のプロジェクトはいかにコピーします。(例えば、{project_dir}/lib/HRToast+UIView.swift)

セットアップはそれだけです。UIViewをextendして実装しているため、self.viewで関連メソッドを呼び出せます。

Toast Message

例えば、TwitStockerの中でテーブルセルを左スワイプして既読にするアクションがあるのですが、そのようなアクションをした後に「XXしました」という通知をユーザーにしたい時にToastメッセージを使おうと思いました。当初はいわゆるAlertで表示していたのですが、Alertタイプの通知だとその通知を閉じるのに閉じるボタンをタップする必要があるので、既読にするアクションを行うたびにその1ステップが発生するのはユーザーにとっては辛いと思って、ふわっと出てふわっと消える通知にしました。

トースターのイメージ
iOS Simulator Screen Shot 2015.02.22 13.24.10

コードは以下のような感じです。

self.view.makeToast(message: NSLocalizedString("stock_alert_read_done", comment: ""), duration: 2, position: HRToastPositionTop)

Loading Modal

loading時のindicatorをモーダル形式で表示してくれるメソッドも用意されているので使ってみます。

iOS Simulator Screen Shot 2015.02.22 13.24.03

例えば上記の例のようにtweet情報のローディングの際にモーダルを表示するには以下のコードでOK。

    self.view.makeToastActivity()
    loadMore({() -> () in
            self.view.hideToastActivity()
        }, errcb: {() -> () in
            self.view.hideToastActivity()
        }
    )

makeToastActivityでloading indicatorを表示して、Twitter API通信のsuccess/error時にhideToastActivityで消します。

今回はtoastやloadingをios swiftアプリで表示するためのライブラリの使い方紹介でした。次回はアプリ内でブラウザ(webview)を使ってウェブサイトを閲覧するための実装について紹介します!

TwitStockerのダウンロードはこちらから。
https://itunes.apple.com/en/app/twitstocker/id958798898?l=ja&ls=1&mt=8