Android中Design库之TabLayout

简介

TabLayout就是用一个水平的布局用来展示Tabs

使用

首先在build.gradle的dependencies中加入依赖

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

给application重新指定theme

android:theme="@style/MyTheme"

布局文件中

默认情况下，没有设置任何属性

在代码中

package com.zhoujian.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {



    public static final String[] titles = new String[]{"精选","训练","饮食","商城"};

    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView()
    {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]));
    }
}

显示效果

a.png

改变选中字体的颜色和未选中字体的颜色

未选中的颜色:黑色

    app:tabTextColor="@color/black"

选中的颜色:红色

    app:tabSelectedTextColor="@color/red"

显示效果：

b.png

改变指示器下标横线的高度和颜色、改变TabLayout的背景色

改变指示器下标的颜色：黑色

  app:tabIndicatorColor="@color/black"

改变指示器下标的高度：2dp

   app:tabIndicatorHeight="2dp"

改变TabLayout的背景色：黄色

显示效果：

c.png

改变TabLayout内部字体大小

app:tabTextAppearance="@style/TabLayoutTextStyle"

styles.xml文件中

显示效果：

e.png

添加图标

 
mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]).setIcon(R.mipmap.circle1));  
mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]).setIcon(R.mipmap.circle2));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]).setIcon(R.mipmap.circle3));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]).setIcon(R.mipmap.circle4));

显示效果:

f.png

显示模式

填充模式

  app:tabGravity="fill"

居中模式

  app:tabGravity="center"

点击事件

        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)
            {
            //再次选中  

            }
        });

ViewPager联动

activity_main.xml

MainActivity.java

package com.zhoujian.tablayout;

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.Arrays;

public class MainActivity extends AppCompatActivity {



    public static final String[] titles = new String[]{"精选","训练","饮食","商城"};
    private ArrayList fragmentList = new ArrayList();
    private  TabLayout mTabLayout;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]));

        mTabLayout.setupWithViewPager(mViewPager);

        fragmentList.add(FirstFragment.newInstance());
        fragmentList.add(SecondFragment.newInstance());
        fragmentList.add(ThirdFragment.newInstance());
        fragmentList.add(FourthFragment.newInstance());

        FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragmentList, Arrays.asList(titles));
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {

            }
            @Override
            public void onPageSelected(int position)
            {
            }
            @Override
            public void onPageScrollStateChanged(int state)
            {

            }
        });

    }
}

显示效果

g.gif

源码下载：

源码下载：https://github.com/zeke123/TabLayout