この記事では、作業中または作業中のアプリケーションにオンボーディングエクスペリエンスを導入することについてお話ししたいと思います。
「オンボーディングエクスペリエンス」は、アプリケーション内の小さなプレゼンテーションで、そのようなスライドショーの形式でアプリケーションの機能を示します。 アプリケーションの機能を実証するこのプラクティスは、たとえばGoogleなどの多くの企業で使用されています。
Googleドライブアプリのオンボーディングエクスペリエンスの例：
「オンボーディングエクスペリエンス」とも呼ばれ、「アプリ紹介」または「製品ツアー」と呼ばれます。 その本質は変わらないので、あなたはそれを望むものと呼ぶことができます。
ですから、この機能の導入についての私の話は、モバイルアプリケーションの顧客の1人が、他のアプリケーションでの外観が本当に好きだったので、そのようなものを実装するように頼まれた後に始まりました。迅速かつ無痛でそれを行う方法を見つけました。
私はGitHubでライブラリを探し始めました。誰かがこれを正確に実装し、似たようなことをしたことを意味します。
思ったほど時間をかけなかったので、 ここで必要なものを見つけました 。
少し読んだ後、このライブラリを実装するための最良のオプションを見つけました。 さらに深く、ニーズに合わせてすべてをカスタマイズできます。 たとえば、このライブラリをフラグメントまたはアクティビティのみで使用したり、アニメーションの外観を変更したり、スワイプ時の振動を設定したりできます。 最小限の実装オプションについて説明します。
そこで、実装を7つのポイントで強調し、わかりやすく読みやすいようにします。主な側面を太字で強調します。
1）プロジェクトのビルド （下位レベル） に依存関係を追加します。
repositories {
mavenCentral()
}
dependencies {
compile 'com.github.paolorotolo:appintro:3.3.0'
}
2） SampleSlide.javaフラグメントを作成します。
public class SampleSlide extends Fragment { private static final String ARG_LAYOUT_RES_ID = "layoutResId"; public static SampleSlide newInstance(int layoutResId) { SampleSlide sampleSlide = new SampleSlide(); Bundle args = new Bundle(); args.putInt(ARG_LAYOUT_RES_ID, layoutResId); sampleSlide.setArguments(args); return sampleSlide; } private int layoutResId; public SampleSlide() {} @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); if(getArguments() != null && getArguments().containsKey(ARG_LAYOUT_RES_ID)) layoutResId = getArguments().getInt(ARG_LAYOUT_RES_ID); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(layoutResId, container, false); } }
3） CustomIntro.javaクラスを作成します。
public class CustomIntro extends AppIntro2 { @Override public void init(Bundle savedInstanceState) { // , 3 addSlide(SampleSlide.newInstance(R.layout.intro_1)); // addSlide(SampleSlide.newInstance(R.layout.intro_2)); addSlide(SampleSlide.newInstance(R.layout.intro_3)); } private void loadMainActivity(){ Intent intent = new Intent(this, MainActivity.class); startActivity(intent); } @Override public void onNextPressed() { // Do something here } @Override public void onDonePressed() { finish(); } @Override public void onSlideChanged() { // Do something here } }
4） レイアウトフォルダーで、 Introに必要なレイアウトの数を作成します （3つある場合は、intro_1.xml、intro_2.xml、intro_3.xml）。
さまざまなレイアウトでどこを何を変更するか、自分で理解すると思います。intro.xmlの例を紹介しました
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#2196F3" android:layout_weight="10" android:id="@+id/main"> <TextView android:layout_width="wrap_content" android:layout_height="0dp" android:layout_gravity="center" android:gravity="center" android:paddingLeft="32dp" android:layout_weight="3" android:fontFamily="sans-serif-thin" android:textColor="#ffffff" android:paddingRight="32dp" android:textSize="28sp" android:text=" "/> <LinearLayout android:layout_width="fill_parent" android:layout_height="0dp" android:orientation="vertical" android:gravity="center" android:layout_weight="5"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:paddingLeft="16dp" android:paddingRight="16dp" android:src="@drawable/welcome_intro"/> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="3" android:layout_gravity="center" android:gravity="center" android:textColor="#ffffff" android:paddingLeft="64dp" android:paddingRight="64dp" android:textSize="16sp" android:text=" "/> <TextView android:layout_width="fill_parent" android:layout_height="64dp" /> </LinearLayout>
5） MainActivity.javaで、OnCreateメソッドに次のコードを記述して、最初の起動時にIntroを1回表示します 。 スレッドを使用してこれを行います。
// Declare a new thread to do a preference check Thread t = new Thread(new Runnable() { @Override public void run() { SharedPreferences getPrefs = PreferenceManager .getDefaultSharedPreferences(getBaseContext()); boolean isFirstStart = getPrefs.getBoolean(FIRST_START, true); if (isFirstStart) { Intent i = new Intent(MainActivity.this, CustomIntro.class); startActivity(i); SharedPreferences.Editor e = getPrefs.edit(); e.putBoolean(FIRST_START, false); e.apply(); } } }); // Start the thread t.start(); }
5） マニフェストで、アクティビティを宣言します ：
<activity android:name=".CustomIntro" android:label="@string/app_name" android:theme="@style/FullscreenTheme"/>
6） styles.xmlで、 Introをツールバーなしで全画面表示するための独自のカスタムテーマを作成することを忘れないでください 。
<!-- Fullscreen application theme. --> <style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:windowTranslucentStatus">true</item> </style>
7）最後のアクションであるドロアブルフォルダーに、画面で使用される画像を配置します 。
ここでは、たとえばGoogleのように、ベクターグラフィックスを試したり、よりエレガントにしたりできます。 通常の.pngファイルを解像度256x256で配置します。
ここに私が得たものがあります：
PSこの記事がお役に立てば幸いです。 その中で、私は個人的な目標を追求しませんでした。 良い図書館で働いて、私が理解したことを説明しようとしました。