半透明状态栏和工具栏

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

我会删除Toolbar从您的布局和使用的实现ActionBar来自AppCompat.Theme:

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

当然你应该记得将这个主题应用到你Activity的AndroidManifest.xml:

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

通过执行所有这些步骤,您应该得到以下内容:

如果它适合您,请告诉我.

Answer 2

如你所说,

"我已经尝试将工具栏放在FrameLayout中,但这样做我的工具栏只是隐藏,就像这样:".

这个问题是添加childView的顺序FrameLayout,你添加工具栏作为第一个孩子,之后你添加了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文件中添加此属性以使statusBar透明
<item name="android:windowTranslucentStatus">true</item>
为了使statusBar 后面的内容使用此链接

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

Answer 3

LinearLayout会自动将其放置ImageView在Toolbar.

尝试使用 aRelativeLayout代替。