Android Studio 進捗報告 13日目 | welcome-androidによるウォークスルーの実装

IT専門学生のふじさわです。

最近、Androidアプリ開発に携わる機会がありまして、その際に使用したかなり最高なライブラリ、welcome-android についてご紹介させてください。

なにをするためのライブラリ？

みなさんが初めてスマホアプリを使うとき、最初に簡単な説明スライドがでてくることがありますよね？

そのアプリがどういうものなのか、どう使うのか、などという説明が簡単になされたページを１枚ずつスライドしてめくっていくような、俗に言うチュートリアルに近いものです。

このことをウォークスルーと呼ぶみたいなのですが、今回はこれを実装します。

ウォークスルーについてピンとこない方は、先にこちらのnoteをご覧ください。別の方の記事ですが、めっちゃくちゃわかりやすく具体例まであって最高の記事なので。

さて、これをAndroid Studioで実装するには通常だとViewPagerで制御したりするのですが、ちょっと手間がかかります。

そこで今回使用したのが、冒頭にも紹介した welcome-android というライブラリです。

▼ 公式のgit-hubはこちら ▼

stephentuso/welcome-android

READ-MEが丁寧なのでそこを読めばだいたい分かるのですが、改めてここでご紹介いたします。

使い方① プロジェクトにライブラリを追加

app\build.gradle のdependancies 内に以下を追記

dependancies {
    ...
    implementation 'com.stephentuso:welcome:1.4.1'
    ...
}

公式のREAD-MEにはcompileで導入する形になっていますが、現在は非推奨なのでimplementsで追加します。

使い方② WelcomeActivityを継承した新規Activityを作成

[ファイル] ＞ [新規] ＞ [アクティビティ] ＞ [空のアクティビティ]で新規Activityを作成しますが、ここで１つポイントです。

このActivityは独自のレイアウトを使用するため、[レイアウト・ファイルを生成する]のチェックを外し生成しないようにしてください。

Activityの名前はなんでもOKです。

Activityを作成したら次はManifestを書き換えます。先ほどのActivity作成時に自動で一部追記されている（多分）ので、以下の形になるように修正してください。（自動追記がない場合は以下の内容を追記してください。）

<activity android:name=".作成したActivity"
    android:theme="@style/WelcomeScreenTheme"></activity>

これで準備は完了です。いよいよ実装！

使い方③ 新規Activityに処理を書いてウォークスルーを作成

まずは継承元の書換えです。デフォルトではAppCompatActivityになっていると思うので、以下のように書き換えます。

public class 作成したActivity　extends WelcomeActivity {

自動で生成されるonCreateは不要なので消してしまいましょう。

続いて、オーバーライドしてconfigurationメソッドを書きます。

@Override
protected WelcomeConfiguration configuration() {
    return new WelcomeConfiguretion.Builder(this)
            .defaultBackgroundColor(R.color.色)
            .page(new TitlePage(
                    R.drawable.画像,
                    "タイトル")
            )
            .page(new BasicPage(
                    R.drawable.画像,
                    "タイトル",
                    "テキスト")
                    .background(R.color.色)
            )
            .swipeToDismiss(true)
            .build();
}

はい、こんな感じです。簡単に解説します。

ここではウォークスルーとして表示するページをまとめたWelcomeConfigurationクラスのインスタンスを返しています。

ざっくり言うと、pageメソッドをどんどん追記するだけでスワイプできるページが追加できます。

pageメソッドには、初めから用意されている4種類のページインスタンスかカスタマイズしたページインスタンスを引数として渡します。ここで使用できる「用意されているページインスタンス」は以下の通りです。

・TitlePage
タイトルページです。
インスタンス化の際に画像とタイトルを渡します。

・BasicPage
通常のページです。
インスタンス化の際に画像、タイトル、説明テキストを渡します。

・ParallaxPage
視差効果を使ったページです。
インスタンス化の際にレイアウト、タイトル、説明テキストを渡します。
レイアウト中の画像の順番によって視差を生成します。

・FullscreenParallaxPage
視差効果だけを使ったページです。
インスタンス化の際にレイアウトのみ渡します。
タイトルや説明が表示されないページです。

・自作Page
fragmentをオーバーライドしたFragmentWelcomePageクラスを作成し、そのインスタンスを渡せば好きなレイアウトのページを自作できます。

実際に作成してみた例がこちら。順にTitlePage、BasicPage、ParallaxPage、FullscreenParallaxPageとなっています。

ちなみに、ウォークスルーのスキップや完了のボタンも処理含めてデフォルトで実装されています。ありがたすぎ。

使い方④ 作成したWelcomeActivityを呼び出す

最後に、MainActivityなどの呼び出し元Activityから作成したActivityを呼び出せばOKです。

まずはインスタンス変数として以下を追記します。

WelcomeHelper welcomeScreen;

次にonCreateに以下を追記します。

protected void onCreate(Bundle savedInstanceState) {
    ...
    welcomeScreen = new WelcomeHelper(
            this, 作成したActivity.class);
    welcomeScreen.show(savedInstanceState);
    ...

そして、最後に以下のメソッドをオーバーライドします。

@Override
protected void onSaveInstanceState(Bundle outState) {
   super.onSaveInstanceState(outState);
   welcomeScreen.onSaveInstanceState(outState);
}

これで実装完了です。

まとめ

長々と説明しましたが、結局

① gradleに追加
② Activityを作成しManifest書換え
③ 作成したActivityに処理を書く
　＞ 事前に画像を用意
　＞ .page(new Pageインスタンス(...))を追記していくだけ
④ 作成したActivityを呼び出す

こんだけでできちゃいます。

ViewPagerでやろうとすると、ページごとのレイアウトや動き、ページ数が分かる下部のドットやスキップボタンなどまで全部自作する必要がありますが、このwelcome-androidを使えばその辺を全部自動で作ってくれます。

あと、このウォークスルーを見たかどうかまで自動で管理してくれるので、どのタイミングで見せるかも簡単に制御できます。

みなさんも、Androidアプリ開発でウォークスルーをサクッと作りたいときはwelcome-androidを使ってみてください！