在本教程中，我们将讨论并在android应用程序中实现Android TabLayout。
另外，我们还将详细介绍Material Design。

Android TabLayout AppBarLayout

在之前的教程中，我们一直在讨论将CoordinatorLayout用作活动布局的基础的好处。
所有这一切，我们都没有详细介绍AppBarLayout及其用法。
让我们现在来看一下。

AppBarLayout

AppBarLayout是垂直的LinearLayout，通常是CoordinatorLayout中的第一个子级，并且在大多数情况下充当ToolBar的包装。
将ToolBar用作CoordinatorLayout的直接子代可以很好地工作，但无法与当前的其他子代视图进行协调。
这就是AppBarLayout的重要性所在。
它可以使用参数app：layout_scrollFlags使其子视图实现所需的滚动行为。

下面给出了用于上述描述的XML布局示例：

<android.support.design.widget.AppBarLayout
      android:id="@+id/appBar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways" 
  </android.support.design.widget.AppBarLayout>

工具列的app：layout_scrollFlags属性向视图指示如何响应。
它具有以下可能的值。

• scroll：通常为需要在屏幕外滚动的所有视图设置此标志。
  不使用此标志的视图保持静态，从而允许其他可滚动视图向后滑动

• enterAlways：此标志确保任何向下滚动都将导致视图变为可见，从而启用快速返回模式

• enterAlwaysCollapsed：" enterAlways"的附加标志，用于修改返回的视图，使其仅最初滚动回到其折叠高度。

• exitUntilCollapsed：此标志导致视图在退出之前一直滚动到其合拢(达到其minHeight)为止

• snap：滚动结束后，如果视图仅部分可见，则将对其进行捕捉并滚动到最接近的边缘。
  因此，这避免了视图的中间动画状态

TabLayout

TabLayout是《材料设计教程》中引入的另一种流行的视图类型。
它提供了选项卡的水平布局，根据Android UI准则，这些选项卡通常位于屏幕顶部。

以下xml片段描述了如何定义TabLayout。

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

TabLayout包含两个重要的xml属性，如下所述：

• app：tabMode–这有两个值：fixed –在屏幕上显示所有标签。
  通常在最多3个标签时使用

• 滚动–这使用户可以水平滚动选项卡。

• app：tabGravity-该属性仅在app：tapMode =" fixed""下有效。
  这也需要两个值：填充-将水平宽度分布在所有标签上

• 中心–它会在屏幕的中心水平位置显示所有标签

注意：TabLayout通常与ViewPager一起实现。
我们将在以后的教程中实现。

我们来看一下在AppBarLayout内托管ToolBar和TabLayout的应用程序的业务逻辑。

Android TabLayout AppBarLayout示例代码

下面给出了" activity_main.xml"。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:context="com.theitroad.tablayoutappbar.MainActivity">

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/AppTheme.AppBarOverlay">

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways"
          app:popupTheme="@style/AppTheme.PopupOverlay" 

      <android.support.design.widget.TabLayout
          android:id="@+id/tabs"
          android:layout_width="match_parent"
          app:tabGravity="fill"
          app:tabMode="fixed"
          android:layout_height="wrap_content"

  </android.support.design.widget.AppBarLayout>

  <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      android:orientation="vertical">

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/sample_text"

  </LinearLayout>

  </android.support.v4.widget.NestedScrollView>

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|end"
      android:layout_margin="@dimen/fab_margin"
      android:src="@android:drawable/ic_dialog_email" 

</android.support.design.widget.CoordinatorLayout>

在上面的代码中，我们在AppBarLayout下添加了LinearLayout。
需要得出的重要推论是：

• 没有语句app：layout_behavior =" @ string/appbar_scrolling_view_behavior的LinearLayout会将LinearLayout与AppBarLayout重叠。

• 作为CoordinatorLayout中直接子级的LinearLayout不会滚动。
  因此，我们将其保留在NestedScrollView中

• TabLayout没有layout_scrollFlags。
  因此，它不会像工具列一样滚动出屏幕。
  我们很快就会看到。

MainActivity.java在下面给出

package com.theitroad.tablayoutappbar;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

  TabLayout tabLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);

      FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
      fab.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                      .setAction("Action", null).show();
          }
      });

      tabLayout=(TabLayout)findViewById(R.id.tabs);

      tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
      tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
      tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
  }

}

以上应用程序的输出如下所示

以上输出中很少有值得注意的事情是：

• 滚动时，状态列也会向上滚动，因此大多数时候工具列都处于不一致状态
• 标签列指示器将默认颜色设置为colorAccent
• 选项卡的默认背景颜色是colorPrimary

第一个问题是严重的。
要解决该问题，请转到res-> values-21-> styles.xml文件。
将行" @android：color/transparent"更改为" @ color/colorPrimaryDark"

这是现在输出的样子：

有多种方法可以自定义TabLayout。
尝试在newTab()方法而不是setText()上调用setIcon()。
它将显示可绘制的图标。
您甚至可以像

tabLayout.addTab(tabLayout.newTab().setText("Speaker Phone").setIcon(android.R.drawable.stat_sys_speakerphone));
      tabLayout.addTab(tabLayout.newTab().setText("Headset").setIcon(android.R.drawable.stat_sys_headset));
      tabLayout.addTab(tabLayout.newTab().setText("Bluetooth").setIcon(android.R.drawable.stat_sys_data_bluetooth));

我使用上面的代码段结束了下面的输出。
你呢？

此外，我们可以在style.xml中创建自己的自定义样式，如下所示。

<style name="MyStyle" parent="Widget.Design.TabLayout">
      <item name="tabIndicatorColor">#FFFF</item>
      <item name="tabIndicatorHeight">5dp</item>
      <item name="tabPaddingStart">8dp</item>
      <item name="tabPaddingEnd">8dp</item>
      <item name="tabBackground">?attr/selectableItemBackground</item>
      <item name="tabSelectedTextColor">#1f2124</item>
  </style>

让我们将以上样式添加到activity_main.xml的各个视图中

<android.support.design.widget.TabLayout
          android:id="@+id/tabs"
          android:layout_width="match_parent"
          app:tabGravity="fill"
          app:tabMode="fixed"
          style="@style/MyStyle"
          android:layout_height="wrap_content"