Material Design : Parallax Scrolling Tabs

原文地址:http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/

先上效果图:
Demo

该效果基本就是前2篇文章的结合,不过还是有点区别的,比如标题栏只能固定在上面,不能像第一篇那样从大变小。这是有原因。

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@mipmap/header"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleMarginTop="13dp" />

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="@android:color/white" />

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

比起第一篇文章就是相当于CollapsingToolbarLayout里面添加了一个TabLayout。但是这里还是有些蹊跷的。比如设置了toolbar的高度为104dp=toolbar 56dp + tabs 高度48dp。其实在xml的preview预览图一个一个点能看出toolbar,tablayout的排列布局顺序。看原作者画的图

jiexi

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Parallax Tabs");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
setupViewPager(viewPager);

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.header2);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
int vibrantColor = palette.getVibrantColor(getResources().getColor(R.color.colorPrimary));
int vibrantDarkColor = palette.getDarkVibrantColor(getResources().getColor(R.color.colorPrimaryDark));
collapsingToolbarLayout.setContentScrimColor(vibrantColor);
collapsingToolbarLayout.setStatusBarScrimColor(vibrantDarkColor);
}
});

好多代码跟前面2篇都有重复,这里说一下几个注意点的,collapsingToolbarLayout.setTitleEnabled(false)这里,我们把第一篇中的大字体取消作为标题了,而是用toolbar的getSupportActionBar().setTitle("Parallax Tabs");作为标题,至于为什么,你试一下就知道了。然后后面用Palette取图片中的颜色来设置toolbar和status bar的颜色。

最后主题上面要在values-v21里面为当前的activity建一个statusbar透明的属性:

1
2
3
<style name="Detail" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

完成。Github源代码