如何使 toolBar 和 tabBar 浮动在背景上

Posted 2023-04-19

【中文标题】如何使 toolBar 和 tabBar 浮动在背景上

【英文标题】：How to make toolBar and tabBar float over background

【发布时间】：2019-07-24 14:23:57

【问题描述】：

下面是我的应用 UI 的图片（actionBar/toolBar + webView + tabs）。如您所见，AB/工具栏 + 选项卡是透明的（黑色因此没有背景），但它拒绝在背景中折叠到我的 webView (EdgeScrollViewPager) 上方。我在工具栏和tabBar 中都将颜色设置为@null。我不知道我对代码中的逻辑错误做了什么，即为什么 actionBar/toolbar 和 tabBar 不位于深蓝色背景（webView）之上。

app_bar_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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_
        android:layout_
        android:orientation="vertical"
        tools:context="com.MainActivity">

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

        <com.ui.util.EdgeScrollViewPager
            android:id="@+id/content_main_viewpager"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:visibility="visible"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </com.ui.util.EdgeScrollViewPager>

        <android.support.design.widget.TabLayout
            android:id="@+id/content_main_tabs"
            android:layout_
            android:layout_
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextAppearance="@style/ML.Tab"
            app:tabPadding="0dp"
            app:tabIndicatorHeight="0dp"
            app:tabIndicatorColor="@null"
            android:visibility="visible"
            android:background="@null"
            app:background="@null">

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

    </LinearLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    app:theme="@style/ML.Toolbar"
    app:popupTheme="@style/ML.Toolbar.PopupTheme"
    android:layout_
    android:layout_
    app:layout_scrollFlags="scroll|enterAlways"
    >

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

</android.support.v7.widget.Toolbar>

style.xml

<style name="ML.Toolbar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@null</item>
        <item name="background">@null</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

【问题讨论】：

等等，你到底想要什么？你想让toolbar/ta bar的背景颜色和webview一样吗？

我希望工具栏在后台浮动在 webView 的内容上。换句话说，我希望 webView 的内容在工具栏下可见（滚动时）。目前我可以将工具栏设置为透明，但它不会浮动在 webView 的内容上。

使用相对布局而不是线性布局，你可以解决这个问题

【参考方案1】：

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_
    android:layout_
    tools:context="com.MainActivity">

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

<com.ui.util.EdgeScrollViewPager
    android:id="@+id/content_main_viewpager"
    android:layout_
    android:layout_
    android:layout_weight="1"
    android:visibility="visible"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</com.ui.util.EdgeScrollViewPager>

<android.support.design.widget.TabLayout
    android:id="@+id/content_main_tabs"
    android:layout_
    android:layout_
    android:layout_alignParentBottom="true"
    android:background="@null"
    android:visibility="visible"
    app:background="@null"
    app:tabGravity="fill"
    app:tabIndicatorColor="@null"
    app:tabIndicatorHeight="0dp"
    app:tabMaxWidth="0dp"
    app:tabMode="fixed"
    app:tabPadding="0dp"
    app:tabTextAppearance="@style/ML.Tab">
</android.support.design.widget.TabLayout>

【参考方案2】：

如果你想浮动视图你可以使用相对布局或框架布局。