Android 5.0新控件 Tablayout | 导航栏 介绍及使用详情
extends HorizontalScrollView
TabLayout provides a horizontal layout to display tabs.
Google官方对这个控件的大概意思是一个横向的布局标签
我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求。但是google发布了新的Android Support Design库,里面包含了几个新的控件,TabLayout就是其中一个,它就可以完成TabPageIndicator的效果,废话不多说,先上图
使用方法
- TabLayout来自design兼容包,使用需要添加依赖。android studio 添加依赖如下:
dependencies {
compile ‘com.android.support:design:24.2.0‘
}
首先,我们先来实现一个最简单的tablayout
Step1
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Step2
public class PlayTabLayout extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
}
}
- 效果图
这两步就可以实现一个简单的Tablayout滑动标签,so easy!But,通常我们使用滑动标签逗搭配Viewpager来使用,看看如何实现
Step1
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
(fixed)默认固定的选项卡同时显示所有选项卡,(scrollable)可滚动选项卡并且可以包含较长的选项卡标签和更大数量
app:tabMode="scrollable"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
Step2
public class PlayTabLayout extends AppCompatActivity {
private List<String> mList = new ArrayList<String>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
for (int i = 1; i <= 8; i++) {
mList.add("tab" + i);
}
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mList);
viewPager.setAdapter(adapter);
//将view pager与tablayout关联起来
tabLayout.setupWithViewPager(viewPager);
}
}
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private List<String> mList;
public MyFragmentPagerAdapter(FragmentManager fm, List<String> list) {
super(fm);
this.mList = list;
}
@Override
public Fragment getItem(int position) {//加载的Fragment
return new PageFragment();
}
@Override
public int getCount() {//标签页数
return mList.size();
}
@Override
public CharSequence getPageTitle(int position) {//标签标题
return mList.get(position);
}
}
PageFragment就是一个空白的Fragment
效果图(这是没有设置tabMode时的样子,默认显示的模式是 fixed 固定的选项卡同时显示所有选项卡)
- 效果图 (这是设置tabMode为scrollable的样子)
到这里最基础的搭配使用就ok了,下面贴上一些可以自己定制需求常用的方法
设置游标的颜色
setSelectedTabIndicatorColor(int color)
设置游标的高度 0就是没有
setSelectedTabIndicatorHeight(int height)
设置tablayout标签的模式 (fixed)默认固定的选项卡同时显示所有选项卡,(scrollable)可滚动选项卡并且可以包含较长的选项卡标签和更大数量
setTabMode()
设置tab标签文字颜色
setTabTextColors()
遇到的问题
Question1:如果Tablayout和viewpager一起使用,tabLayout.addTab添加的标题就会失效!
- 效果图
查看谷歌的文档发现,Tablayout会默认执行setTabsFromPagerAdapter,这个方法的效果是从给定的PagerAdapter填充我们的标签内容,
任何现有的选项卡将被首先删除。 每个选项卡将其文本设置为从getPageTitle(int)返回的值简单来说Tablayout和viewpager一起使用,标签的标题需要在pageradapter中的getPageTiele方法返回
@Override
public CharSequence getPageTitle(int position) {//标签标题
return "标题";
}
完整代码点我下载
Thank you
- 以上仅本人学习中遇到的问题,如有更多意见欢迎随时交流 issues
- email:coderguoy@gmail.com