material intro
Release 2.0.0
Une introduction simple à l'application de conception matérielle avec des animations sympas et une API fluide.
Très inspiré des intros d'applications de Google.
Une application de démonstration est disponible sur Google Play :
| Diapositive simple | Diapositive personnalisée | Effet de fondu | Demande d'autorisation |
|---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
materials-intro est disponible sur jitpack.io .
Ajoutez ceci dans votre fichier racine build.gradle ( et non dans votre fichier build.gradle de module) :
allprojects {
repositories {
maven { url ' https://jitpack.io ' }
}
} Ajoutez ceci dans le fichier build.gradle de votre module :
dependencies {
implementation ' com.heinrichreimersoftware:material-intro:x.y.z '
} L'activité doit étendre IntroActivity et avoir un thème étendant @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 > (Sauf indication contraire, tous les appels de méthode suivants doivent être placés dans le onCreate() de l'activité.)
Material-intro dispose de générateurs de style fluides à la fois pour une simple diapositive de texte/image, comme on le voit dans les applications de Google, et pour les diapositives comportant un Fragment ou une ressource de mise en page personnalisée.
N'hésitez pas à soumettre un problème ou une pull request si vous pensez qu'il manque des types de diapositives.
SimpleSlide ) :Diapositive standard comportant un titre, une brève description et une image comme les intros de 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 ) : Diapositive personnalisée contenant un Fragment ou une ressource de mise en page.
addSlide ( new FragmentSlide . Builder ()
. background ( R . color . background_2 )
. backgroundDark ( R . color . background_dark_2 )
. fragment ( R . layout . fragment_2 , R . style . FragmentTheme )
. build ()); (Lorsque vous utilisez FragmentSlide avec un Fragment , vous devez étendre SlideFragment aux appels de navigation proxy vers l'activité d'introduction.)
Slide ) :Glissière de base. Si vous souhaitez modifier ce qui est affiché dans votre diapositive, c'est la voie à suivre.
Contrôlez le comportement du bouton gauche ou masquez-le/affichez-le.
/* Show/hide button */
setButtonBackVisible ( true );
/* Use skip button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_SKIP );
/* Use back button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_BACK );Contrôlez le comportement du bouton droit ou masquez-le/affichez-le.
/* 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 );Changer l'apparence du bouton « appel à l'action » :
/* 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 () {
});Affichez l’activité d’introduction en plein écran. Cela masque la barre d'état.
public class MainIntroActivity extends IntroActivity {
@ Override protected void onCreate ( Bundle savedInstanceState ){
setFullscreen ( true );
super . onCreate ( savedInstanceState );
...
}
} Assurez-vous d'appeler setFullscreen() avant d'appeler super.onCreate()
Ajustez la durée du défilement d’une seule diapositive.
setPageScrollDuration ( 500 ); (La durée de défilement de la page est adaptée dynamiquement lors du défilement de plusieurs positions pour refléter les durées dynamiques des documents de conception matérielle. La formule exacte pour calculer la durée de défilement est duration * (distance + sqrt(distance)) / 2 .)
Il existe trois manières de bloquer la navigation dans une diapositive :
SlideFragment (en utilisant un FragmentSlide ) en remplaçant les méthodes canGoForward() / canGoBackward() .SimpleSlide en définissant SimpleSlide.Builder#canGoForward(boolean) / SimpleSlide.Builder#canGoBackward(boolean) . (Si au moins une autorisation est définie sur SimpleSlide , la navigation est automatiquement bloquée jusqu'à ce que chaque autorisation soit accordée.)IntroActivity en définissant une NavigationPolicy : setNavigationPolicy ( new NavigationPolicy () {
@ Override public boolean canGoForward ( int position ) {
return true ;
}
@ Override public boolean canGoBackward ( int position ) {
return false ;
}
});Parcourez l'intro manuellement en utilisant l'une des méthodes suivantes, par exemple à partir d'un rappel d'auditeurs. Chacun d’eux respectera les paramètres de navigation bloqués.
/* 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 ();Faites défiler automatiquement l'intro jusqu'à ce que l'utilisateur interagisse avec l'intro.
/* 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 () Si l'un des éléments ci-dessus renvoie false lorsqu'un utilisateur tente d'accéder à une diapositive, un rappel OnNavigationBlockedListener est déclenché et vous pouvez l'utiliser pour afficher un message. De plus, vous pouvez ajouter des ViewPager.OnPageChangeListener simples pour écouter les défilements de page :
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 ) { ... }
}); Vous pouvez vérifier si l'utilisateur a annulé l'intro (en appuyant sur Retour) ou l'a terminée, y compris toutes les diapositives. Appelez simplement l'activité en utilisant startActivityForResult(intent, REQUEST_CODE_INTRO); puis écoutez le résultat :
@ 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 ();
}
}
} Vous pouvez facilement obtenir un bel effet de parallaxe pour n'importe quelle diapositive en utilisant ParallaxFrameLayout.java , ParallaxLinearLayout.java ou ParallaxRelativeLayout.java et en définissant layout_parallaxFactor pour ses enfants directs. Un facteur plus élevé signifie un effet de parallaxe plus fort, 0 signifie aucun effet de parallaxe du tout.
< 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>Consultez la démo "Cantine" pour un exemple de mise en page.
Si vous souhaitez afficher l'intro uniquement au premier démarrage de l'application, vous pouvez utiliser onActivityResult() pour stocker une préférence partagée lorsque l'utilisateur a terminé l'intro.
Consultez l'application de démonstration pour un exemple d'implémentation d'écran de démarrage :
Consultez la section des versions pour les journaux des modifications.
Material-intro utilise les fichiers open source suivants :
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.
