初回起動時にかぶせてくる画面説明ライブラリ「ShowcaseView」を使ってみた結果 www

 

「〜使ってみた結果 www」というか使ってみました。

ゲームでもよく使われているこれ。画面をみながらの機能説明的なやつ。

20131206-122415

このライブラリを使います。

Espiandev/ShowcaseView

Espiandev_ShowcaseView

gradleファイル群も含まれてますので、Android Studio 上でそのままインポートして動かすことができます。

で、とりあえず、別アプリに組み込もうとしながら、まず、サンプルにて構造を確認していきます。

 

ディレクトリ構造

ざっくりと眺める。

settings_gradle_-__ShowcaseView-master__-_ShowcaseView-master_-____Desktop_ShowcaseView-master__-_Android_Studio__I_O_Preview__0_3_7_と_Evernote


ShowcaseView/
 + library/
    + build.gradle
    + AndroidManifest.xml
    ...
 + sample/
    + build.gradle
    + AndroidManifest.xml
    ...
 + settings.gradle
 + build.gradle
...

 

プロジェクトトップの settings.gradle

include ':library', ':sample'

2つのモジュール（Eclipseでいうところのプロジェクト）で構成されているマルチプロジェクト構成。
アプリ「sample」にライブラリ「library」を組み込むイメージ。

 

sampleの build.gradle

apply plugin: 'android'

dependencies {
     compile project(':library')
     compile 'com.android.support:support-v4:18.0.+'
     compile 'com.nineoldandroids:library:2.4.0+'
}
...

アプリ sample の依存部分。library（もうひとつのモジュール）に依存していることが分かる。

その他のライブラリは、maven central repository から取得依存。

「com.nineoldandroids:library:2.4.0+」もアニメーション等の表示時に必須となる。

 

library の build.gradle

...
apply plugin: 'android-library'
...
dependencies {

     compile 'com.android.support:support-v4:18.0.+'
     compile 'com.nineoldandroids:library:2.4.0+'
}
...

sample から依存されるライブラリモジュール library の依存部分。

こちらも外部取得依存してる。

GitHub から落としたアーカイブ内には、libs 以下に jar が配置されてるが実際は不要。

 

実装方法

基本的には3行。

// 表示する View を取得
View showcasedView = findViewById(R.id.view_to_showcase);

// 表示するターゲット(ボタンなど)を取得
ViewTarget target = new ViewTarget(showcasedView); 

// 表示
ShowcaseView.insertShowcaseView(target, 
       this, R.string.showcase_title, R.string.showcase_details);

サンプルの中には、ActionBarやFragmentを利用したものとかあるので、利用頻度が高そうなやつをひとつわかりやすくしておく。

Fragment内で実装するやつ、かつOKボタン押下で連続表示。

@Override
public onActivityCreated() {
    super.onActevityCreated(savedInstanceState);
    ...
    ShowcaseView.ConfigOptions mOptions = new ShowcaseView.ConfigOptions();
        mOptions.block = false;
        mOptions.hideOnClickOutside = false;

        ShowcaseViews mViews = new ShowcaseViews(
            getActivity(),
            new ShowcaseViews.OnShowcaseAcknowledged() {
                @Override
                public void onShowCaseAcknowledged(ShowcaseView showcaseView) {
                    Toast.makeText(
                            getApplicationContext(),
                            R.string.showcase_message_finished,
                            Toast.LENGTH_SHORT
                    ).show();
                }
            }
        );
        mViews.addView(
                new ShowcaseViews.ItemViewProperties(
                        R.id.target1,
                        R.string.showcase_title1,
                        R.string.showcase_message1,
                        1.2f // 円のサイズ
                )
        );
        mViews.addView(
                new ShowcaseViews.ItemViewProperties(
                        R.id.target2,
                        R.string.showcase_title2,
                        R.string.showcase_message2,
                        0.5f  // 円のサイズ
                )
        );
        mViews.show(); 
}

 

手順メモ。

1. ライブラリディレクトリをコピーする。
2. settings.gradle と build.gradle を編集して依存関係をととのえる。
3. Fragment#OnActivityCreated() 内に上記を挿入する。
4. 挿入した部分を編集。
　・表示場所、サイズの指定
　・メッセージリソースの指定
5. strings.xml にメッセージを追加。

 

初回起動時のみの表示とするには、SharedPreferences を使うとよいです。
「一度表示されたかどうか」を保存して置きましょう。

 

初回起動(保存)するとき。

...
SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
sp.edit().putInt("InitState", 1).commit();
...

 

確認(読み込み)するとき。

...
SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
if (0 == sp.getInt("InitState", 0) {
    showShowcase();
}
...

初回起動時に1度だけダイアログを出す方法 « Tech Booster 初回起動時に1度だけダイアログを出す方法 « Tech Booster

 

以上でいけました。とさ。

20131206-130450

 

Showcaseview by Espiandev

Showcaseview_by_Espiandev

[GUIDE] Holo-themed transparent demo overlays with ShowcaseView - xda-developers


関連ワード:  Android・AndroidStudio・アプリ・ツール・ライブラリ・便利な設定・開発・・