TabLayout的使用

Design包下的TabLayout，继承至HorizontalScrollView 这个又继承至 FrameLayout。

简单来说，TabLayout就是一个帧布局。

简单来个Demo：

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.canary.tablayoutdemo.MainActivity">

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

代码：

package com.canary.tablayoutdemo;

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

public class MainActivity extends AppCompatActivity {

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

    private void initView() {
        TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("tab1"));
        tabs.addTab(tabs.newTab().setText("tab2"));
        tabs.addTab(tabs.newTab().setText("tab3").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
    }
}

展示：

不过当然，TabLayout里面还有很多方法。

来个更加实用的代码:

package com.canary.tablayoutdemo;

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

public class MainActivity extends AppCompatActivity {

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

    private void initView() {
        TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
        tabs.setSelectedTabIndicatorColor(getResources().getColor(R.color.green));
        //字体颜色
        int nc = getResources().getColor(R.color.red);
        //选中时字体颜色
        int sc = getResources().getColor(R.color.blue);
        tabs.setTabTextColors(nc,sc);
        tabs.addTab(tabs.newTab().setText("tab1"));
        tabs.addTab(tabs.newTab().setText("tab2"));
        tabs.addTab(tabs.newTab().setText("tab3").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.addTab(tabs.newTab().setText("tab4").setIcon(R.mipmap.ic_launcher));
        tabs.setTabMode(TabLayout.MODE_SCROLLABLE);
        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.d("tag","选中的时候调用");
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.d("tag","没选中的时候调用");
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.d("tag","重新选中的时候调用");
            }
        });
    }
}

效果展示：