像 Uber 一样透明的操作栏和状态栏
Posted
技术标签:
【中文标题】像 Uber 一样透明的操作栏和状态栏【英文标题】：Transparent action bar and status bar like Uber 【发布时间】：2017-10-12 12:27:29 【问题描述】：我已经对此主题进行了一些研究，但我找不到适合我的应用程序/活动的解决方案。
-
我试图获得一个透明的操作栏。
首先，我尝试更改 androidManifest.xml 中的主题：
values/styles.xml：
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">@null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">@android:color/transparent</item>
和
values-v21/styles.xml：
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="colorPrimary">@android:color/transparent</item>
</style>
结果就是这样：
所以我只得到一些浅灰色的操作栏，左侧/右侧有一些间隙。
其次，我尝试在我的布局中使用fitsSystemWindow="true" 和android:background="@android:color/transparent"，但它也没有解决问题。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:fitsSystemWindows="true"
tools:context="com.example.poweranimal.letsgo.Application.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_
android:layout_
android:background="@android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
但我得到与以前相同的输出:( 2. 此外，我还尝试了获取透明状态栏：
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
和
<item name="android:statusBarColor">@android:color/transparent</item>
但这也不起作用（没有任何改变）。
我真正想要的是这样的：
如果有人对我有可能的解决方案，那就太酷了。
提前致谢。
【问题讨论】：
【参考方案1】：1. 首先，您必须更改layout 结构以在透明Toolbar 和StatusBar 下显示MAP，并从现有的gap 中删除左右gap Toolbar。
activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:fitsSystemWindows="false">
<RelativeLayout
android:layout_
android:layout_>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
android:layout_marginTop="24dp"
android:elevation="1dp" />
<LinearLayout
android:layout_
android:layout_
android:background="@drawable/sample_map">
<!-- put your content here -->
</LinearLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
2. 在您的MainActivity 中，执行以下操作以初始化Toolbar 并使Toolbar 和StatusBar 为transparent。
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Toolbar :: Transparent
toolbar.setBackgroundColor(Color.TRANSPARENT);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("***");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Status bar :: Transparent
Window window = this.getWindow();
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(Color.TRANSPARENT);
...........
..................
3. 将以下主题应用到您的MainActivity。
values/styles.xml：
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
.......
...........
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
AndroidManifest.xml：
<activity
android:name=".EmptyActivity"
android:theme="@style/AppTheme.NoActionBar">
</activity>
输出：
仅供参考，我刚刚在我的内容LinearLayout 中使用了地图的示例图像来显示行为。对于您的情况，将您的所有内容（searchbar, map）放入其中。
希望对你有帮助~
【讨论】：
@FAT 它给了我一个透明的状态栏，但它不像 Uber 那样完全透明。 经过10页的搜索终于找到了这个答案。太好了！【参考方案2】：试试这个。
将以下代码添加到您的活动中以将状态栏设置为透明，对于操作栏，您应该尝试使用透明背景的自定义操作栏。
private void settingStatusBarTransparent()
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT)
Window w = getWindow(); // in Activity's onCreate() for instance
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
getWindow().setNavigationBarColor(Color.BLACK);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
getWindow().setStatusBarColor(Color.TRANSPARENT);
//setStatusBarTranslucent(true);
【讨论】：
这是唯一对我有用的解决方案。谢谢。 底部导航栏也变得透明。我的按钮与系统按钮重叠【参考方案3】：试试这个：
首先在colors.xml 中添加自定义颜色，如下所示：
<color name="transparent_white">#80FFFFFF</color>
然后将此颜色设置为Where to? xml 文件主布局的背景。
在这一行中#80 是颜色的不透明度（简而言之，与透明相反）。
颜色前面的前两个字母：
-
'#00' - 全透明色
'#FF' 或 没有任何定义 - 完全不透明的颜色
用下面的XML更改并尝试
<android.support.design.widget.AppBarLayout
android:layout_
android:layout_
android:background="@color/transparent_white">
希望这能解决你的问题。
【讨论】：
【参考方案4】：试试这个：在你的活动中：设置全屏标志
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState)
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
if (android.os.Build.VERSION.SDK_INT >= 21)
getWindow().setStatusBarColor(Color.TRANSPARENT);
super.onCreate(savedInstanceState);
现在在清单中：应用主题
<activity
android:name=".YourActivity"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@style/AppTheme.ActionBar.Transparent"/>
在 res/styles.xml 中
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="colorPrimary">@android:color/transparent</item>
<item name="windowActionBarOverlay">false</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowActionBarOverlay">false</item>
</style>
并在您的CoordinatorLayout 中设置android:fitsSystemWindows="false"
fitsSystemWindows="false" : 正常绘制视图，状态下
bar 因为你设置了窗口标志。
fitsSystemWindows="true" : 绘制状态下的视图
bar 因为您设置了窗口标志，但添加了一个顶部
填充，以便在状态栏下方绘制内容并且它们不会
重叠。
【讨论】：
不幸的是，您的解决方案没有任何变化。如果我设置android:fitsSystemWindows="false"状态栏就会消失。
statusbar disappears?它会变得透明。！顺便说一句..我使用代码，它对我很有效..然后你应该检查其他答案【参考方案5】：
首先我的观点是，您创建自定义操作栏并将操作栏的背景设置为透明。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:background="@android:color/transparent"
android:id="@+id/toolBar"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageButton
android:background="@android:color/transparent"
android:id="@+id/btnBackButton"
android:layout_
android:layout_
android:src="@drawable/back" />
<ImageView
android:layout_
android:layout_
android:layout_gravity="center_vertical|center_horizontal"
android:id="@+id/toolbar_image"
android:background="@android:color/transparent"
android:src="@drawable/logo_header_new"
android:visibility="visible"
/>
</android.support.v7.widget.Toolbar>
【讨论】：
【参考方案6】：您需要做的就是在您的主题中设置这些属性：
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
您希望拥有透明状态栏的活动/容器布局需要此属性集：
android:fitsSystemWindows=”true”
希望对你有帮助
【讨论】：
以上是关于像 Uber 一样透明的操作栏和状态栏的主要内容，如果未能解决你的问题，请参考以下文章
iOS 7，状态栏和导航栏：像 Reeder 一样使用侧面板隐藏或滑动