Startseite>Programmierbezogen>JAVA-Quellcode
Herunterladen

MaterialViewPager

Einfach zu verwendende Material Design ViewPager-Bibliothek

Probe

Und schauen Sie sich ein Beispiel-Youtube-Video an: Youtube-Link

Herunterladen

In Ihrem Modul 

compile ' com.github.florent37:materialviewpager:1.2.3 '

// dependencies
compile ' com.flaviofaria:kenburnsview:1.0.7 '
compile ' com.jpardogo.materialtabstrip:library:1.1.0 '
compile ' com.github.bumptech.glide:glide:4.0.0 '

Verwendung

Fügen Sie MaterialViewPager zum Layout Ihrer Aktivität hinzu 

< com .github.florent37.materialviewpager.MaterialViewPager
    android : id = " @+id/materialViewPager "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent "
    app : viewpager_logo = " @layout/header_logo "
    app : viewpager_logoMarginTop = " 100dp "
    app : viewpager_color = " @color/colorPrimary "
    app : viewpager_headerHeight = " 200dp "
    app : viewpager_headerAlpha = " 1.0 "
    app : viewpager_hideLogoWithFade = " false "
    app : viewpager_hideToolbarAndTitle = " true "
    app : viewpager_enableToolbarElevation = " true "
    app : viewpager_parallaxHeaderFactor = " 1.5 "
    app : viewpager_headerAdditionalHeight = " 20dp "
    app : viewpager_displayToolbarWhenSwipe = " true "
    app : viewpager_transparentToolbar = " true "
    app : viewpager_animatedHeaderImage = " true "
    app : viewpager_disableToolbar = " false "

    />

mit header_logo.xml 

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< TextView xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/logo_white "
    android : layout_width = " wrap_content "
    android : layout_height = " @dimen/materialviewpager_logoHeight "
    android : text = " Material is Good "
    android : textSize = " 30sp "
    android : textColor = " @android:color/white " />

In der Vorschau von Android Studio sehen Sie Folgendes:

Um einen schönen Bildschirm zu erhalten und die Vorschau zu aktivieren, kann Ihr Design folgen 

< style name = " AppBaseTheme " parent = " @style/Theme.AppCompat.Light " >
</ style >

< style name = " AppTheme " parent = " AppBaseTheme " >

   < item name = " android:textColorPrimary " >@android:color/white</ item >
   < item name = " drawerArrowStyle " >@style/DrawerArrowStyle</ item >
   < item name = " android:windowTranslucentStatus " tools : targetApi = " 21 " >true</ item >

   < item name = " android:windowContentOverlay " >@null</ item >
   < item name = " windowActionBar " >false</ item >
   < item name = " windowNoTitle " >true</ item >

   <!-- Toolbar Theme / Apply white arrow -->
   < item name = " colorControlNormal " >@android:color/white</ item >
   < item name = " actionBarTheme " >@style/AppTheme.ActionBarTheme</ item >

   <!-- Material Theme -->
   < item name = " colorPrimary " >@color/colorPrimary</ item >
   < item name = " colorPrimaryDark " >@color/colorPrimaryDark</ item >
   < item name = " colorAccent " >@color/accent_color</ item >

   < item name = " android:navigationBarColor " tools : targetApi = " 21 " >@color/navigationBarColor</ item >
   < item name = " android:windowDrawsSystemBarBackgrounds " tools : targetApi = " 21 " >true</ item >

</ style >

< style name = " AppTheme.ActionBarTheme " parent = " @style/ThemeOverlay.AppCompat.ActionBar " >
    <!-- White arrow -->
    < item name = " colorControlNormal " >@android:color/white</ item >
</ style >

< style name = " DrawerArrowStyle " parent = " Widget.AppCompat.DrawerArrowToggle " >
    < item name = " spinBars " >true</ item >
    < item name = " color " >@color/drawerArrowColor</ item >
</ style >

Rufen Sie den MaterialViewPager ab

Sie können MaterialViewPager als normale Android-Ansicht verwenden und über findViewById abrufen 

 public class MainActivity extends ActionBarActivity {

    private MaterialViewPager mViewPager ;

    @ Override
    protected void onCreate ( Bundle savedInstanceState ) {
        super . onCreate ( savedInstanceState );
        setContentView ( R . layout . activity_main );

        mViewPager = ( MaterialViewPager ) findViewById ( R . id . materialViewPager );
    }
}

Anpassung

Wählen Sie zunächst Ihre Farbe und Höhe 

< com .github.florent37.materialviewpager.MaterialViewPager
        android : id = " @+id/materialViewPager "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent "
        ...
        app : viewpager_color = " @color/colorPrimary "
        app : viewpager_headerHeight = " 200dp "
        ...
        />

Legen Sie Ihr Logo fest 

