Page d'accueil>Lié à la programmation>Code source JAVA
Télécharger

MaterialViewPager

Bibliothèque facile à utiliser Material Design ViewPager

Échantillon

Et jetez un œil à un exemple de vidéo Youtube : Lien Youtube

Télécharger

Dans votre module 

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 '

Usage

Ajoutez MaterialViewPager à la mise en page de votre activité 

< 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 "

    />

avec 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 " />

Vous verrez sur Android Studio Preview :

Pour obtenir un bel écran et activer l'aperçu, votre thème peut suivre 

< 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 >

Récupérer le MaterialViewPager

Vous pouvez utiliser MaterialViewPager comme une vue Android habituelle et l'obtenir par findViewById 

 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 );
    }
}

Personnalisation

Choisissez d'abord votre couleur et votre hauteur 

< 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 "
        ...
        />

Définissez votre logo 

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

Logo de la barre de titre

La mise en page de votre logo doit

  • 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 "
        ...
        />

Logo décoloré

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 "
        ...
        />

Animation de la barre d'outils

Masquer le logo et la barre d'outils 

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

Barre d'outils collante 

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

Barre d'outils transparente 

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

Disposition de l'en-tête

Vous pouvez remplacer l'en-tête 

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

En-tête mobile

Ou utilisez l'en-tête par défaut, avec une animation KenBurns 

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

En-tête statique

Ou utilisez simplement un ImageView comme en-tête 

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

Barre d'onglets personnalisée

Vous pouvez définir votre propre barre d'onglets, par défaut j'ai fourni 2 implémentations

Standard 

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

Kiosque à journaux 

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

Ou créez votre propre barre d'onglets

Créez votre propre mise en page à l'aide d'un PagerSlidingTabStrip

mes_onglets.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 "
     />

N'oubliez pas de lui donner id="@id/materialviewpager_pagerTitleStrip" 

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

Animer l'en-tête

Ajoutez simplement une écoute au ViewPager 

 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 ;
            }
        });

Disponible 

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

Barre d'outils 

 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 );
}

AfficherPager 

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

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

RecycleurVoir 

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

Vue de défilement

Le ScrollView doit être un NestedScrollView` 

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

Et incluez @layout/material_view_pager_placeholder` comme premier enfant 

< 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>

JOURNAL DES CHANGEMENTS

1.2.0

  • décorateur d'en-tête au lieu de l'adaptateur

1.1.3

  • l'en-tête est désormais cliquable
  • correction de quelques problèmes de défilement

1.1.2

  • correction du défilement rapide
  • peut définir un viewpager personnalisé avec app:viewpager_viewpager (l'identifiant du viewpager doit être id/materialviewpager_viewpager)

1.1.0

  • correction du changement d'orientation
  • Correction de l'affichage de l'image d'en-tête
  • les éléments de l'en-tête sont désormais cliquables
  • notifyHeaderChanged

1.0.8

  • attribut ajouté viewpager_disableToolbar

1.0.7

  • correction d'un bug sur les basses résolutions

1.0.6

  • attribut ajouté transparentToolbar
  • attribut ajouté -animatedHeaderImage
  • correction d'un bug lorsque la page est trop petite pour défiler
  • implémentation modifiée de HeaderDesign

1.0.5

  • défilement plus fluide de la barre d'outils
  • bug corrigé avec fitSystemWindow
  • ajout de HeaderDesign pour modifier la couleur et l'image de l'en-tête
  • ajout de l'attribut displayToolbarWhenSwipe

1.0.4

Fixé :

  • Orientation modifiée
  • Fuite de mémoire
  • Android > 2.3 avec NineOldAndroid
  • Utilisation de ListView supprimée

1.0.3

Corrigé : le défilement rapide entraîne une hauteur variable de la barre d'outils

RecyclerViewMaterialAdapter peut gérer un nombre de cellules d'espace réservé personnalisé (utile pour GridLayoutManager) 

 public RecyclerViewMaterialAdapter ( RecyclerView . Adapter adapter , int placeholderSize )

1.0.2

Attributs ajoutés 

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

parallaxHeaderFactor Modifier la vitesse de défilement de l'en-tête de parallaxe (pas la vitesse de l'effet KenBurns) parallaxHeaderFactor Configurer la hauteur de la disposition de l'en-tête affichée derrière la première vue des cartes

Correction d'un problème lors du défilement vers le bas et vers le haut plusieurs fois pendant hideToolbarAndTitle="true"

1.0.1

Attributs ajoutés 

 viewpager_headerAlpha = "0.6"

Communauté

Vous recherchez des contributeurs, n'hésitez pas à forker !

Dites-moi si vous utilisez ma bibliothèque dans votre application, je la partagerai dans ce README

Dépendances

  • Glisser (de Bumptech)
  • KenBurnsView (de flavioarfaria)
  • Matériel PagerSlidingTabStrip (de jpardogo, dérivé d'astuetz)

Crédits

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

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

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

Licence 

 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.
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout