[Android Tips] コーチマークを簡単作成！ShowcaseView ライブラリを使ってみた

Android Tips

#Android

諏訪悠紀

2014.01.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コーチマークを作ってアプリを分かりやすくしよう

スマホアプリの操作を分かりやすくするのって難しいですよね。直感的に使えるようにユーザビリティに配慮した UI を設計することももちろん必要ですけど、どうしても説明を挟まないといけない場面もあると思います。

そんなときに活躍するのがコーチマークです。アプリに操作説明を挟みたいときによく使われる手法で、アプリの UI にオーバーレイで重ねて矢印とか説明文とか入れて使いかたを分かりやすく説明します。以下のような感じです(リンク先は iOS アプリのコーチマークのデザインですが)。

http://inspired-ui.com/tagged/coach_marks

iOSはこちらにあるようにいろいろライブラリがありますが、Android はどうなんだろーと調べてみたら ShowcaseView というライブラリを見つけたので、ちょっと使ってみました。Android 4.0のアプリ一覧で出てくるアレに似ているやつです。

https://github.com/amlcurran/ShowcaseView

コーチマークを表示してみる！

まずは普通に使ってみる

ライブラリのインポートは github から clone して Eclipse や Android Studio にインポートする、いつもどおりの手順で OK です。動作には nineoldandroid ライブラリが必須ですが、jar ファイルが同梱されているのでそのまま使えます。

showcase01

ちなみにサンプルアプリも同梱されていますが、このサンプルアプリは ActionBarSherlock ライブラリを使っているので、サンプルアプリを動かしたい場合は ActionBarSherlock をインポートしてください。SupportPackageのバージョン違いでエラーが出る場合はすべてのプロジェクトの android-support-v4.jar を最新化すると直ります。

では早速使ってみます。適当なプロジェクトをデフォルト設定で作成し、ライブラリをインポートし、MainActivity.java の onCreate() で以下のコードを書きます。

ViewTarget target = new ViewTarget(R.id.button, this);
ShowcaseView sc = ShowcaseView.insertShowcaseView(target, this, "タイトル", "メッセージ");

たったこれだけで表示できます。超簡単ですね！

ビルド時に Eclipse が OutOfMemory で固まってしまう場合、ShowcaseView の libs の Roboelectric ライブラリを削除してください。筆者、これでハマりました……… https://github.com/amlcurran/ShowcaseView/issues/108

ActionBar の MenuItem をターゲットにしてみる

続いて ActionBar の MenuItem に対してコーチマークを付けてみます。ちなみに以下は ActionBarSherlock を使った場合の実装です。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getSupportMenuInflater().inflate(R.menu.main, menu);
    ActionItemTarget target = new ActionItemTarget(this, R.id.action_settings);
    ShowcaseView.insertShowcaseView(target, this, "タイトル", "メッセージ");
    return super.onCreateOptionsMenu(menu);
}

ちゃんと表示できました！ちなみに ActionItemTarget クラスを使っていますが、これは ActionBar のアイテムが表示されていない状態 (android:showAsAction="never" とか) だと NullPointerException で落ちるのでご注意。ホームボタンやタイトルに付けたい場合は ActionViewTarget クラスを使います。

ちなみに ActionBarActivity で試した場合も問題なく表示できました(タイトルとアイテムだけ試してます)。

AlertDialog の View をターゲットにしてみる

お次は AlertDialog に置いてある View に対してコーチマークを付けてみます。どうなるこうなる。

public class SampleAlertDialogFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle("テスト");
        
        View view = View.inflate(getActivity(), R.layout.activity_main, null);
        builder.setView(view);
        
        ViewTarget target = new ViewTarget(view.findViewById(R.id.button));
        ShowcaseView.insertShowcaseView(target, getActivity(), "タイトル", "メッセージ");
        
        return builder.create();
    }
}

あー。AlertDialog の後ろに出てしまいました。Activity の Window に重ねてるんでしょうかね。解決法あったらコメント欄で教えて下さい！

カスタマイズ

色とか円の大きさとかカスタマイズできます。

色のカスタマイズ

色はスタイルをあててあげると変わります。

<resources>

    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
    </style>
    
        <style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
        <item name="sv_backgroundColor">#3300A621</item>
        <item name="sv_showcaseColor">#00801A</item>
        <item name="sv_buttonText">Close</item>
        <item name="sv_titleTextAppearance">@style/CustomTitle</item>
    </style>

    <style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
        <item name="android:textColor">#00801A</item>
    </style>

</resources>

円の大きさのカスタマイズ

円は Java ソースコードから変えることができます。

ShowcaseViews views = new ShowcaseViews(this);
        ShowcaseViews.ItemViewProperties properties = 
                new ShowcaseViews.ItemViewProperties(
                        R.id.button, android.R.string.ok, android.R.string.ok, 0.5f);
        views.addView(properties);
        views.show();