Andorid - Material Design之TabLayout

老婆保佑，代码无BUG

前言

Material Design 系列第四篇 TabLayout

---

目录

• 一：使用
• 二：属性介绍
• 三：与ViewPager一起使用

---

引用

compile 'com.android.support:design:26.1.0'

Untitled.gif

一：使用

1. 静态设置

2. 动态设置

TabLayout tabLayout = findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("tab1").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("tab2").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("tab3").setIcon(R.mipmap.ic_launcher));

二：属性介绍

属性	说明
app:tabSelectedTextColor="@color/colorAccent"	选中字体的颜色
app:tabTextColor="@color/colorPrimary"	未选中字体的颜色
app:tabIndicatorColor="@color/colorPrimary"	指示器下标的颜色
app:tabIndicatorHeight="4dp"	指示器下标的高度,0表示没有标
app:tabMode="scrollable"	默认是fixed：Tab的模式（scrollable-滑动，fixed-固定），如（图1）
app:tabBackground="@color/line_view"	整个TabLayout的背景颜色
app:tabContentStart="20dp"	TabLayout开始的位置的偏移量
app:tabGravity="center"	整个TabLayout居中显示(如果是fill，则是充满)
app:tabMaxWidth="100dp"	最大的tab宽度
app:tabMinWidth="20dp"	最小的tab宽度
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"	tablayout上字体的大小

图1

三：与ViewPager一起使用

 tabLayout.setupWithViewPager(viewPager); 

最重要的就这个代码

package com.allens.utils;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

import java.util.List;

/**
 * Created by Administrator on 2016/9/27.
 */

public class Tab2VpUtils {

    private Tab2VpUtils() {

    }

    private static Tab2VpUtils newInstance;

    public static Tab2VpUtils getInstance() {
        if (newInstance == null) {
            synchronized (Tab2VpUtils.class) {
                if (newInstance == null) {
                    newInstance = new Tab2VpUtils();
                }
            }
        }
        return newInstance;
    }

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List fragmentList;
    private FragmentManager fragmentManager;
    private String[] arr;

    /***
     *
     * @param tabLayout
     * @param viewPager
     * @param fragmentList
     * @param fragmentManager
     * @param arr 数组
     */
    public void tabControl(TabLayout tabLayout, ViewPager viewPager, List fragmentList, FragmentManager fragmentManager, String[] arr) {
        this.arr = arr;
        this.fragmentManager = fragmentManager;
        this.fragmentList = fragmentList;
        this.tabLayout = tabLayout;
        this.viewPager = viewPager;
        initSet();
    }

    private void initSet() {
        viewPager.setAdapter(new MyViewPagerFragmentAdapter(fragmentManager));
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < arr.length; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setText(arr[i]);
//            tab.setIcon(R.drawable.buttom_category_seletor);//图片选择器，只能在上面？？
        }
    }

    private class MyViewPagerFragmentAdapter extends FragmentPagerAdapter {

        public MyViewPagerFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

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

        @Override
        public int getCount() {
            return fragmentList == null ? 0 : fragmentList.size();
        }
    }

}

---

源码地址

点击进入GitHub

最后

全部系列

Andorid - Material Design之Snackbar

Andorid - Material Design之TextInputLayout

Andorid - Material Design之FloatingActionButton

Andorid - Material Design之TabLayout

Andorid - Material Design之NavigationView和DrawerLayout

Andorid - Material Design之CoordinatorLayout