MaterialViewPager下载 - MaterialViewPager源码下载

材质视图分页器

Material Design ViewPager 易于使用的库

样本

并观看示例 Youtube 视频：Youtube 链接

下载

在你的模块中

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 '

用法

将 MaterialViewPager 添加到您的 Activity 布局中

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

    />

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

您将在 Android Studio 预览版中看到：

要获得漂亮的屏幕并启用预览，您的主题可以遵循

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

检索 MaterialViewPager

您可以将MaterialViewPager用作通常的Android View，并通过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 );
    }
}

定制化

首先选择你的颜色和高度

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

设置您的徽标

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

标题栏标志

您的徽标的布局必须

布局高度=“@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 "
        ...
        />

褪色标志

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

工具栏动画

隐藏徽标和工具栏

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

粘性工具栏

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

透明工具栏

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

标题布局

您可以替换标题

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

移动标题

或者使用默认标题和 KenBurns 动画

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

静态标头

或者简单地使用 ImageView 作为标题

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

自定义标签栏

你可以设置自己的标签栏，默认我提供了2个实现

标准

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

报摊

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

或者创建您自己的标签栏

使用 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 "
     />

不要忘记给它 id="@id/materialviewpager_pagerTitleStrip"

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

动画标题

只需添加一个监听到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 ;
            }
        });

可用的

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

工具栏

 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 = mViewPager . getViewPager ();
viewPage . setAdapter (...);

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

回收视图

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

滚动视图

ScrollView 必须是 NestedScrollView`

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

并将 @layout/material_view_pager_placeholder` 作为第一个子项

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

变更日志

1.2.0

标头装饰器而不是适配器

1.1.3

标题现在可以点击
修复了一些滚动问题

1.1.2

快速滚动修复
可以使用 app:viewpager_viewpager 设置自定义 viewpager （viewpager id 必须是 id/materialviewpager_viewpager）

1.1.0

方向改变修复
修复标题图片显示问题
标题上的元素现在可以单击
通知标题更改

1.0.8

添加属性 viewpager_disableToolbar

1.0.7

修复低分辨率下的bug

1.0.6

添加属性透明工具栏
添加属性animatedHeaderImage
修复了页面太小无法滚动时的错误
修改后的 HeaderDesign 实现

1.0.5

工具栏滚动更流畅
修复了 fitSystemWindow 的错误
添加了 HeaderDesign 来修改标题颜色和图像
添加了 displayToolbarWhenSwipe 属性

1.0.4

固定的：

方向改变了
内存泄漏
Android >2.3 与 NineOldAndroid
删除了 ListView 的使用

1.0.3

已修复：快速滚动会导致工具栏高度变化

RecyclerViewMaterialAdapter 可以处理自定义占位符单元格计数（对于 GridLayoutManager 很有用）

 public RecyclerViewMaterialAdapter ( RecyclerView . Adapter adapter , int placeholderSize )

1.0.2

新增属性

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

parallaxHeaderFactor修改视差标题滚动的速度（不是 KenBurns 效果的速度） parallaxHeaderFactor设置显示在第一个卡片视图后面的标题布局的高度

修复了当 hideToolbarAndTitle="true" 时向下滚动和向上滚动多次时的问题

1.0.1

新增属性

 viewpager_headerAlpha = "0.6"

社区

寻找贡献者，请随意分叉！

告诉我您是否在应用程序中使用我的库，我将在此自述文件中分享它

依赖关系

Glide（来自 Bumptech）
KenBurnsView（来自 flavioarfaria）
Material PagerSlidingTabStrip（来自 jpardogo，从 astuetz 分叉）

制作人员

作者：弗洛伦特·尚皮尼 http://www.florentchampigny.com/

博客：http://www.tutos-android-france.com/

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

执照

 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.

展开