material intro
Release 2.0.0
クールなアニメーションと流暢な API を備えたシンプルなマテリアル デザイン アプリのイントロ。
Google のアプリ紹介から非常にインスピレーションを得ています。
デモ アプリは Google Play で入手できます。
| シンプルなスライド | カスタムスライド | フェード効果 | 許可リクエスト |
|---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
マテリアルイントロはjitpack.ioで入手できます。
これをルートのbuild.gradleファイルに追加します (モジュールのbuild.gradleファイルではありません)。
allprojects {
repositories {
maven { url ' https://jitpack.io ' }
}
}これをモジュールのbuild.gradleファイルに追加します。
dependencies {
implementation ' com.heinrichreimersoftware:material-intro:x.y.z '
}アクティビティはIntroActivityを拡張し、 @style/Theme.Introを拡張するテーマを持つ必要があります。
public class MainIntroActivity extends IntroActivity {
@ Override
protected void onCreate ( Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState );
// Add slides, edit configuration...
}
}< manifest ...>
< application ...>
< activity
android : name = " .MainIntroActivity "
android : theme = " @style/Theme.Intro " />
</ application >
</ manifest > (特に明記されていない限り、次のメソッド呼び出しはすべてアクティビティのonCreate()に含める必要があります。)
material-intro には、 Google アプリに見られるような単純なテキスト/画像スライドと、カスタムのFragmentまたはレイアウト リソースを備えたスライドの両方に対応する流暢なスタイル ビルダーが含まれています。
スライド タイプが不足していると思われる場合は、お気軽に問題またはプル リクエストを送信してください。
SimpleSlide ):タイトル、短い説明、Google の紹介文のような画像を備えた標準スライド。
addSlide ( new SimpleSlide . Builder ()
. title ( R . string . title_1 )
. description ( R . string . description_1 )
. image ( R . drawable . image_1 )
. background ( R . color . background_1 )
. backgroundDark ( R . color . background_dark_1 )
. scrollable ( false )
. permission ( Manifest . permission . CAMERA )
. build ());FragmentSlide ): Fragmentまたはレイアウト リソースを含むカスタム スライド。
addSlide ( new FragmentSlide . Builder ()
. background ( R . color . background_2 )
. backgroundDark ( R . color . background_dark_2 )
. fragment ( R . layout . fragment_2 , R . style . FragmentTheme )
. build ()); ( FragmentでFragmentSlide使用する場合は、 SlideFragment拡張して、イントロ アクティビティへのナビゲーション呼び出しをプロキシする必要があります。)
Slide ):ベーススライド。スライドに表示されている内容を変更したい場合は、これが最適な方法です。
左ボタンの動作を制御したり、非表示/表示を切り替えます。
/* Show/hide button */
setButtonBackVisible ( true );
/* Use skip button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_SKIP );
/* Use back button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_BACK );右ボタンの動作を制御したり、非表示/表示を切り替えます。
/* Show/hide button */
setButtonNextVisible ( true );
/* Use next and finish button behavior */
setButtonNextFunction ( BUTTON_NEXT_FUNCTION_NEXT_FINISH );
/* Use next button behavior */
setButtonNextFunction ( BUTTON_NEXT_FUNCTION_NEXT );「行動喚起」ボタンの外観を変更します。
/* Show/hide button */
setButtonCtaVisible ( getStartedEnabled );
/* Tint button text */
setButtonCtaTintMode ( BUTTON_CTA_TINT_MODE_TEXT );
/* Tint button background */
setButtonCtaTintMode ( BUTTON_CTA_TINT_MODE_BACKGROUND );
/* Set custom CTA label */
setButtonCtaLabel ( R . string . start )
/**/
setButtonCtaClickListener ( new View . OnClickListener () {
});イントロアクティビティを全画面で表示します。これによりステータスバーが非表示になります。
public class MainIntroActivity extends IntroActivity {
@ Override protected void onCreate ( Bundle savedInstanceState ){
setFullscreen ( true );
super . onCreate ( savedInstanceState );
...
}
} super.onCreate()を呼び出す前に必ずsetFullscreen()を呼び出してください。
1 つのスライドのスクロールにかかる時間を調整します。
setPageScrollDuration ( 500 ); (ページのスクロール期間は、マテリアル デザイン ドキュメントの動的な期間を反映するために、複数の位置をスクロールするときに動的に適応されます。スクロール期間を計算するための正確な式は、 duration * (distance + sqrt(distance)) / 2です。)
スライドのナビゲーションをブロックするには、次の 3 つの方法があります。
SlideFragment ( FragmentSlideを使用) 内で、 canGoForward() / canGoBackward()メソッドをオーバーライドします。SimpleSlideの場合はSimpleSlide.Builder#canGoForward(boolean) / SimpleSlide.Builder#canGoBackward(boolean)を設定します。 (少なくとも 1 つの権限がSimpleSlideに設定されている場合、すべての権限が付与されるまでナビゲーションは自動的にブロックされます。)IntroActivityからNavigationPolicyを設定します。 setNavigationPolicy ( new NavigationPolicy () {
@ Override public boolean canGoForward ( int position ) {
return true ;
}
@ Override public boolean canGoBackward ( int position ) {
return false ;
}
});リスナー コールバックなどから、次のいずれかの方法を使用して、イントロを手動で移動します。それぞれが、ブロックされたナビゲーション設定を尊重します。
/* Scroll to any position */
goToSlide ( 5 );
/* Scroll to the next slide in the intro */
nextSlide ();
/* Scroll to the previous slide in the intro */
previousSlide ();
/* Scroll to the last slide of the intro */
goToLastSlide ();
/* Scroll to the first slide of the intro */
goToFirstSlide ();ユーザーがイントロを操作するまで、イントロを自動的にスクロールします。
/* Start an auto slideshow with 2500ms delay between scrolls and infinite repeats */
autoplay ( 2500 , INFINITE );
/* Start an auto slideshow with default configuration */
autoplay ();
/* Cancel the slideshow */
cancelAutoplay ()ユーザーがスライドに移動しようとしたときに上記のいずれかがfalseを返した場合、メッセージの表示に使用できるOnNavigationBlockedListenerコールバックが起動されます。さらに、ページ スクロールをリッスンするために、従来のViewPager.OnPageChangeListenerを追加できます。
addOnNavigationBlockedListener ( new OnNavigationBlockedListener () {
@ Override public void onNavigationBlocked ( int position , int direction ) { ... }
});
addOnPageChangeListener ( new ViewPager . OnPageChangeListener (){
@ Override public void onPageScrolled ( int position , float positionOffset , int positionOffsetPixels ) { ... }
@ Override public void onPageSelected ( int position ) { ... }
@ Override public void onPageScrollStateChanged ( int state ) { ... }
});ユーザーが（戻るを押して）イントロをキャンセルしたか、すべてのスライドを含めてイントロを終了したかを確認できます。 startActivityForResult(intent, REQUEST_CODE_INTRO);そして結果を聞いてください:
@ Override
protected void onActivityResult ( int requestCode , int resultCode , Intent data ) {
super . onActivityResult ( requestCode , resultCode , data );
if ( requestCode == REQUEST_CODE_INTRO ) {
if ( resultCode == RESULT_OK ) {
// Finished the intro
} else {
// Cancelled the intro. You can then e.g. finish this activity too.
finish ();
}
}
} ParallaxFrameLayout.java 、 ParallaxLinearLayout.java 、またはParallaxRelativeLayout.javaのいずれかを使用し、その直接の子に対してlayout_parallaxFactor定義することで、任意のスライドに見栄えの良い視差効果を簡単に実現できます。係数が大きいほど視差効果が強くなり、 0視差効果がまったくないことを意味します。
< com .heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout
android : layout_width = " match_parent "
android : layout_height = " match_parent "
... >
< TextView
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
app : layout_parallaxFactor = " 0 "
... />
< ImageView
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
app : layout_parallaxFactor = " 1.25 "
... />
</ com .heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout>レイアウトの例については、「Canteen」デモを確認してください。
アプリの最初の起動時にのみイントロを表示したい場合は、 onActivityResult()を使用して、ユーザーがイントロを終了したときに共有設定を保存できます。
サンプルのスプラッシュ スクリーン実装については、デモ アプリを参照してください。
変更履歴については、リリースのセクションを参照してください。
material-intro では、次のオープンソース ファイルを使用します。
MIT License
Copyright (c) 2017 Jan Heinrich Reimer
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
