Material 风格的ViewPager库：MaterialViewPager
jopen
9年前
介绍：
易于使用的Material 风格的ViewPager库
运行效果：
使用说明：
APK下载 : Link
从实际效果来看，还有改进的空间
油Tube 演示视频: 油Tube Link
将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_hideLogoWithFade="true" app:viewpager_hideToolbarAndTitle="true" app:viewpager_enableToolbarElevation="true" />
这样就可以在 Android Studio 看到预览效果:
像普通的view一样通过findView获得：
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" ... />
设置logo
<com.github.florent37.materialviewpager.MaterialViewPager ... app:viewpager_logo="@layout/header_logo" <-- look custom logo layout app:viewpager_logoMarginTop="100dp" <-- look at the preview ... />
Titlebar Logo
logo的高度必须是
-
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" ... />
Fading 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" ... />
oolbar 动画
隐藏Logo 和 Toolbar
<com.github.florent37.materialviewpager.MaterialViewPager` ... app:hideToolbarAndTitle="true" ... />
Sticky Toolbar
<com.github.florent37.materialviewpager.MaterialViewPager` ... app:hideToolbarAndTitle="false" ... />
自定义 Tab Bar
你可以设置自己的tab bar，默认提供了两种实现：
标准的
<com.github.florent37.materialviewpager.MaterialViewPager` ... app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_standard" ... />
News Stand
<com.github.florent37.materialviewpager.MaterialViewPager` ... app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_newstand" ... />
或者自己创建 Tab Bar
使用 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:pstsTextAllCaps="true" tools:background="#A333" />
别忘了加上 id="@id/materialviewpager_pagerTitleStrip"
<com.github.florent37.materialviewpager.MaterialViewPager` ... app:viewpager_pagerTitleStrip="@layout/my_tabs" ... />