状态栏和导航栏上的 Google Now 渐变/阴影
Posted
技术标签:
【中文标题】状态栏和导航栏上的 Google Now 渐变/阴影【英文标题】:Google Now gradient/shadow on status bar & navigation bar 【发布时间】:2017-04-19 01:05:12 【问题描述】:我正在尝试制作与 Google Now 类似的状态栏和导航栏渐变。
图片参考:矩形区域如下图所示
在 android Marshmallow 上尝试以下选项后,
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
我得到以下行为
图片参考:
谁能建议我如何在这两个上获得渐变? 这是渐变还是阴影?
【问题讨论】:
不要使用旧操作系统选项,您似乎添加了旧操作系统选项 你指的是“minSdkVersion”还是“targetSdkVersion”? .... 我在 Android 6.0 设备上进行测试,现在谷歌的屏幕截图也取自同一设备...我在示例应用程序中提到 minSdkVersion 为 21 , targetSdkVersion 为 23 【参考方案1】:这是一个渐变,用作scrim。为了达到这个效果,你要做的第一件事是移除状态栏和导航栏的半透明底层。 Another answer 详细说明了如何在低平台设备上执行此操作;但在 Android Lollipop 及更高版本上,您只需将两个样式属性设置为透明即可:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
然后,要添加稀松布,您可以使用可绘制形状:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:type="linear"
android:angle="270"
android:centerY="0.3"
android:startColor="#66000000"
android:centerColor="#33000000"
android:endColor="#00000000"/>
</shape>
然后您可以在布局中将其设置为View
的背景:
<View
android:layout_
android:layout_
android:background="@drawable/scrim"/>
您还可以将android:rotation="180"
属性设置为对屏幕底部使用相同的渐变。
【讨论】:
如果我注意到它正确,我可以看到它不是具有稀松布的 google now 应用程序,而是主屏幕(即状态栏本身具有稀松布)。我们可以查看状态栏的android源码,scrim是如何应用的。 @Jitendar 我不认为它直接应用于状态栏(尽管我不会完全排除它)。我认为不是开源的Google Now Launcher 将内容稀松布应用到主屏幕【参考方案2】:首先添加一个样式,使动作状态栏完全透明:
<!-- Base application theme. -->
<style name="TransparentTheme" parent="android:Theme.Holo.Light">
<!-- Customize your theme here. -->
<item name="android:windowBackground">@null</item>
<item name="android:actionBarStyle">@style/ActionBarStyle.Transparent</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="ActionBarStyle.Transparent" parent="android:Widget.ActionBar">
<item name="android:background">@null</item>
<item name="android:displayOptions">showHome|showTitle</item>
<item name="android:titleTextStyle">@style/ActionBarStyle.Transparent.TitleTextStyle</item>
</style>
<style name="ActionBarStyle.Transparent.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@android:color/white</item>
</style>
添加稀松布创建一个可绘制文件并添加以下代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#88000000" />
<gradient
android:angle="90"
android:centerColor="#66000000"
android:centerY="0.3"
android:endColor="#00000000"
android:startColor="#CC000000"
android:type="linear" />
</shape>
并将其作为背景添加到您的主题中;
【讨论】:
不像以前那样工作了,但我肯定从你的回答中得到了一些很好的暗示。以上是关于状态栏和导航栏上的 Google Now 渐变/阴影的主要内容,如果未能解决你的问题,请参考以下文章