半透明状态栏和工具栏

Question

我想整合一些像这样的东西:

我已经这样做了，但是我似乎不能把图像视图放在工具栏下面。没有工具栏，我可以在状态栏下制作，但是把这两者结合起来是不可能的。

这是我的布局：

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

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

提前感谢。

已修复，但工具栏与状态栏重叠。有没有办法修复衬垫？如果我使用android：fitsSystemWindows=“true”，状态栏不再半透明。

Answer 1

使用下面的代码

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

正如你所说，

我已经尝试过将工具栏放在框架布局中，但这样做时，我的工具栏只是隐藏起来，就像这样。

这样做的问题是在FrameLayout中添加儿童视图的顺序，您将工具栏作为第一个孩子添加，然后添加ImageView。这就是图像隐藏工具栏的原因。相反，家庭布局中的视图顺序应该是这样的

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

Answer 3

我会从您的布局中删除工具栏，并使用 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 创建一个新样式（在值/样式中.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>

我假设您的活动扩展了AppCompatActivity，因此在onCreate（）中您可以调用：

要启用后退按钮：

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

要设置半透明颜色：

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

要删除您的< code>ActionBar标题:

getSupportActionBar().setDisplayShowTitleEnabled(false);

此外，我会将您的根< code>LinearLayout更改为< code>CoordinatorLayout，因为这样您可以更好地控制布局(这是一个更强大的< code>FrameLayout)。

我使用的颜色是：

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

当然，您应该记住将此主题应用于AndroidManifest.xml中的Activity：

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

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

如果对你有用，请告诉我。