Android中Design库之TabLayout

简介

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

使用

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

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

给application重新指定theme

android:theme="@style/MyTheme"

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.zhoujian.tablayout" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/MyTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

布局文件中

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

  <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

在代码中

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

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

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/red"/>
</LinearLayout>

未选中的颜色:黑色

    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文件中

 <style name="TabLayoutTextStyle">
        <item name="android:textSize">10sp</item>
 </style>

显示效果：

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

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/yellow"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/black"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@color/red"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/black"/>


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


</LinearLayout>

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<Fragment> fragmentList = new ArrayList<Fragment>();
    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