material intro
Release 2.0.0
Eine einfache Einführung in die Materialdesign-App mit coolen Animationen und einer flüssigen API.
Sehr inspiriert von den App-Intros von Google.
Eine Demo-App ist bei Google Play verfügbar:
| Einfache Folie | Benutzerdefinierte Folie | Fade-Effekt | Erlaubnisanfrage |
|---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
Material-Intro ist auf jitpack.io verfügbar.
Fügen Sie dies in Ihre Root build.gradle Datei ein ( nicht in Ihre Modul build.gradle Datei):
allprojects {
repositories {
maven { url ' https://jitpack.io ' }
}
} Fügen Sie dies in Ihre Moduldatei build.gradle ein:
dependencies {
implementation ' com.heinrichreimersoftware:material-intro:x.y.z '
} Die Aktivität muss IntroActivity erweitern und ein Thema haben, das @style/Theme.Intro erweitert:
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 > (Sofern nicht anders angegeben, sollten alle folgenden Methodenaufrufe im onCreate() der Aktivität erfolgen.)
material-intro verfügt über fließende Stilgeneratoren sowohl für eine einfache Text-/Bildfolie, wie sie in den Google-Apps zu sehen ist, als auch für Folien mit einer benutzerdefinierten Fragment oder Layoutressource.
Wenn Sie der Meinung sind, dass Folientypen fehlen, können Sie gerne eine Problem- oder Pull-Anfrage einreichen.
SimpleSlide ):Standardfolie mit Titel, kurzer Beschreibung und Bild wie die Intros von 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 ): Benutzerdefinierte Folie, die ein Fragment oder eine Layoutressource enthält.
addSlide ( new FragmentSlide . Builder ()
. background ( R . color . background_2 )
. backgroundDark ( R . color . background_dark_2 )
. fragment ( R . layout . fragment_2 , R . style . FragmentTheme )
. build ()); (Wenn Sie FragmentSlide mit einem Fragment verwenden, sollten Sie SlideFragment erweitern, um Proxy-Navigationsaufrufe für die Intro-Aktivität durchzuführen.)
Slide ):Basisrutsche. Wenn Sie ändern möchten, was auf Ihrer Folie angezeigt wird, ist dies der richtige Weg.
Steuern Sie das Verhalten der linken Taste oder blenden Sie es ein/aus.
/* Show/hide button */
setButtonBackVisible ( true );
/* Use skip button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_SKIP );
/* Use back button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_BACK );Steuern Sie das Verhalten der rechten Taste oder blenden Sie es ein/aus.
/* 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 );Ändern Sie das Erscheinungsbild der Schaltfläche „Call to 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 () {
});Zeigen Sie die Einführungsaktivität im Vollbildmodus an. Dadurch wird die Statusleiste ausgeblendet.
public class MainIntroActivity extends IntroActivity {
@ Override protected void onCreate ( Bundle savedInstanceState ){
setFullscreen ( true );
super . onCreate ( savedInstanceState );
...
}
} Stellen Sie sicher, dass Sie setFullscreen() aufrufen , bevor Sie super.onCreate() aufrufen.
Passen Sie an, wie lange das Scrollen einer einzelnen Folie dauert.
setPageScrollDuration ( 500 ); (Die Scrolldauer der Seite wird dynamisch angepasst, wenn an mehr als einer Position gescrollt wird, um dynamische Dauern aus den Materialdesign-Dokumenten widerzuspiegeln. Die genaue Formel zur Berechnung der Scrolldauer lautet duration * (distance + sqrt(distance)) / 2 )
Es gibt drei Möglichkeiten, die Navigation für eine Folie zu blockieren:
SlideFragment (mithilfe eines FragmentSlide ) durch Überschreiben der Methoden canGoForward() / canGoBackward() .SimpleSlide durch Festlegen von SimpleSlide.Builder#canGoForward(boolean) / SimpleSlide.Builder#canGoBackward(boolean) . (Wenn mindestens eine Berechtigung für SimpleSlide festgelegt ist, wird die Navigation automatisch blockiert, bis alle Berechtigungen erteilt werden.)IntroActivity aus, indem Sie eine NavigationPolicy festlegen: setNavigationPolicy ( new NavigationPolicy () {
@ Override public boolean canGoForward ( int position ) {
return true ;
}
@ Override public boolean canGoBackward ( int position ) {
return false ;
}
});Navigieren Sie manuell durch das Intro, indem Sie eine der folgenden Methoden verwenden, z. B. über einen Rückruf eines Zuhörers. Jeder von ihnen respektiert blockierte Navigationseinstellungen.
/* 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 ();Scrollen Sie automatisch durch das Intro, bis der Benutzer mit dem Intro interagiert.
/* 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 () Wenn einer der oben genannten false zurückgibt, wenn ein Benutzer versucht, zu einer Folie zu navigieren, wird ein OnNavigationBlockedListener -Rückruf ausgelöst, den Sie zum Anzeigen einer Nachricht verwenden können. Zusätzlich können Sie einfache ViewPager.OnPageChangeListener s hinzufügen, um auf Seiten-Scrolls zu warten:
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 ) { ... }
}); Sie können überprüfen, ob der Benutzer das Intro abgebrochen hat (durch Drücken von Zurück) oder es einschließlich aller Folien beendet hat. Rufen Sie einfach die Aktivität mit startActivityForResult(intent, REQUEST_CODE_INTRO); auf. und dann auf das Ergebnis hören:
@ 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 ();
}
}
} Sie können ganz einfach einen gut aussehenden Parallaxeneffekt für jede Folie erzielen, indem Sie entweder ParallaxFrameLayout.java , ParallaxLinearLayout.java oder ParallaxRelativeLayout.java verwenden und layout_parallaxFactor für die direkten untergeordneten Elemente definieren. Ein höherer Faktor bedeutet einen stärkeren Parallaxeneffekt, 0 bedeutet überhaupt keinen Parallaxeneffekt.
< 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>Ein Layout-Beispiel finden Sie in der „Canteen“-Demo.
Wenn Sie das Intro nur beim ersten App-Start anzeigen möchten, können Sie onActivityResult() verwenden, um eine gemeinsame Präferenz zu speichern, wenn der Benutzer das Intro beendet hat.
Eine Beispielimplementierung für einen Begrüßungsbildschirm finden Sie in der Demo-App:
Änderungsprotokolle finden Sie im Abschnitt „Releases“.
material-intro verwendet die folgenden Open-Source-Dateien:
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.
