使用fragment+TabLayout+Viewpager实现页卡式界面

通过使用design库中的控件TabLayout，并将TabLayout与ViewPager绑定，Fragment作为ViewPager的装填内容，可以通过点击不同页卡项或左右滑动切换fragment

实现效果如下：

实现过程：

1.创建需显示的fragment和fragment的layout

2.创建MyFragmentPagerAddapter类继承于FragmentPagerAdapter，创建一个titles数组，数组内容为页卡标题，

1）重写

@Override

public CharSequence getPageTitle(intposition){

return  titles[position];

}

将标题内容返回给adapter；

2）重写getItem()，将fragment根据position返回给viewpager，注意进行null的检测，不要一味的创建新实例；

3）重写getCount() ,返回titles.length.

3.在需显示的activity的layout中放置android.support.design.weight.TabLayout和viewpager

tablayout有如下参数可进行调整

<android.support.design.widget.TabLayout

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="40dp"

<!--tablayout背景-->

android:background="@color/colorPrimary"

<!-- 选中的项目下方指示条颜色-->

app:tabIndicatorColor="#66ff33"

 <!--指示条高度 -->

app:tabIndicatorHeight="3dp"

<--未选中文字颜色 -->

app:tabTextColor="#ffffff"

<!--选中文字颜色-->

app:tabSelectedTextColor="#000000"

<!--scrollable可滑动，fixed不可滑动并平均分配每个项目距离-->

app:tabMode="fixed"

<!--文字大小-->

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>

4.在activiry中通过

myFragmentPagerAdapter=newMyFragmentPagerAdapter(getSupportFragmentManager());

获取fragmentpageradapter对象，使用viewpager的setAdapter()与之绑定

5.通过tabLayout.setupWithViewPager(viewPager);将tablayout与viewpager绑定

6.新建Tablayout.Tab对象，通过

signInTab=tabLayout.getTabAt(0);

articleTab=tabLayout.getTabAt(1);

notifyTab=tabLayout.getTabAt(2);

指定tab的位置

7.注意在5.0后的默认主题下，toolbar默认的阴影会和tablayout影响，需要选择noActionBar主题，在layout中设置

<android.support.design.widget.AppBarLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:elevation="0dp"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v7.widget.Toolbar>

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

才可以去掉阴影。