TabLayout的使用

引用TabLayout需要先导入design包

通常配合viewpager一起使用：

比如如下布局：

1. <LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
2.     android:layout_width=“match_parent”  
3.     android:layout_height=“match_parent”  
4.     xmlns:app=“http://schemas.android.com/apk/res-auto”  
5.     android:orientation=“vertical”>  
6.   
7.     <android.support.design.widget.TabLayout  
8.         android:id=“@+id/tab_FindFragment_title”  
9.         android:layout_width=“match_parent”  
10.         android:layout_height=“wrap_content”  
11.         android:background=“@color/titleBlue”  
12.         app:tabIndicatorColor=“@color/white”  
13.         app:tabSelectedTextColor=“@color/gray”  
14.         app:tabTextColor=“@color/white”  
15.         />  
16.   
17.   
18.     <android.support.v4.view.ViewPager  
19.         android:id=“@+id/vp_FindFragment_pager”  
20.         android:layout_width=“fill_parent”  
21.         android:layout_height=“0dp”  
22.         android:layout_weight=“1”  
23.         />  
24.   
25. </LinearLayout>  

tablayout可以放到屏幕任意位置，比如以下布局：

<?xml version="1.0" encoding="utf-8"?><ScrollView 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">   <LinearLayout      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:orientation="vertical">      <View         android:layout_width="match_parent"         android:layout_height="200dp" />      <!-- tabIndicator是在tablayout内部的？设置tabBackground相当于设置前景，如果想设置背景可以通过background -->      <android.support.design.widget.TabLayout         android:id="@+id/ac_tab_layout"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:tabBackground="@color/colorAccent"         app:tabIndicatorColor="#33aa22"         app:tabIndicatorHeight="2dp"         app:tabSelectedTextColor="#33ffff"         app:tabTextAppearance="@style/myTabText"         app:tabTextColor="#33aa22" />      <View         android:layout_width="match_parent"         android:layout_height="0dp"         android:background="#00f" />      <android.support.v4.view.ViewPager         android:id="@+id/ac_tab_vp"         android:layout_width="match_parent"         android:layout_height="300dp"         android:background="#f0f" />      <View         android:layout_width="match_parent"         android:layout_height="1000dp" />   </LinearLayout></ScrollView>

        app:tabIndicatorColor=”@color/white”                 // 下方滚动的下划线颜色
        app:tabSelectedTextColor=”@color/gray”               // tab被选中后，文字的颜色
        app:tabTextColor=”@color/white”                      // tab默认的文字颜色

tabIndicatorHeight：指示器高度，设置为0就可以隐藏

tabTextAppearance：指示器样式，可以在styles.xml中设置：

<!-- 通过这个style控制 tab中title的属性大小，默认颜色--><style name="myTabText" parent="TextAppearance.Design.Tab">    <item name="android:textSize">16sp</item>    <!-- 这个是设置title textview的默认颜色，如果也设置了tabTextColor，则以后者为准-->    <!--<item name="android:textColor">@color/tab_textcolor_normal</item>-->    <item name="textAllCaps">true</item></style>

给viewpager设置adpter，首先定义adpter：

private class TabPagerAdapter extends PagerAdapter {   @Override   public int getCount() {      return DATA.length;   }   @Override   public boolean isViewFromObject(View view, Object object) {      return view == object;   }   @Override   public Object instantiateItem(ViewGroup container, int position) {      View view = getLayoutInflater().inflate(R.layout.list, container, false);      ListView listView = (ListView) view.findViewById(R.id.listView);      ArrayAdapter<String> adapter = new ArrayAdapter<String>(TabLayoutActivity.this, android.R.layout         .simple_list_item_1, Arrays.copyOfRange(DATA, 0, position + 1));      listView.setAdapter(adapter);      container.addView(view);      return view;   }   @Override   public void destroyItem(ViewGroup container, int position, Object object) {      container.removeView((View) object);   }   /**    * 重写这个方法为tablayout设置title使用    * {@link TabLayout#setTabsFromPagerAdapter}    *    * @param position    * @return    */   @Override   public CharSequence getPageTitle(int position) {      return DATA[position];   }}

如果是viewpager嵌套fragment，使用fragmentpageradpter：

