Android TabLayout的使用(ViewPager添加标题)

效果图

上方的指示器用到的就是TabLayout 下方是一个ViewPager ViewPager内的数据为fragment

东西就这么多，先看下布局：

先看下如何引用TabLayout

布局的选择控件界面选择Design>TabLayout，需要添加这个依赖，之后就是布局的内容

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.tablayoutdemo.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="50dp"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager> </LinearLayout>

布局代码就两个控件，TabLayout 、ViewPager。 需要用到Fragment，接下来写我们的fragment

fragment代码

public class PagerFramgent extends android.support.v4.app.Fragment { private int a; /** * 创建一个静态实例化Fragment的方法 * @param a 外界传入的值 * @return */ public static PagerFramgent newInstance(int a){ PagerFramgent pf=new PagerFramgent(); Bundle bundle= new Bundle(); bundle.putInt("a",a); //向fragment中传值，使用此方法，不用使用有参构造方法 pf.setArguments(bundle); return pf; } String tag=null; @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); //取出保存的值 this.a=getArguments().getInt("a"); //获取类名 tag=this.getClass().getSimpleName(); //log生命周期 Log.e(tag,"onCreate"); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //加载一个布局，布局中只有一个textview View view=inflater.inflate(R.layout.fragment,container,false); TextView textView= (TextView) view.findViewById(R.id.textView); //设置文本，将传进来的值设置进去 textView.setText(a+""); Log.e(tag,"onCreateView"); return view; }

上面的就是普通的fragment的创建过程。其中fragment传值为什么不能通过有参构造方法请看博客：为什么要用Fragment.setArguments(Bundle bundle)来传递参数 其它就挺简单的了，好了接下来就是ViewPager要用到的适配器了

适配器

public class MyAdapter extends FragmentPagerAdapter{ List<PagerFramgent> list; public MyAdapter(FragmentManager fm) { super(fm); //创建集合用来保存fragment对象 list=new ArrayList<>(); } public void add(PagerFramgent framgent){ list.add(framgent); } //当前页数据 @Override public Fragment getItem(int position) { return list.get(position); } //获取pager数量 @Override public int getCount() { return list.size(); } //重写父类的destroyItem方法，什么都不要写，避免viewpager销毁fragment @Override public void destroyItem(ViewGroup container, int position, Object object) { } //添加标题 @Override public CharSequence getPageTitle(int position) { //返回的标题是之前传的值 return list.get(position).getArguments().getInt("a")+""; } }

这边就是一个自定义FragmentPagerAdapter的列子了，其中为了避免ViewPager将fragment对象给销毁，重写了一个空的destroyItem方法 ViewPager和fragment结合使用不想fragment被不断销毁可以查看：ViewPager防止Fragment销毁以及取消Fragment的预加载

主界面代码

public class MainActivity extends AppCompatActivity { private ViewPager vp; private TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vp = (ViewPager) findViewById(R.id.vp); tabLayout= (TabLayout) findViewById(R.id.tab); //实例化适配器 MyAdapter adapter=new MyAdapter(getSupportFragmentManager()); for (int i=0;i<20;i++){//循环添加数据 adapter.add(PagerFramgent.newInstance(i)); } //viewpager设置适配器 vp.setAdapter(adapter); //设置预加载的数量当然这个值越小越好 vp.setOffscreenPageLimit(2); //给TabLayout设置ViewPager tabLayout.setupWithViewPager(vp); //设置Mode样式 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

其中TabLayout.MODE_SCROLLABLE适配Tab较多的时候， TabLayout.MODE_FIXED适合较少的tab（会在一个屏幕中显示所有的tab） 这个时候你就可以运行下看到效果了。当然这里都是默认的样式。

改变Tab显示的样式

//通过下标得到对应位置的Tab对象 TabLayout.Tab tab = tabLayout.getTabAt(0); //给tab设置图标（当然还有文本、颜色等） tab.setIcon(R.mipmap.ic_launcher); //设置指示器的颜色 tabLayout.setSelectedTabIndicatorColor(Color.BLUE); //再获得一个Tab对象 TabLayout.Tab tab1 = tabLayout.getTabAt(1); //设置显示的View tab1.setCustomView( R.layout.tabview);

这里呢就是需要通过TabLayout的内部类Tab来进行设置，（除了设置指示器颜色）

ok，大功告成，其中fragment的生命周期大家可以观察一下，设置与不设置之前的区别，来观察fragment销毁新建。

最后的最后，个人淘宝店（抱歉，请见谅）。。霓裳雅阁