通过使用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>
才可以去掉阴影。