如何在没有阴影的 AppBar 下添加 TabView答案

【问题标题】：How to add a TabView beneath AppBar without shadow如何在没有阴影的 AppBar 下添加 TabView
【发布时间】：2015-11-24 19:58:02
【问题描述】：

在我的应用程序中，我有一个问题，我希望从抽屉式导航中获得高级导航控制，并在片段内的 TabLayout 中获得页面级控制。但是，这会导致从 AppBar 到 Fragment 的阴影渲染出现问题。

这是我的布局和代码的基本功能。在根我有这个简单的布局：

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

    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
        android:layout_width="match_parent" 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:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

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

当我的导航抽屉被选中时，我将片段膨胀为“content_main”

    this.getSupportFragmentManager()
            .beginTransaction()
            .addToBackStack(tag)
            .replace(R.id.content_main_layout, fragment, tag)
            .commit();

放入 content_main 的片段包含带有我的 TabView 和视图分页器的布局：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_github_issues"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/github_issues_tab_layout"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_gravity="top"
        android:background="?attr/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/github_issues_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
</LinearLayout>

解决问题的最佳做法是什么？将 TabLayout 包含在顶级 AppBar 中并仅基于页面禁用视图是可接受的实现吗？

【问题讨论】：

标签： android material-design android-tablayout android-appbarlayout

【解决方案1】：

首先，您需要将视图层次结构更改为以下内容：

FrameLayout
  -CoordinatorLayout -> content
  -Toolbar

修复Toolbar 高度与AppBarLayout 完全相同，也摆脱阴影但保持Toolbar 的z 顺序：

int appBarLayoutElevation = ViewCompat.getElevation(mAppBarLayout);
getActivity().getSupportActionBar().setElevation(appBarLayout);

我曾在my blog post 工作过的类似示例。

【讨论】：