半透明状态栏和工具栏

我想集成这样的东西:

在这里输入图像说明

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

在这里输入图像说明

这是我的布局:

<?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”,状态栏不再是半透明的。

Solutions Collecting From Web of "半透明状态栏和工具栏"

如你所说,

“我已经尝试把工具栏放在FrameLayout中,但这样做只是我的工具栏隐藏,就像这样:”。

与此问题是在FrameLayout中添加childView的顺序,您添加工具栏作为第一个孩子,然后添加ImageView。 这就是图像隐藏工具栏的原因。 相反, FameLayout的视图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

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

尝试使用RelativeLayout来代替。

我将从布局中移除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创build一个新的样式(在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()中调用:

启用后退button:

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

为了设置你的半透明的颜色:

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

删除您的ActionBar标题:

 getSupportActionBar().setDisplayShowTitleEnabled(false); 

更重要的是,我会改变你的根LinearLayoutCoordinatorLayout因为它让你更好的控制你的布局(这是一个更强大的FrameLayout )。

我使用的颜色是:

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

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

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

通过所有这些步骤,你应该得到这样的东西:

在这里输入图像说明

请让我知道,如果它适合你。

使用下面的代码

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

不要把状态栏作为独立于你的应用的东西。 图像正在工具栏下方,因为您已经使用了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)); 

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

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> 

我希望它有帮助。

得到了解决,但工具栏重叠的状态栏。 有无论如何修复填充? 如果我使用android:fitsSystemWindows =“true”,状态栏不再是半透明的。

我最近写了一篇关于WindowInsets的文章,你可以查看一下 。 我想这会解决你的问题。

长话短说 – 你所要做的就是通过ViewCompat.setOnApplyWindowInsetListener API将窗口插入仅传递给Toolbar 。 但是你的Toolbar的父母应该通过窗口插入。 在你的情况下,将不会发生,因为默认情况下, LinearLayout和家庭布局不会这样做,你必须onApplyWindowInsets和重写onApplyWindowInsets方法。

我build议你阅读文章,更准确地描述一切。

只需将工具栏高度更改为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" />