【开源】MaterialViewPager

MaterialViewPager

使用说明：

APK下载 : Link

从实际效果来看，还有改进的空间

Youtube 演示视频: Youtube Link

将MaterialViewPager添加到activity的布局中 

1
2
3
4
5
6
7
8
9
10
11
12
<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 看到预览效果:

68747470733a2f2f7261772e6769746875622e636f6d2f666c6f72656e7433372f4d6174657269616c5669657750616765722f6d61737465722f73637265656e73686f74732f707265766965775f736d616c6c2e706e67.png

 

像普通的view一样通过findView获得：

1
2
3
4
5
6
7
8
9
10
11
12
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);
    }
}

自定义

首先是颜色和高度

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
<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

687474703a2f2f73686172652e676966796f75747562652e636f6d2f796762716e412e676966.gif

logo的高度必须是

  • layout_height="@dimen/materialviewpager_logoHeight"

header_logo.xml

1
2
3
4
5
6
7
8
<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" />
1
2
3
4
5
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_hideLogoWithFade="false"
        ...
        />

Fading Logo

687474703a2f2f73686172652e676966796f75747562652e636f6d2f4b59623044342e676966.gif

header_logo.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
1
2
3
4
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...        app:viewpager_hideLogoWithFade="true"
        ...
        />

oolbar 动画

隐藏Logo 和 Toolbar

687474703a2f2f73686172652e676966796f75747562652e636f6d2f793556384a582e676966.gif

1
2
3
4
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...        app:hideToolbarAndTitle="true"
        ...
        />

Sticky Toolbar

687474703a2f2f73686172652e676966796f75747562652e636f6d2f796f326f4a6e2e676966.gif

1
2
3
4
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...        app:hideToolbarAndTitle="false"
        ...
        />

自定义 Tab Bar

你可以设置自己的tab bar，默认提供了两种实现：

标准的

687474703a2f2f73686172652e676966796f75747562652e636f6d2f4b646e6f5a582e676966.gif

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

News Stand

687474703a2f2f73686172652e676966796f75747562652e636f6d2f4b65626f4c702e676966.gif

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

或者自己创建 Tab Bar

使用 PagerSlidingTabStrip

my_tabs.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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"

1
2
3
4
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...        app:viewpager_pagerTitleStrip="@layout/my_tabs"
        ...
        />

 

相关代码

  • ParallaxPagerTransformer
  • DragTopLayout
  • freepager
  • MultiViewPager

posted on 2015-05-08 12:10  wasdchenhao  阅读(547)  评论(0)    收藏  举报

导航