android - 使工具栏透明

Question

create_account.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 透明。这样我们就可以看到背景图像。我尝试了不同的方法。但找不到正确的解决方案。

请帮忙。谢谢

Answer 1

大多数时候我们希望工具栏是半透明的，因为我们想在它后面显示内容。问题是工具栏后面内容的颜色可能与工具栏元素/文本的颜色(例如向上/向后箭头)发生冲突。

因此，您会在很多实现中看到工具栏实际上不是透明的，而是带有渐变的半透明。

你可以用下面的代码来获得这个:

<?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);

如果您在布局预览面板中看到类似内容，请不要担心...

实际上重叠内容时看起来非常不同: