logo标签列表

Android透明覆盖工具栏

androidandroid-toolbar
22
我创建了一个名为ToolBar的控件，并将其设置为我的ActionBar，同时让它透明。现在的问题是，我希望它覆盖在其他内容上方，但现在它还像普通的ActionBar一样工作，我的LinearLayout在它下面停止。如何让我的ToolBar覆盖整个布局并填充整个屏幕？
原始ActionBar的样式仅为：
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowActionBarOverlay">true</item>
</style>

我的工具栏：

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
android:background="@android:color/transparent"/>

以及我的 ToolBar 声明：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setBackgroundResource(Color.TRANSPARENT);
setSupportActionBar(toolbar);

我觉得我错过了一些非常简单的东西，但是在搜索之后我找不到我要寻找的解决方案。任何帮助都将不胜感激！

编辑： 这是我的完整XML主布局：

<FrameLayout 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"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"/>

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main layout -->
    <FrameLayout
        android:id="@+id/main_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Nav drawer -->
    <fragment
        android:id="@+id/fragment_drawer"
        android:name="rsay.android.scrollbanner.NavigationDrawerFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="left|start" />
</android.support.v4.widget.DrawerLayout>

8个回答
24

你走在正确的道路上了。最简单的方法是使用 FrameLayout，其中内容的 ViewGroup 将会 match_parent，而 Toolbar 则位于这个 ViewGroup 的顶部。

<FrameLayout 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"
    tools:context=".MainActivity">


    <!-- This can be any child. For sample purposes I assume this layout contains fragments -->
    <LinearLayout  
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fragment_container"
        android:orientation="horizontal"/>


    <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/toolbar"
       app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:minHeight="?attr/actionBarSize"
       android:background="@android:color/transparent">
        </android.support.v7.widget.Toolbar>

</FrameLayout>
所以这比我之前的更接近了，我的第二个子项是DrawerLayout而不是LinearLayout，当我从左边滑动时导航抽屉是存在的，但是ToolBar不可见，我猜它在其他布局后面，有没有属性需要指定将其置于最前面？ - Ryan Sayles
3
XML中的视图按顺序排列，最后一个元素显示在最高层。如果你将 <android.support.v7.widget.Toolbar/> 元素移动到 LinearLayout 后面，它将显示在顶部。我已经修改了Nikola的回答以反映这一点。 - Patrick Dattilio
1
确认。将工具栏移动到最后一个元素已经将其放置在主内容的顶部。我的根布局是RelativeLayout。 - Tomask
在 CoordinatorLayout 上方的 Toolbar 情况下运作正常。 - Eido95
11

经过一些练习，我成功了。希望对他人有所帮助。在这里，我没有为 appbarlayout 设置任何 elevation。

 <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:background="@drawable/background_gradiant"
    android:fitsSystemWindows="true"
    tools:context=".activity.AddMembersActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

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


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

</android.support.design.widget.CoordinatorLayout>
你真是个天才！ - Bhavik Mehta
3

如果您想使内容覆盖在Toolbar上，应该将透明度设置在AppBarLayout上，并删除app:layout_behavior。

谢谢！从活动布局中删除 app:layout_behavior="@string/appbar_scrolling_view_behavior" 并在 AppBarLayout 中设置 android:background="@color/transparent" 解决了问题。 - CoolMind
在 onCreate() 中添加 toolbar.background.alpha = 0。 - CoolMind
2

在这里输入图片描述

在styles.xml文件中：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
</style>

<style name="ActionBar.SemiTransp" parent="Base.Widget.AppCompat.ActionBar">
    <item name="displayOptions">showHome|showTitle</item>
    <item name="background">@drawable/gray_to_transp</item>
</style>

<style name="AppTheme.SemiTranspActionBar" parent="@style/AppTheme">
    <item name="actionBarStyle">@style/ActionBar.SemiTransp</item>
    <item name="windowActionBarOverlay">true</item>
</style>

并在清单文件中:

<activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme.SemiTranspActionBar">
2
在xml中，布局的顺序决定了“深度”。通过将工具栏移动到其他元素下面，它将覆盖它们。
<FrameLayout 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"
tools:context=".MainActivity">

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main layout -->
    <FrameLayout
        android:id="@+id/main_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"/>

    <!-- Nav drawer -->
    <fragment
        android:id="@+id/fragment_drawer"
        android:name="rsay.android.scrollbanner.NavigationDrawerFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="left|start" />    

</android.support.v4.widget.DrawerLayout>
功能正常，但底层片段的点击不再起作用了。 - Skynet
1

CollapsingToolbar 是在支持库22.2.0中引入的（2015年5月），默认提供叠加效果：

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

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/transparent">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"/>

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

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

</android.support.design.widget.CoordinatorLayout>
0
您可以按照以下方式使用CoordinatorLayout
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
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:fitsSystemWindows="true"
tools:context="com.epbit.itattooz.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:minHeight="?android:attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:titleTextAppearance="@style/ToolbarTitle"/>

    <FrameLayout
        android:id="@+id/containerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

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

frameLayout 用于放置碎片。

-1

或许这可以帮助你，Ryan。

toolbar.getBackground().setAlpha(0);
1
他明确表示他想要Toolbar后面的内容。改变alpha值不会使内容出现在Toolbar后面。如果他只是改变alpha值，抽屉的矩形将会变成黑色/白色（取决于主题），但内容仍然在下方。 - Nikola Despotoski
你说得对！也许他可以编辑他的XML并组织元素。但是，在那样做之后，我认为他可以使用我发布的代码行来使他的工具栏覆盖布局。 - Marco Vignoli
他已经将工具栏背景设置为@android:color/transparent。 - Nikola Despotoski
没错，我没有看到那一行。他必须编辑他的XML，组织元素，然后就完成了。 - Marco Vignoli
说实话，我已经尝试了所有的SoF透明栏解决方案。在我的情况下，它是DrawerLayout > CoordinatorLayout > AppBarLayout > Toolbar。唯一能让它透明的方法是使用代码，这个(setAlpha)最终起作用了。我还在AppBarLayout对象上使用setBackgroundColor()来设置为透明。仍然在努力摆脱高度...这真是一场噩梦。使用appcompat-v7:25.3.1并在API 26上进行测试...谢谢Marco。 - the_dude_abides
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接