1.效果图(用来和Viewpager结合使用来作为Viewpager的选项卡。)
2.使用方式
builde.gride文件中添加下面的依赖，compile'com.android.support:design:22.2.0'//可修改版本号为对应的buildToolsVersion版本,然后就可以使用该控件了。
3.源码
源码非常简单，定义好需要的fragment集合，标题结合，定义好适配器，并使用setupWithViewPager建立TabLayout与ViewPager之间的关系
xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/my_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:scrollbars="none">
<android.support.design.widget.TabLayout
android:id="@+id/my_tab"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#ffffff"
android:paddingBottom="4dp"
app:tabIndicatorColor="#33CEFF"
app:tabMaxWidth="120dp"
app:tabMinWidth="60dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#000000"
app:tabTextAppearance="@android:style/TextAppearance.Holo.Inverse"
app:tabTextColor="#FF666666"/>
</android.support.v4.view.ViewPager>
</LinearLayout>
几个重要的属性:
app:tabIndicatorColor 设置指示器的颜色
app:tabMaxWidth 设置每一个标题的最大宽度
app:tabMinWidth 设置每一个标题的最小宽度
app:tabMode 设置标题是否可滑动 属性值有fixed或者scrollable
app:tabTextColor 设置标题文本颜色
其他属性参考谷歌官方文档https://developer.android.com/reference/android/support/design/widget/TabLayout.html
适配器
package demo.xzy.qh.com.tablayoutdemo;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* Company:QIHAN TECH
* Date:2017/6/30
* Author:Created by XuZhuYun
* Describe:适配器
*/
public class PagerAdapter extends FragmentPagerAdapter {
private Fragment[] mFragments;
private String[] mTitles;
public PagerAdapter(FragmentManager fm, Fragment[] mFragments, String[] mTitles) {
super(fm);
this.mFragments = mFragments;
this.mTitles = mTitles;
}
/**
* 返回每一个标题
*
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
/**
* 返回每一个fragment
*
* @param position
* @return
*/
@Override
public Fragment getItem(int position) {
return mFragments[position];
}
@Override
public int getCount() {
return mFragments.length;
}
}
ViewPager和TabLayout建立关系
package demo.xzy.qh.com.tablayoutdemo;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
/**
* 测试TabLayout结合ViewPager使用实现TabPageIndicator(左右滑动)用法
* 谷歌官方文档
* https://developer.android.com/reference/android/support/design/widget/TabLayout.html
*/
public class MainActivity extends FragmentActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
//左右滑动的标题
private String[] mTitles = {"推荐", "热点", "图片", "科技", "军事", "段子", "问答"};
//每个标题对应的Fragment
private Fragment[] mFragments = new Fragment[mTitles.length];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout) findViewById(R.id.my_tab);
mViewPager = (ViewPager) findViewById(R.id.my_vp);
for (int i = 0; i < mFragments.length; i++) {
mFragments[i] = new MyFragment(this, i);
}
//如果是Fragment,调用mViewPager.setAdapter(new PagerAdapter(getFragmentManager(), mFragments, mTitles));
mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager(), mFragments, mTitles));
//通过setupWithViewPager方法使得TabLayout与ViewPager建立关系
mTabLayout.setupWithViewPager(mViewPager);
//如果要监听左右滑动事件，实现TabLayout.OnTabSelectedListener接口即可。
}
}
TabLayout.OnTabSelectedListener接口
实现该接口可以监听左右滑动事件
4.完整demo
http://download.csdn.net/detail/jdfkldjlkjdl/9894382
另外，关于TabLayout讲解比较详细的文章
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html
谷歌官方文档
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
