手軽にチュートリアルが組み込めるAndroidのライブラリ、MaterialShowcaseViewを使ってみる。

github.com

こちらのライブラリは、アプリをインストールして起動後に1回だけチュートリアルが実行される仕組みです。2回目からは、アンインストールしないと表示されないので注意してください。

いつもの

    compile 'com.github.deano2390:MaterialShowcaseView:1.0.5@aar'

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="30dp">

        <TextView
            android:id="@+id/nameTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ユーザーID" />

        <EditText
            android:id="@+id/nameEt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/passwordTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="パスワード" />

        <EditText
            android:id="@+id/passwordEt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button
            android:id="@+id/loginBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="ログイン" />

        <Button
            android:id="@+id/clearBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="クリア" />
    </LinearLayout>
</RelativeLayout>

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;
import android.widget.TextView;

import uk.co.deanwild.materialshowcaseview.MaterialShowcaseSequence;
import uk.co.deanwild.materialshowcaseview.ShowcaseConfig;

public class MainActivity extends AppCompatActivity {

    private static final String SHOWCASE_ID = "sequence example";
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView first = (TextView) findViewById(R.id.nameTv);
        TextView second = (TextView) findViewById(R.id.passwordTv);
        Button third = (Button) findViewById(R.id.clearBtn);
        ShowcaseConfig config = new ShowcaseConfig();
        config.setDelay(500);
        MaterialShowcaseSequence sequence = new MaterialShowcaseSequence(this, SHOWCASE_ID);
        sequence.setConfig(config);
        sequence.addSequenceItem(first,
                "ユーザーIDは、半角アルファベット10文字で入力してください。", "次へ");
        sequence.addSequenceItem(second,
                "パスワードは忘れずに", "次へ");
        sequence.addSequenceItem(third,
                "クリアボタンを押すとフォームを空にできます。", "開始する");
        sequence.start();

    }
}