material intro
Release 2.0.0
Una introducción sencilla a la aplicación de diseño de materiales con animaciones geniales y una API fluida.
Muy inspirado en las introducciones de aplicaciones de Google.
Hay una aplicación de demostración disponible en Google Play:
| diapositiva sencilla | diapositiva personalizada | efecto desvanecimiento | Solicitud de permiso |
|---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
La introducción del material está disponible en jitpack.io .
Agregue esto en su archivo raíz build.gradle ( no en el archivo build.gradle de su módulo):
allprojects {
repositories {
maven { url ' https://jitpack.io ' }
}
} Agregue esto en el archivo build.gradle de su módulo:
dependencies {
implementation ' com.heinrichreimersoftware:material-intro:x.y.z '
} La actividad debe extender IntroActivity y tener un tema que se extienda @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 > (A menos que se indique lo contrario, todas las siguientes llamadas a métodos deben ir en onCreate() de la actividad).
material-intro tiene creadores de estilos fluidos tanto para una diapositiva simple de texto/imagen, como se ve en las aplicaciones de Google, como para diapositivas que presentan un Fragment personalizado o un recurso de diseño.
No dudes en enviar un problema o una solicitud de extracción si crees que falta algún tipo de diapositiva.
SimpleSlide ):Diapositiva estándar con título, descripción breve e imagen como las introducciones 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 ): Diapositiva personalizada que contiene un Fragment o un recurso de diseño.
addSlide ( new FragmentSlide . Builder ()
. background ( R . color . background_2 )
. backgroundDark ( R . color . background_dark_2 )
. fragment ( R . layout . fragment_2 , R . style . FragmentTheme )
. build ()); (Cuando utilice FragmentSlide con Fragment , debe extender SlideFragment para realizar llamadas de navegación proxy a la actividad de introducción).
Slide ):Tobogán base. Si desea modificar lo que se muestra en su diapositiva, este es el camino a seguir.
Controle el comportamiento del botón izquierdo u ocultelo/muéstrelo.
/* Show/hide button */
setButtonBackVisible ( true );
/* Use skip button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_SKIP );
/* Use back button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_BACK );Controle el comportamiento del botón derecho u ocultelo/muéstrelo.
/* 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 );Cambie la apariencia del botón "llamado a la acción":
/* 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 () {
});Muestra la actividad de introducción en pantalla completa. Esto oculta la barra de estado.
public class MainIntroActivity extends IntroActivity {
@ Override protected void onCreate ( Bundle savedInstanceState ){
setFullscreen ( true );
super . onCreate ( savedInstanceState );
...
}
} Asegúrese de llamar setFullscreen() antes de llamar super.onCreate()
Ajusta el tiempo que tarda el desplazamiento de una sola diapositiva.
setPageScrollDuration ( 500 ); (La duración del desplazamiento de la página se adapta dinámicamente cuando se desplaza más de una posición para reflejar las duraciones dinámicas de los documentos de diseño de materiales. La fórmula exacta para calcular la duración del desplazamiento es duration * (distance + sqrt(distance)) / 2 )
Hay tres formas de bloquear la navegación de una diapositiva:
SlideFragment (usando un FragmentSlide ) anulando los métodos canGoForward() / canGoBackward() .SimpleSlide configurando SimpleSlide.Builder#canGoForward(boolean) / SimpleSlide.Builder#canGoBackward(boolean) . (Si se establece al menos un permiso para SimpleSlide , la navegación se bloquea automáticamente hasta que se concedan todos los permisos).IntroActivity configurando una NavigationPolicy : setNavigationPolicy ( new NavigationPolicy () {
@ Override public boolean canGoForward ( int position ) {
return true ;
}
@ Override public boolean canGoBackward ( int position ) {
return false ;
}
});Navegue por la introducción manualmente utilizando uno de los siguientes métodos, por ejemplo, desde una devolución de llamada de los oyentes. Cada uno de ellos respetará las configuraciones de navegación bloqueadas.
/* 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 ();Desplácese automáticamente por la introducción hasta que el usuario interactúe con la introducción.
/* 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 cualquiera de los resultados anteriores devuelve false cuando un usuario intenta navegar a una diapositiva, se activa una devolución de llamada OnNavigationBlockedListener que puede usar para mostrar un mensaje. Además, puede agregar ViewPager.OnPageChangeListener s antiguos para escuchar los desplazamientos de página:
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 ) { ... }
}); Puede verificar si el usuario canceló la introducción (presionando Atrás) o la terminó, incluidas todas las diapositivas. Simplemente llame a la actividad usando startActivityForResult(intent, REQUEST_CODE_INTRO); y luego escuche el resultado:
@ 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 ();
}
}
} Puede lograr fácilmente un efecto de paralaje atractivo para cualquier diapositiva usando ParallaxFrameLayout.java , ParallaxLinearLayout.java o ParallaxRelativeLayout.java y definiendo layout_parallaxFactor para sus elementos secundarios directos. Un factor más alto significa un efecto de paralaje más fuerte, 0 significa que no hay ningún efecto de paralaje.
< 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>Consulte la demostración "Cantina" para ver un ejemplo de diseño.
Si desea mostrar la introducción solo al iniciar la aplicación por primera vez, puede usar onActivityResult() para almacenar una preferencia compartida cuando el usuario finalizó la introducción.
Consulte la aplicación de demostración para ver un ejemplo de implementación de la pantalla de presentación:
Consulte la sección de lanzamientos para ver los registros de cambios.
material-intro utiliza los siguientes archivos de código abierto:
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.
