Página Inicial>Relacionado com a programação>Código fonte JAVA
Baixar

MaterialViewPager

Biblioteca fácil de usar do Material Design ViewPager

Amostra

E dê uma olhada em um exemplo de vídeo do Youtube: Link do Youtube

Download

No seu módulo 

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 '

Uso

Adicione MaterialViewPager ao layout da sua atividade 

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

    />

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

Você verá no Android Studio Preview:

Para obter uma tela bonita e ativar a visualização, seu tema pode seguir 

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

Recuperar o MaterialViewPager

Você pode usar MaterialViewPager como uma visualização normal do Android e obtê-lo por 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 );
    }
}

Personalização

Primeiro escolha sua cor e altura 

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

Defina seu logotipo 

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

Logotipo da barra de título

O layout do seu logotipo deve

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

Logotipo desbotado

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

Animação da barra de ferramentas

Ocultar logotipo e barra de ferramentas 

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

Barra de ferramentas fixa 

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

Barra de ferramentas transparente 

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

Layout do cabeçalho

Você pode substituir o cabeçalho 

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

Movendo Cabeçalho

Ou use o cabeçalho padrão, com uma animação KenBurns 

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

Cabeçalho estático

Ou simplesmente use um ImageView como cabeçalho 

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

Barra de guias personalizadas

Você pode definir sua própria barra de guias, por padrão forneci 2 implementações

Padrão 

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

Banca de jornais 

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

Ou crie sua própria barra de guias

Crie seu próprio layout usando um PagerSlidingTabStrip

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

Não se esqueça de fornecer id="@id/materialviewpager_pagerTitleStrip" 

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

Animar cabeçalho

Basta adicionar um listen ao 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 ;
            }
        });

Disponível 

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

Barra de ferramentas 

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

RecicladorView 

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

ScrollView

O ScrollView deve ser um NestedScrollView` 

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

E inclua @layout/material_view_pager_placeholder` como primeiro filho 

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

REGISTRO DE ALTERAÇÕES

1.2.0

  • decorador de cabeçalho em vez de adaptador

1.1.3

  • o cabeçalho agora é clicável
  • corrigiu alguns problemas de rolagem

1.1.2

  • correção de rolagem rápida
  • pode definir um viewpager personalizado com app:viewpager_viewpager (o ID do viewpager deve ser id/materialviewpager_viewpager)

1.1.0

  • correção de mudança de orientação
  • correção de exibição de imagem de cabeçalho
  • elementos no cabeçalho agora são clicáveis
  • notifyHeaderChanged

1.0.8

  • adicionado atributo viewpager_disableToolbar

1.0.7

  • corrigir bug em resoluções baixas

1.0.6

  • adicionado atributo transparenteToolbar
  • adicionado atributo animadoHeaderImage
  • bug corrigido quando a página é muito pequena para rolar
  • implementação de HeaderDesign modificada

1.0.5

  • rolagem mais suave da barra de ferramentas
  • bug corrigido com fitSystemWindow
  • adicionado HeaderDesign para modificar a cor e imagem do cabeçalho
  • adicionado atributo displayToolbarWhenSwipe

1.0.4

Fixo :

  • Orientação alterada
  • Vazamento de memória
  • Android >2.3 com NineOldAndroid
  • Uso de ListView removido

1.0.3

Corrigido: a rolagem rápida resulta em variação na altura da barra de ferramentas

RecyclerViewMaterialAdapter pode lidar com uma contagem de células de espaço reservado personalizado (útil para GridLayoutManager) 

 public RecyclerViewMaterialAdapter ( RecyclerView . Adapter adapter , int placeholderSize )

1.0.2

Atributos adicionados 

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

parallaxHeaderFactor Modifica a velocidade de rolagem do cabeçalho de paralaxe (não a velocidade do efeito KenBurns) parallaxHeaderFactor Define a altura do layout do cabeçalho exibido atrás da primeira visualização dos cartões

Corrigido problema ao rolar para baixo e rolar para cima várias vezes enquanto hideToolbarAndTitle="true"

1.0.1

Atributos adicionados 

 viewpager_headerAlpha = "0.6"

Comunidade

Procurando por contribuidores, fique à vontade para fazer um fork !

Diga-me se você está usando minha biblioteca em sua aplicação, vou compartilhá-la neste README

Dependências

  • Deslizar (da Bumptech)
  • KenBurnsView (de flavioarfaria)
  • Material PagerSlidingTabStrip (de jpardogo, bifurcado de astuetz)

Créditos

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

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

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

Licença 

 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.
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos