一、什么是TabLayout
1.以前使用TabHost。比如网易新闻客户端那样可以滑动的标题栏。
android.support.design.widget.TabLayout
使用场景:
TabLayout控件,切换Fragment
TabLayout+ViewPager+Fragment
二、使用
1.引入Design兼容包
2.布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.seasons.live.tablayout.TabLayoutActivity" >
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorPrimary_pink"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/colorPrimary_pinkDark"
app:tabTextColor="@color/colorPrimary_pink" />
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
属性:
app:tabIndicatorColor="@color/colorPrimary_pink"//指示器的颜色
app:tabTextColor="@color/colorPrimary_pink"//tab的文字颜色
app:tabSelectedTextColor="@color/colorPrimary_pinkDark"//选中的tab的文字颜色
app:tabMode="fixed"//scrollable:可滑动;fixed:不能滑动,平分tabLayout宽度
app:tabGravity="center"// fill:tabs平均填充整个宽度;center:tab居中显示
3.activity
final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
// 1.TabLayout和Viewpager关联
tabLayout.setOnTabSelectedListener(new OnTabSelectedListener() {
@Override
public void onTabUnselected(Tab arg0) {
// TODO Auto-generated method stub
}
@Override
public void onTabSelected(Tab tab) {
// 被选中的时候回调
viewPager.setCurrentItem(tab.getPosition(), true);
}
@Override
public void onTabReselected(Tab arg0) {
// TODO Auto-generated method stub
}
});
// 2.ViewPager滑动关联tabLayout
viewPager
.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(
tabLayout));
// 设置tabLayout的标签来自于PagerAdapter
tabLayout.setTabsFromPagerAdapter(adapter);
viewPager.setAdapter(adapter);
}
三、如何将TabLayout实现成底部导航的样子?
1.就把TabLayout放在布局底部
2.如何去掉底部的indicator,可以app:tabIndicatorHeight=”0dp”
3.实现自己的效果,比如
微信:设置自定义的标签布局
Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(view);