< com .github.florent37.materialviewpager.MaterialViewPager
        ...
        app : viewpager_logo = " @layout/header_logo " <-- look custom logo layout
        app : viewpager_logoMarginTop = " 100dp " <-- look at the preview
        ...
        />

Titelleisten-Logo

Das Layout Ihres Logos muss

  • layout_height="@dimen/materialviewpager_logoHeight"

header_logo.xml 

< ImageView xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/logo_white "
    android : layout_width = " 200dp "
    android : layout_height = " @dimen/materialviewpager_logoHeight "
    android : fitsSystemWindows = " true "
    android : adjustViewBounds = " true "
    android : layout_centerHorizontal = " true "
    android : src = " @drawable/logo_white " />
< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideLogoWithFade = " false "
        ...
        />

Verblassendes Logo

header_logo.xml 

< FrameLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    android : layout_width = " 80dp "
    android : layout_height = " 80dp "
    android : layout_centerHorizontal = " true "
    android : background = " @drawable/circle " >

    < ImageView
        android : layout_width = " 30dp "
        android : layout_height = " 30dp "
        android : fitsSystemWindows = " true "
        android : adjustViewBounds = " true "
        android : layout_gravity = " center "
        android : src = " @drawable/flying " />
</ FrameLayout >
< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideLogoWithFade = " true "
        ...
        />

Symbolleistenanimation

Logo und Symbolleiste ausblenden 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideToolbarAndTitle = " true "
        ...
        />

Sticky-Symbolleiste 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideToolbarAndTitle = " false "
        ...
        />

Transparente Symbolleiste 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_transparentToolbar = " true "
        ...
        />

Header-Layout

Sie können den Header ersetzen 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_header = " @layout/myHeader "
        ...
        />

Kopfzeile verschieben

Oder verwenden Sie den Standard-Header mit einer KenBurns-Animation 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_animatedHeaderImage = " true "
        ...
        />

Statischer Header

Oder verwenden Sie einfach eine ImageView als Header 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_animatedHeaderImage = " false "
        ...
        />

Benutzerdefinierte Tab-Leiste

Sie können Ihre eigene Tab-Leiste festlegen. Standardmäßig habe ich zwei Implementierungen bereitgestellt

Standard 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_pagerTitleStrip = " @layout/material_view_pager_pagertitlestrip_standard "
        ...
        />

Zeitungskiosk 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_pagerTitleStrip = " @layout/material_view_pager_pagertitlestrip_newstand "
        ...
        />

Oder erstellen Sie Ihre eigene Tab-Leiste

Erstellen Sie Ihr eigenes Layout mit einem PagerSlidingTabStrip

my_tabs.xml 

< com .astuetz.PagerSlidingTabStrip
    xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : app = " http://schemas.android.com/apk/res-auto "
    xmlns : tools = " http://schemas.android.com/tools "
    android : id = " @id/materialviewpager_pagerTitleStrip "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent "
    app : pstsPaddingMiddle = " true "
    app : pstsDividerPadding = " 20dp "
    app : pstsIndicatorColor = " #FFF "
    app : pstsIndicatorHeight = " 2dp "
    app : pstsShouldExpand = " true "
    app : pstsTabPaddingLeftRight = " 10dp "
    app : pstsTabTextAllCaps = " true "
    tools : background = " #A333 "
     />

Vergessen Sie nicht, id="@id/materialviewpager_pagerTitleStrip" anzugeben. 

< com .github.florent37.materialviewpager.MaterialViewPager
        ...
        app : viewpager_pagerTitleStrip = " @layout/my_tabs "
        ...
        />

Kopfzeile animieren

Fügen Sie einfach eine Anhörung zum ViewPager hinzu 

 mViewPager . setMaterialViewPagerListener ( new MaterialViewPager . Listener () {
            @ Override
            public HeaderDesign getHeaderDesign ( int page ) {
                switch ( page ) {
                    case 0 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . blue ,
                                "http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg" );
                    case 1 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . green ,
                                "https://fs01.androidpit.info/a/63/0e/android-l-wallpapers-630ea6-h900.jpg" );
                    case 2 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . cyan ,
                                "http://www.droid-life.com/wp-content/uploads/2014/10/lollipop-wallpapers10.jpg" );
                    case 3 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . red ,
                                "http://www.tothemobile.com/wp-content/uploads/2014/07/original.jpg" );
                }

                //execute others actions if needed (ex : modify your header logo)

                return null ;
            }
        });

