使工具栏透明化

Question

使工具栏透明化

17

创建账户.xml

<?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="io.sleeko.board.CreateAccountActivity">

<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:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

<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>

我需要让上述 ToolBar 变成透明的，这样我们才能看到背景图片。我已经尝试了不同的方法，但都没有找到正确的解决方案。请帮忙，谢谢。

- Nabeel K

4个回答

6

这是我的解决方案。

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

- Diego Schmaedech

1

这是我关于如何在AppBarLayout中获得无阴影透明工具栏的版本。以上解决方案的主要问题是当我使工具栏透明时，阴影仍然存在。为了在Fragment中实现带有返回导航图标的透明工具栏：

layout_transparent_toolbar_fragment.xml:

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/general_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:navigationIcon="@drawable/ic_arrow_back_black_24dp"></android.support.v7.widget.Toolbar>

在TransparentToolbarFragment中：

override fun onCreateView(inflater: LayoutInflater, vg: ViewGroup?, savedInstanceState: Bundle?): View? {
    val layout = inflater.inflate(R.layout.layout_transparent_toolbar_fragment, vg, false)
    val toolbar = layout.findViewById<View>(R.id.toolbar) as Toolbar
    val appBar = layout.findViewById<View>(R.id.general_appbar) as AppBarLayout
    appBar.outlineProvider = null
    val appCompatActivity = (activity as AppCompatActivity)
    appCompatActivity.setSupportActionBar(toolbar)

    val actionBar = appCompatActivity.getSupportActionBar()
    if (actionBar != null) actionBar!!.setDisplayHomeAsUpEnabled(true)
    toolbar.setNavigationOnClickListener { appCompatActivity.finish() }

    return layout
}

Actually, the line

appBar.outlineProvider = null

这个工作是隐藏工具栏阴影。

- Alex Burov

0

试试这个：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

并删除带有结束标签的内容：

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

但不要让它完全透明，你可以使用带有透明度的颜色，例如#93000000，这样就会像这样：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#93000000"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

- Mohamed

我应该移除应用于AppBar的主题吗？ - Nabeel K

我需要移除AppBar吗？ - Nabeel K

你可以像这样设置透明度：android:background="@android:color/transparent"，但是 AppBarLayout 的阴影可能会让它看起来很丑，并且那些阴影不会随着透明度的改变而消失，这只是你自己的选择。试一试吧！ - Mohamed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sotti · Accepted Answer

大多数情况下，我们希望工具栏是半透明的，因为我们想显示它后面的内容。问题是，工具栏后面的内容颜色可能会与工具栏元素/文本的颜色相冲突（例如向上/向后箭头）。

因此，在许多实现中，您将看到工具栏实际上不是透明的，而是具有渐变的半透明效果。

您可以使用以下代码实现这一点：

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    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/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/background_toolbar_translucent" />

background_toolbar_translucent.xml

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="270"
        android:endColor="@android:color/transparent"
        android:startColor="@color/black_alpha_40"/>
</shape>

colors.xml

<color name="black_alpha_40">#66000000</color>

你可以尝试使用不同的渐变值，我发现对于白色元素来说，黑色40%的渐变效果很好。另外一个需要注意的地方是隐藏工具栏的标题。

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

并显示向上的支持...

getSupportActionBar().setDisplayShowTitleEnabled(false);

不要担心如果您在布局预览面板中看到这样的内容...

实际上，当它与内容重叠时会有很大的不同：