使用 Toolbar + TabLayout 为 AppBarLayout 充气答案

【问题标题】：Inflating AppBarLayout with Toolbar + TabLayout使用 Toolbar + TabLayout 为 AppBarLayout 充气
【发布时间】：2019-01-25 15:08:50
【问题描述】：

我的 main.xml 中目前有一个 DrawerLayout。 AppBarLayout 中包含了一个 Toolbar，然后是一个简单的 LinearLayout 来交换片段。

我导航到的片段之一，我希望它包含一个 TabLayout 用于片段的 ViewPager。目前，我在片段的布局文件中都有这两个，但这会导致工具栏和 TabLayout 之间出现阴影，这是我不想要的。我也不想使用 setElevation()，因为它不适用于棒棒糖之前的设备。

一个可能的解决方案是从我的片段中膨胀 AppBarLayout，以便它同时包含工具栏 + 选项卡。但是，我不确定如何执行此操作，因此将不胜感激。

这是我的 main.xml 文件：

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lumivote.lumivote.ui.MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <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/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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

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

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

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

这是我的片段的 xml 文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.alexdao.democracy.ui.candidate_tab.CandidateListFragment">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/myPrimaryColor"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />
</LinearLayout>

【问题讨论】：

标签： android android-layout android-fragments android-toolbar android-tablayout

【解决方案1】：

您可以为每个片段设置单独的工具栏。可以将片段工具栏设置为活动操作栏。示例代码：

Toolbar toolbar = (Toolbar) v.findViewById(R.id.toolbar);
 ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);

应该也可以有标题、图标和其他东西。有了它，您就可以在棒棒糖之前的设备上模拟阴影，无论您使用的是什么设备。

【讨论】：

我用 api 16 检查了我的棒棒糖设备和旧的 htc 欲望 x 的性能。使用自己的工具栏的片段转换非常流畅，cpu 使用率从未达到 25%（我每秒点击几次替换按钮）
这是一个很好的解决方案，但是如果我将 Activity 与导航抽屉一起使用，并且希望汉堡（动画）图标也在（我的片段的）工具栏上呢？

【解决方案2】：

我修改了bleeding182 给出的解决方案，让它也适用于AppBarLayout（解决bopa 指出的问题）。

@Override
public void onAttach(Context context) {

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getActivity().findViewById(R.id.appbar).setElevation(0);
    }
    super.onAttach(context);

}

@Override
public void onDetach() {
    super.onDetach();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getActivity().findViewById(R.id.appbar).setElevation(R.dimen.toolbar_elevation);
    }
}

我所做的是通过为我的 AppBarLayout 提供一个 ID 来替换对 getSupportActionBar() 的调用，然后对其调用 findViewById() ，然后对其结果调用 setElevation。在 API 23 上测试。

【讨论】：

【解决方案3】：

我有一个类似的问题，我想在一个片段中添加一个 TabLayout。

在不更改任何其他代码的情况下，您可以通过在带有 TabLayout 的片段中使用 onAttach 和 onDetach 来解决此问题。

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);

    // todo add some further checks, e.g. instanceof, actionbar != null

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        ((AppCompatActivity) activity).getSupportActionBar().setElevation(0);
    }
}

@Override
public void onDetach() {
    super.onDetach();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        ((AppCompatActivity) getActivity()).getSupportActionBar()
                .setElevation(getResources().getDimension(R.dimen.toolbar_elevation));
    }
}

确保在 TabLayout 上设置相同的高度，一切正常！ ;D

【讨论】：

在他的情况下不起作用，因为 AppBarLayout 会掉下阴影
你最好使用onStart和onStop，这是因为当一个片段被替换并添加到后台堆栈时，它不会被分离并且onDetach不会被调用，所以阴影仍然是0dp。但这解决了我的问题，谢谢大卫！

【解决方案4】：

您可以简单地从 Fragment 以编程方式添加 TabLayout，您需要 TabLayout

tabLayout = (TabLayout) inflater.inflate(R.layout.tablay, null);
appBarLayout = (AppBarLayout) getActivity().findViewById(R.id.appbar);
appBarLayout.addView(tabLayout, new LinearLayoutCompat.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

并在 onDetach() 中从 AppBar 中移除 TabLayout

@Override
public void onDetach() {
    appBarLayout.removeView(tabLayout);
    super.onDetach();
}

【讨论】：

【解决方案5】：

为了解决我的问题，我最终将 Toolbar、TabLayout 和 ViewPager 都放在了我的 MainActivity 中。

main_activity.xml：

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <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/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white" />
        </android.support.design.widget.AppBarLayout>

        <RelativeLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

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

然后，在我的所有片段中，我在 onCreateView 中以编程方式设置 TabLayout 和 ViewPager 的可见性：

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabLayout);
        tabLayout.setVisibility(View.GONE);
        ViewPager mViewPager = (ViewPager) getActivity().findViewById(R.id.viewpager);
        mViewPager.setVisibility(View.GONE);

        return inflater.inflate(R.layout.fragment_layout, container, false);
}

当然，在带有标签的片段中，您可能希望将可见性设置为View.VISIBLE 而不是View.GONE。

【讨论】：

这是一个有趣的方法

【解决方案6】：

Artem_lens 方法对我有用，但做了一些修改。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    ...

    mTabLayout = (TabLayout) inflater.inflate(
            R.layout.partial_tab_layout,
            container,
            false);
    mAppBarLayout = (AppBarLayout) getActivity().findViewById(R.id.app_bar);
    mAppBarLayout.addView(mTabLayout,
            new LinearLayoutCompat.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT));

    ...
}

并删除 onDestroyView() 处的视图

@Override
public void onDestroyView() {
    mAppBarLayout.removeView(mTabLayout);
    super.onDestroyView();
}

【讨论】：

【解决方案7】：

解决方案在 XML 中很简单。只需将以下代码添加到您的 AppBarLayout：app:elevation="0dp"。所以 AppBarLayout 应该是这样的：

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

【讨论】：