半透明状态栏和工具栏

Question

我想集成这样的东西：

我已经这样做了，但我似乎无法将 imageview 放在工具栏下方。没有工具栏，我可以让它在状态栏下，但是这两者结合起来是不可能的。

这是我的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context="com.project.android.PhotoActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/photo_tl"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#59000000"
        tools:ignore="UnusedAttribute" />

    <ImageView
        android:id="@+id/photo_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitStart" />


</LinearLayout>

在我的活动中，我做了以下事情：

  getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

我还声明了一个 styles-v21.xml 文件：

<style name="Project.Photo" parent="Project.Light">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">#59000000</item>
</style>

并将其设置为 PhotoActivity 的默认样式。 我已经尝试将工具栏放在 FrameLayout 中，但这样做我的工具栏只是隐藏起来，如下所示：

提前致谢。

已修复，但工具栏与状态栏重叠。无论如何要修复填充？如果我使用 android:fitsSystemWindows="true"，状态栏不再是半透明的。

Answer 1

只需将工具栏高度更改为 wrap_content：

<android.support.v7.widget.Toolbar
    android:id="@+id/photo_tl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#59000000"
    tools:ignore="UnusedAttribute" />

Answer 2

TLDR;您必须将工具栏包装在 LinearLayout 中。

我为使其工作所做的工作类似于@Akhilesh Kumar 的方法，但我将工具栏包裹在一个固定工具栏重叠的 LinearLayout 中。我还在那个 LinearLayout 中将 fitSystemWindows 设置为 true。

<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"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">

<ImageView
    android:id="@+id/photo_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="fitStart"/>

<LinearLayout

    android:id="@+id/content_card_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/photo_tl"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#59000000"
        tools:ignore="UnusedAttribute"/>

</LinearLayout>
</FrameLayout>

希望对你有帮助。

Answer 3

如你所说，

“我已经尝试将工具栏放在 FrameLayout 中，但这样做我的工具栏只是隐藏起来，如下所示：”。

问题是在FrameLayout 中添加 childView 的顺序，您将 Toolbar 添加为第一个子项，然后添加 ImageView。这就是图像隐藏工具栏的原因。相反，FameLayout 内部的视图顺序应该是这样

<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"
          android:fitsSystemWindows="true"
          tools:context="com.project.android.PhotoActivity">

          <ImageView
              android:id="@+id/photo_image"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:adjustViewBounds="true"
              android:scaleType="fitStart" />

          <android.support.v7.widget.Toolbar
              android:id="@+id/photo_tl"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:background="#59000000"
              tools:ignore="UnusedAttribute" />

    </FrameLayout>

同样对于 API 级别 >=19 ，您可以在style.xml 文件中添加此属性以使状态栏透明
<item name="android:windowTranslucentStatus">true</item>
要在 statusBar 后面制作内容，请使用此链接

https://developer.android.com/training/system-ui/status.html#behind

Answer 4

已修复，但工具栏与状态栏重叠。无论如何要修复填充？如果我使用 android:fitsSystemWindows="true"，状态栏不再是半透明的。

我最近写了一篇关于 WindowInsets 的帖子，你可以check it out。我认为它会解决您的问题。

长话短说-您要做的就是通过ViewCompat.setOnApplyWindowInsetListener API 仅将窗口插图传递给Toolbar。但是您的 Toolbar 的父级应该通过窗口插图。在您的情况下，这不会发生，因为默认情况下 LinearLayout 和家庭布局不会这样做，您必须继承并覆盖 onApplyWindowInsets 方法。

我建议您阅读这篇文章，其中所有内容都描述得更准确。

Answer 5

不要将状态栏视为与您的应用分开的东西。图像出现在工具栏下方，因为您使用了 LinearLayout。如果您使用的是 RelativeLayout，您的图像将从与工具栏相同的高度开始。

现在为了使状态栏透明并且一切都从状态栏开始，请使用以下内容。

<style name="AppTheme.TranslucentStatusBar" >
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

为您的活动使用上述样式，一切都从状态栏开始。现在对于工具栏，您可以通过将状态栏的高度添加为工具栏的填充来增加工具栏的高度。这可以按如下方式完成：

toolbarContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                Rect frame = new Rect();
                getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
                toolbarContainer.setPadding(0, frame.top, 0, 0);
            }
        });

您可以为状态栏设置颜色，并使用与工具栏上的 AlphaTransparency 相同的颜色。

getWindow().setStatusBarColor(ContextCompat.getColor(this, android.R.color.transparent));

现在您可以控制一切，包括状态栏和工具栏。

Answer 6

使用下面的代码

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/AppTheme.CollapsingToolbarLayoutExpandedTextStyle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:theme="@style/YourTheme"
                app:layout_collapseMode="pin" />

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

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

<!-- Rest of your view-->

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

Answer 7

我会从您的布局中删除Toolbar，并使用AppCompat.Theme 中的ActionBar 实现：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

然后，我会为半透明的ActionBar（在values/styles.xml：

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="windowActionBarOverlay">true</item>
</style>

在v21/styles.xml:

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

我假设你的Activity 扩展了AppCompatActivity，所以你可以在onCreate() 中调用：

启用后退按钮：

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

用于设置半透明颜色：

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.yourTranslucentColor)));

删除您的ActionBar 标题：

getSupportActionBar().setDisplayShowTitleEnabled(false);

此外，我会将您的根 LinearLayout 更改为 CoordinatorLayout，因为它可以让您更好地控制您的布局（它是一个更强大的 FrameLayout）。

我使用的颜色是：

<color name="yourTranslucentColor">#29000000</color>

当然你应该记得把这个主题应用到你的ActivityAndroidManifest.xml：

<activity
    android:name=".ui.activity.YourActivity"
    android:theme="@style/AppTheme.Transparent">
</activity>

通过执行所有这些步骤，您应该得到如下结果：

如果它适合你，请告诉我。

Answer 8

LinearLayout 会自动将ImageView 放在Toolbar 下方。

尝试改用RelativeLayout。