Verfügbar 

 HeaderDesign . fromColorAndUrl ( Color . BLUE , "http:...);
HeaderDesign.fromColorResAndUrl(R.color.blue," http :...);
HeaderDesign . fromColorAndDrawable ( Color . BLUE , myDrawable );
HeaderDesign . fromColorResAndDrawable ( R . color . blue , myDrawable );

Symbolleiste 

 Toolbar toolbar = mViewPager . getToolbar ();

if ( toolbar != null ) {
     setSupportActionBar ( toolbar );

     ActionBar actionBar = getSupportActionBar ();
     actionBar . setDisplayHomeAsUpEnabled ( true );
     actionBar . setDisplayShowHomeEnabled ( true );
     actionBar . setDisplayShowTitleEnabled ( true );
     actionBar . setDisplayUseLogoEnabled ( false );
     actionBar . setHomeButtonEnabled ( true );
}

ViewPager 

 ViewPager viewPager = mViewPager . getViewPager ();
viewPage . setAdapter (...);

//After set an adapter to the ViewPager
mViewPager . getPagerTitleStrip (). setViewPager ( mViewPager . getViewPager ());

RecyclerView 

 mRecyclerView . addItemDecoration ( new MaterialViewPagerHeaderDecorator ());
mRecyclerView . setAdapter ( yourAdapter );

ScrollView

Die ScrollView muss eine NestedScrollView sein 

 MaterialViewPagerHelper . registerScrollView ( getActivity (), mScrollView , null );

Und fügen Sie „@layout/material_view_pager_placeholder“ als erstes untergeordnetes Element ein 

< android .support.v4.widget.NestedScrollView
    xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/scrollView "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < LinearLayout
        android : layout_width = " match_parent "
        android : layout_height = " wrap_content "
        android : orientation = " vertical " >

        < include layout = " @layout/material_view_pager_placeholder " />

        ...your content...

    </ LinearLayout >
</ android .support.v4.widget.NestedScrollView>

CHANGELOG

1.2.0

  • Header-Dekorator statt Adapter

1.1.3

  • Die Kopfzeile ist jetzt anklickbar
  • Einige Probleme beim Scrollen wurden behoben

1.1.2

  • Schnelle Scroll-Korrektur
  • kann einen benutzerdefinierten Viewpager mit app:viewpager_viewpager festlegen (die Viewpager-ID muss id/materialviewpager_viewpager sein)

1.1.0

  • Korrektur der Ausrichtungsänderung
  • Fehlerbehebung bei der Anzeige von Header-Bildern
  • Elemente in der Kopfzeile sind jetzt anklickbar
  • notifyHeaderChanged

1.0.8

  • Attribut viewpager_disableToolbar hinzugefügt

1.0.7

  • Fehler bei niedrigen Auflösungen beheben

1.0.6

  • Attribut transparentToolbar hinzugefügt
  • Attribut „animatedHeaderImage“ hinzugefügt
  • Fehler behoben, wenn die Seite zu klein zum Scrollen ist
  • modifizierte HeaderDesign-Implementierung

1.0.5

  • Reibungsloseres Scrollen in der Symbolleiste
  • Fehler mit fitSystemWindow behoben
  • HeaderDesign hinzugefügt, um die Farbe und das Bild der Kopfzeile zu ändern
  • displayToolbarWhenSwipe-Attribut hinzugefügt

1.0.4

Behoben:

  • Ausrichtung geändert
  • Speicherleck
  • Android >2.3 mit NineOldAndroid
  • ListView-Nutzung entfernt

1.0.3

Behoben: Schnelles Scrollen führt zu unterschiedlichen Symbolleistenhöhen

RecyclerViewMaterialAdapter kann eine benutzerdefinierte Anzahl von Platzhalterzellen verarbeiten (nützlich für GridLayoutManager). 

 public RecyclerViewMaterialAdapter ( RecyclerView . Adapter adapter , int placeholderSize )

1.0.2

Attribute hinzugefügt 

 app : viewpager_parallaxHeaderFactor = "1.5"
app : viewpager_headerAdditionalHeight = "20dp"

parallaxHeaderFactor Ändert die Geschwindigkeit des Parallax-Header-Scrollens (nicht die Geschwindigkeit des KenBurns-Effekts). parallaxHeaderFactor Legt die Höhe des Header-Layouts fest, das hinter der ersten Kartenansicht angezeigt wird

Problem behoben, das auftrat, wenn mehrmals nach unten und nach oben gescrollt wurde, während hideToolbarAndTitle="true" war.

1.0.1

Attribute hinzugefügt 

 viewpager_headerAlpha = "0.6"

Gemeinschaft

Auf der Suche nach Mitwirkenden, zögern Sie nicht zu forken!

Sagen Sie mir, ob Sie meine Bibliothek in Ihrer Anwendung verwenden. Ich werde sie in dieser README-Datei mitteilen

Abhängigkeiten

  • Glide (von Bumptech)
  • KenBurnsView (von flavioarfaria)
  • Material PagerSlidingTabStrip (von jpardogo, gegabelt von astuetz)

Credits

Autor: Florent Champigny http://www.florentchampigny.com/

Blog: http://www.tutos-android-france.com/

Fiches Plateau Moto: https://www.fiches-plateau-moto.fr/

Lizenz 

 Copyright 2015 florent37, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle