TabLayout与ViewPager实战-优快云博客

引用TabLayout需要先导入design包

通常配合viewpager一起使用：

比如如下布局：

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
xmlns:app=“http://schemas.android.com/apk/res-auto”
android:orientation=“vertical”>
<android.support.design.widget.TabLayout
android:id=“@+id/tab_FindFragment_title”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:background=“@color/titleBlue”
app:tabIndicatorColor=“@color/white”
app:tabSelectedTextColor=“@color/gray”
app:tabTextColor=“@color/white”
/>
<android.support.v4.view.ViewPager
android:id=“@+id/vp_FindFragment_pager”
android:layout_width=“fill_parent”
android:layout_height=“0dp”
android:layout_weight=“1”
/>
</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：

public class Find_tab_Adapter extends FragmentPagerAdapter {
private List<Fragment> list_fragment; //fragment列表
private List<String> list_Title; //tab名的列表
public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {
super(fm);
this.list_fragment = list_fragment;
this.list_Title = list_Title;
}
@Override
public Fragment getItem(int position) {
return list_fragment.get(position);
}
@Override
public int getCount() {
return list_Title.size();
}
//此方法用来显示tab上的名字
@Override
public CharSequence getPageTitle(int position) {
return list_Title.get(position % list_Title.size());
}
}

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

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

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

// 关联viewpager
tabLayout.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) {

            }
        });
    }
}

TabLayout的使用