Material Design : TabLayout

原文地址:http://blog.grafixartist.com/material-design-tabs-with-android-design-support-library/

Material Design 手把手教程又来了,炒鸡简单。废话不多说,哦不,上一篇文章发出后收到一个star!一个star!(这是回音),我的心情是非常的激动!那么你们知道这篇文章的意义吗?告诉你吧,可以看小说哦!有没有很激动?!先看效果图吧:

Demo2

直接上代码,首先是app/build.gradle依赖:

1
2
3
4
5
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:recyclerview-v7:25.1.0'
compile 'com.android.support:cardview-v7:25.1.0'
compile 'com.android.support:palette-v7:25.1.0'

先上布局的框架:

1
2
3
4
5
6
7
8
9
10
<android.support.design.widget.CoordinatorLayout >

<android.support.design.widget.AppBarLayout >
<android.support.v7.widget.Toolbar />
<android.support.design.widget.TabLayout />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager />

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

大致了解到这些组件都来源于android.support.design.widget这个库,具体的xml代码为:

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
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />


<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</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>

主要有2个地方注意的,第一个,Toolbar的layout_scrollFlags属性,scroll指定了toolbar要随着下面的东西向下滚动而滚动(就是滚了隐藏起来),然后enterAlways说,向上滚动的时候总是出现;另外一个就是ViewPager的layout_behavior属性,就是让viewPager配合滚动演出。你不加这个属性的话,上面的toolbar不会动的,就是在上面不会动!你肯定不爽吧!(别乱想哦)

接下来就是代码部分,不多,首先初始化:

1
2
3
4
5
6
7
8
9
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Material Style Tabs");

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

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

这里注意必须要先把viewPager的adapter加载上,然后再让tabLayout绑定viewPager。

上面的setupViewPager()方法如下:

1
2
3
4
5
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(Tab1Fragment.newInstance(), "One");
adapter.addFrag(Tab2Fragment.newInstance(), "Two");
adapter.addFrag(Tab3Fragment.newInstance(), "Three");
viewPager.setAdapter(adapter);

ViewPagerAdapter的代码点这里,就不贴了,一看就懂。

fragment是随便建的三个fragment,注意了,原文的fragment内容视图用的是recyclerview,如果这里用scrollview,向下滚动是无法让Toolbar向上隐藏的,这里用android.support.v4.widget.NestedScrollView可以实现。

好了,就这么简单!Github源代码