CoordinatorLayout + AppBarLayout +透明状态栏

时间:2019-03-13 18:04:43

标签: android android-layout android-design-library

  

我的场景

我有一个带有Coordinator的Activity(最小SDK 19)和具有Image and Scroll Behaviors的AppBar,一切正常,除了我的状态栏不透明也不透明。以下是我的

<style name="AppTheme.Collapsing"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item> </style>

然后在清单中将该样式设置为该Activity。以下是我的xml布局。

这些是我真正想要的和得到的图像。

I got like that, no transparent status bar. I want like that, with transparent status bar. After scroll top, this is the result. This is ok. 图片1.我就这样,没有透明的状态栏。
图片2.我想要那样,带有透明的状态栏。
图片3.滚动后的结果,没关系。

`<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

<com.google.android.material.appbar.AppBarLayout
        android:fitsSystemWindows="true"
        android:id="@+id/app_bar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <com.google.android.material.appbar.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <androidx.appcompat.widget.AppCompatImageView
                app:srcCompat="@drawable/splash"
                android:id="@+id/expandedImage"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <include layout="@layout/include_match_detail"/>

</androidx.core.widget.NestedScrollView>


<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@drawable/ic_logo"/>

`

2 个答案:

答案 0 :(得分:0)

您可以尝试使用此样式文件

styles.xml;

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>
 <style name="AppTheme.NoActionBar">

    <item name="android:textColorSecondary">@color/white</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowBackground">@color/colorPrimaryDark</item>
    <item name="android:windowDisablePreview">true</item>
    <item name="colorPrimary">@android:color/transparent</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="colorPrimaryDark">@android:color/transparent</item>
</style>

还需要为API级别21创建样式

styles.xml for v21;
<style name="AppTheme.NoActionBar">
    <item name="android:windowBackground">@color/colorPrimary</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDisablePreview">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="colorPrimary">@android:color/transparent</item>
    <item name="colorPrimaryDark">@android:color/transparent</item>

    <item name="android:colorAccent">@color/colorAccent</item>
    <item name="android:textColorSecondary">@color/white</item>
</style>

然后在您的AndroidManifest.xml文件中,为应用程序指定样式

AndroidManifest.xml

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:networkSecurityConfig="@xml/network_security_config"
        android:roundIcon="@mipmap/ic_launcher"
        android:supportsRtl="true"
        android:theme="@style/AppTheme.NoActionBar"
        android:usesCleartextTraffic="true"
        tools:ignore="GoogleAppIndexingWarning">
        ...
</application>

当我尝试使用透明状态进行布局时遇到的另一个问题。 我需要将XML布局内容放在DrawerLayout中,以使状态栏透明。

答案 1 :(得分:0)

将所有android:fitsSystemWindows属性从“ true”更改为“ false”,这可以帮助您获取半透明的状态栏,
但是执行此操作后,您的collapsingbarlayout将折叠起来,并且工具栏中的标题可能会显示在状态栏中,
那么您可以尝试在工具栏中添加android:layout_marginTop属性,并将其值设置为“ 20dp”。

相关问题