TableLayout-顶部导航栏

本文所说的 TabLayout 是指 design 包下的

android.support.design.widget.TabLayout

一、概述

• TabLayout 主要用于顶部导航栏，是属于 android 官方的顶部导航栏控件，当然市面上也有很多 app 会自定义顶部导航栏，用于展现不同的视觉效果，自定义导航栏不在本文讨论范围之内

• 使用的时候，记得导入对应版本的 android.support.design.widget 包

二、TabLayout 的常用属性

• app:tabMode ： 此属性有两个选项值，分别为 "scrollable" （可滑动），"fiexd" (不能滑动)

• app:tabBackground ： 设置导航栏的背景色

• app:tabSelectedTextColor ： 设置选中条目的颜色，如下所示：

  

  image

• app:tabTextColor ： 设置导航栏所有条目的颜色（未选中时候的颜色）

• app:tabIndicatorColor ： 设置导航条的颜色

  

  image

• app:tabPadding ：设置导航条上下左右边距

• app:tabIndicatorHeight ： 设置指示器高度

• app:tabGravity ： 设置导航栏的位置（条目没有太多的时候设置才有用，一般是两三个的时候），有两个值，center （居中） 和 fill （充满布局）默认为 fill，效果如下：

  center：

  

  image

  fill：

  

  image

三、TabLayout 添加条目 Tabs

• 有两种方式，第一种是在布局中添加，第二种是在代码中添加，而我一般选择第二种，这样更灵活一点，布局和添加代码如下所示：

// 布局







// activity 中代码

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.tablayout)
    TabLayout mTablayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initTablayoutText();
    }
    private String[] layoutTables = {"天山", "明教", "丐帮", "慕容", "少林", "逍遥", "峨眉", "天龙", "武当", "鬼谷", "唐门", "星宿"};
    private void initTablayoutText() {

        for (int i = 0; i < layoutTables.length; i++) {
            // 设置条目 tabItem
            mTablayout.addTab(mTablayout.newTab().setText(layoutTables[i]));
        }
    }
}

四、TabLayout 条目选中监听

  mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

五、TabLayout 与 Viewpager 和 Fragment 结合

• 布局：

• 适配器 Adapter ：

package io.github.adsuper.tablayoutdemo;

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

import java.util.List;

/**
 * 作者：luoshen/[email protected]
 * 时间：2017年10月10日
 * 说明：
 */

public class MyPagerAdapter extends FragmentPagerAdapter {

    private Context mContext;
    private List mList;
    private String[] mTitles;

    public MyPagerAdapter(FragmentManager fm, Context mContext, List mList, String[] mTitles) {
        super(fm);
        this.mList = mList;
        this.mContext = mContext;
        this.mTitles = mTitles;
    }

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

    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    /**
     * 设置 Fragment 数据源
     * @param mList
     */
    public void setmList(List mList) {
        this.mList = mList;
    }

    /**
     * 获取条目
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

• 将 viewpager 与 Tablelayout 关联

package io.github.adsuper.tablayoutdemo;

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

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.tablayout)
    TabLayout mTablayout;
    @BindView(R.id.viewPager)
    ViewPager mViewPager;

    private String[] layoutTables = {"天山", "明教"};

    private List list_fragment;

    private Context mContext;
    private MyPagerAdapter mMyPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mContext = this;
        initTablayoutText();
        initFragment();
        setViewPagerAdapter();
    }

    private void setViewPagerAdapter() {

        mMyPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), mContext, list_fragment, layoutTables);
        mViewPager.setAdapter(mMyPagerAdapter);
        mTablayout.setupWithViewPager(mViewPager);// //viewpager 与 tablelayout 关联
    }

    private void initFragment() {
        list_fragment = new ArrayList<>();
        list_fragment.add(new Fragment_one());
        list_fragment.add(new Fragment_two());
    }

    private void initTablayoutText() {

        for (int i = 0; i < layoutTables.length; i++) {
            mTablayout.addTab(mTablayout.newTab().setText(layoutTables[i]));
        }

        mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

有写的不对的地方请指正，有更好的请拿出来，让我学习下！