TabLayout的使用

一.简单介绍

Tablayout继承自HorizontalScrollView，用作页面切换指示器，功能强大。
在源码中给出了TabLayout的定义：

TabLayout provides a horizontal layout to display tabs.

意思为：TabLayout提供了一个水平的布局用来展示Tabs。

二.基本使用方法

1.效果图

2.简单使用

1.先创建一个布局文件xml和一个Activity文件

2.修改布局文件

<?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=".MainActivitytablayout">

<include layout="@layout/titlebar"/>       								//导入头部标题

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_blue_bright"               //背景颜色
    app:tabIndicatorColor="@android:color/background_dark"             //下划线颜色
    app:tabSelectedTextColor="@android:color/background_dark"          //标题被选中时文字颜色
    app:tabTextColor="@android:color/white" />						   //标题文字颜色


<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

titlebar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/titlebar"
android:gravity="center"
android:orientation="horizontal">


<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="测试用"
    android:textColor="@android:color/black"
    android:textSize="20sp" />

</LinearLayout>

3.修改Activity
MainActivitytablayout.java

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;


import java.util.ArrayList;

public class MainActivitytablayout extends AppCompatActivity {
ViewPager viewPager;
TextView tv_title;
TabLayout tabLayout;

ArrayList<MyFragment> fragments;

ViewPagerAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_activity_tablayout);
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    tv_title = (TextView) findViewById(R.id.tv_title);

    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tv_title.setText("TabLayout的使用");

    //初始化数据
    fragments = new ArrayList<>();
    for (int i=0;i<12;i++){
        fragments.add(new MyFragment("标题"+i,"内容"+i));
    }
    //设置ViewPager的适配器
    adapter = new ViewPagerAdapter(getSupportFragmentManager(),fragments);
    viewPager.setAdapter(adapter);
    //关联ViewPager
    tabLayout.setupWithViewPager(viewPager);
    //设置固定的
//        tabLayout.setTabMode(TabLayout.MODE_FIXED);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

    }
}

创建一个类MyFragment
MyFragment.java

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MyFragment extends Fragment {

/**
 * 标题
 */
private final String title;
/**
 * 内容
 */
private final String content;
Context mContext;
TextView textView;

/**
 * 得到内容
 * @return
 */
public String getContent() {
    return content;
}

/**
 * 得到标题
 * @return
 */
public String getTitle() {
    return title;
}

public MyFragment(String title, String content){
    super();
    this.title = title;
    this.content = content;
}


@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //上下文
    mContext = getActivity();
}

/**
 * 创建视图
 * @param inflater
 * @param container
 * @param savedInstanceState
 * @return
 */
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    //创建视图
    textView = new TextView(mContext);
    textView.setTextColor(Color.RED);
    textView.setTextSize(25);
    textView.setGravity(Gravity.CENTER);
    return textView;
}

/**
 * 绑定数据
 * @param savedInstanceState
 */
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    //设置内容
    textView.setText(content);
}
}

重写方法ViewPagerAdapter
ViewPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


import java.util.ArrayList;

public class ViewPagerAdapter extends FragmentPagerAdapter {
private final ArrayList<MyFragment> fragments;

public ViewPagerAdapter(FragmentManager fm, ArrayList<MyFragment> fragments) {
    super(fm);
    this.fragments = fragments;
}

/**
 * 根据位置返回对应的Fragment
 * @param position
 * @return
 */
@Override
public Fragment getItem(int position) {
    return fragments.get(position);
}

@Override
public int getCount() {
    return fragments.size();
}

/**
 * 得到页面的标题
 * @param position
 * @return
 */
@Override
public CharSequence getPageTitle(int position) {
    return fragments.get(position).getTitle();
}
}

三.样式修改

1.改变TabLayout的颜色

1.改变选中字体的颜色

app:tabSelectedTextColor="@android:color/holo_orange_light"

2.改变未选中字体的颜色

app:tabTextColor="@color/colorPrimary"

3.改变指示器下标的颜色

app:tabIndicatorColor="@android:color/holo_orange_light"

4.改变整个TabLayout的背景颜色

app:tabBackground="color"

2.改变TabLayout内部字体大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

3.添加图标

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

这种自带的setIcon()方法会讲图标添加在文字上方，比较别扭，想要将图标放在其他位置（如左侧）

 /**
 * 设置自定义位置图标
 */
private void setCustomIcon() {

    tabLayout2 = (TabLayout) findViewById(R.id.tablayout2);
    for(int i=0;i<titles.length;i++){
        tabLayout2.addTab(tabLayout2.newTab());
    }

    for(int i=0;i<titles.length;i++){
        tabLayout2.getTabAt(i).setCustomView(makeTabView(i));
    }
}

/**
 * 引入布局设置图标和标题
 * @param position
 * @return
 */
private View makeTabView(int position){
    View tabView = LayoutInflater.from(this).inflate(R.layout.tab_text_icon,null);
    TextView textView = tabView.findViewById(R.id.textview);
    ImageView imageView = tabView.findViewById(R.id.imageview);
    textView.setText(titles[position]);
    imageView.setImageResource(pics[position]);

    return tabView;
}

4.将Tablayout变得可滚动

当tab太多是，页面无法容下所有的tab导致出现拥挤的时候，可以使用属性

app:tabMode="scrollable"

5.取消下标

取消下标有两种方式，一种是更改下标的高度

app:tabIndicatorHeight="0dp"

另一种更改下标的颜色为透明

app:tabIndicatorColor="#00000000"