1. public class Find_tab_Adapter extends FragmentPagerAdapter {  
2.   
3.     private List<Fragment> list_fragment;                         //fragment列表  
4.     private List<String> list_Title;                              //tab名的列表  
5.   
6.   
7.   
8.     public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {  
9.         super(fm);  
10.         this.list_fragment = list_fragment;  
11.         this.list_Title = list_Title;  
12.     }  
13.   
14.     @Override  
15.     public Fragment getItem(int position) {  
16.         return list_fragment.get(position);  
17.     }  
18.   
19.     @Override  
20.     public int getCount() {  
21.         return list_Title.size();  
22.     }  
23.   
24.     //此方法用来显示tab上的名字  
25.     @Override  
26.     public CharSequence getPageTitle(int position) {  
27.   
28.         return list_Title.get(position % list_Title.size());  
29.     }  
30. }

给viewpager设置adpter，并把tablayout跟viewpager关联：

// 设置ViewPager的适配器viewPager.setAdapter(adapter);

// 设置从PagerAdapter中获取TabtabLayout.setTabsFromPagerAdapter(adapter);

// 关联viewpagertabLayout.setupWithViewPager(viewPager);

这样就可以在点击tab标签时底下viewpager联动，同时viewpager滑动时，标签页联动

同时，这样设置后，adpter中的getPageTitle也会回调，得到的标题会设置成tab页的标签

TabLayout可以手动设置点击监听，如果手动设置了监听，就要手动设置了监听，之前设置关联的默认监听行为就不起作用了，必须自己在点击相应tab的时候用代码滑动viewpager：

setOnTabSelectedListener

设置模式

tabLayout.setTabMode(TabLayout.MODE_FIXED);//tab不能滚动，平分屏幕宽度

// 设置TabLayout模式tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//tab可以滚动，tab宽度根据内容自动缩放

或者xml配置：

app:tabMode="scrollable"

tab页多的情况下，如果没有配置为scrollable模式，就会挤压在一起，设置为scroll模式则可以滚动并且选中的tab会自动居中

如果配置为scrollable，tab页很少，会出现不能充满全屏的情况（右侧留空白）

也可以不结合viewpager，自己控制tab的增加，定制tab点击事件：

<?xml version="1.0" encoding="utf-8"?><ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">        <!-- tabIndicator是在tablayout内部的？设置tabBackground相当于设置前景，如果想设置背景可以通过background -->        <android.support.design.widget.TabLayout            xmlns:app="http://schemas.android.com/apk/res-auto"            android:id="@+id/ac_tab_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:tabBackground="@color/colorAccent"            app:tabIndicatorColor="#33aa22"            app:tabIndicatorHeight="2dp"            app:tabSelectedTextColor="#33ffff"            app:tabTextAppearance="@style/myTabText"            app:tabTextColor="#33aa22"            app:tabMode="scrollable"/>        <FrameLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:id="@+id/content"/>    </LinearLayout></ScrollView>

package com.qf.zhouyi.tablayouttest;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.support.v7.app.AppCompatActivity;import java.util.ArrayList;import java.util.List;/** * Created by zhouyi on 16/9/6. */public class NoViewPagerActivity extends AppCompatActivity {    private List<Fragment> listFags;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_noviewpager);        listFags = new ArrayList<>();        listFags.add(new FragmentOne());        listFags.add(new FragmentThree());        listFags.add(new FragmentTwo());        FragmentManager manager = getSupportFragmentManager();        FragmentTransaction transaction = manager.beginTransaction();        transaction.replace(R.id.content, listFags.get(0));        transaction.commit();        List<String> lstTitles = new ArrayList<>();        lstTitles.add("1");        lstTitles.add("3");        lstTitles.add("2");        TabLayout tabLayout = (TabLayout) findViewById(R.id.ac_tab_layout);        for (int i = 0; i < lstTitles.size(); i++) {            tabLayout.addTab(tabLayout.newTab().setText(lstTitles.get(i)));        }        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                int pos = tab.getPosition();                FragmentManager manager = getSupportFragmentManager();                FragmentTransaction transaction = manager.beginTransaction();                transaction.replace(R.id.content, listFags.get(pos));                transaction.commit();            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }}