半透明状态栏和工具栏

时间：2017-01-12 21:04:29

标签： android android-layout material-design android-toolbar android-statusbar

我想整合这样的东西：

enter image description here

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

enter image description here

这是我的布局：

<?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中了，但是我的工具栏只是隐藏了，就像这样：

enter image description here

提前致谢。

修复了问题，但工具栏与状态栏重叠。反正有没有修复填充？如果我使用android：fitsSystemWindows =＆＃34; true＆＃34;，状态栏不再是半透明的。

8 个答案:

答案 0 :(得分：6)

我会从您的布局中移除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>

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

enter image description here

如果适合您，请告诉我。

答案 1 :(得分：6)

正如你所说，

  

“我已经尝试将工具栏放在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级别＆gt; = 19，您可以在style.xml文件中添加此属性，以使statusBar透明
<item name="android:windowTranslucentStatus">true</item>
为了使statusBar后面的内容使用此链接

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

答案 2 :(得分：2)

使用以下代码

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

答案 3 :(得分：1)

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

请尝试使用RelativeLayout。

答案 4 :(得分：1)

不要将状态栏视为与您的应用分开的内容。图像位于工具栏下方，因为您已使用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));

现在您可以控制所有内容，包括状态栏和工具栏。

答案 5 :(得分：1)

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

我做的工作与@Akhilesh Kumar的方法类似，但我将工具栏包装在LinearLayout中，修复了工具栏的重叠。我还在该LinearLayout中将fitsSystemWindows设置为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>

我希望它有所帮助。

答案 6 :(得分：0)

  

修复了问题，但工具栏与状态栏重叠。反正有没有修复填充？如果我使用android：fitsSystemWindows =＆＃34; true＆＃34;，状态栏不再是半透明的。

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

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

我建议你阅读这篇文章，其中所有内容都会更精确地描述。

答案 7 :(得分：-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" />
相关问题
最新问题