工具栏的对棒棒糖状态栏阴影 [英] Toolbar's shadow on status bar for Lollipop

查看:564
本文介绍了工具栏的对棒棒糖状态栏阴影的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我用一个模板从 Android的工作室所使用应用程序兼容性工具栏。不幸的是,工具栏施放状态栏上的影子所以它看起来并不right.I 也实施 NavigationDrawer ,所以我不能简单地设置颜色的状态栏。

这是它的外观:

在这里输入的形象描述

这是应该的:

在这里输入的形象描述

activity_main.xml中

 < android.support.v4.widget.DrawerLayout的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
的xmlns:程序=htt​​p://schemas.android.com/apk/res-auto
的xmlns:工具=htt​​p://schemas.android.com/tool​​s
机器人:ID =@ + ID / drawer_layout
机器人:layout_width =match_parent
机器人:layout_height =match_parent
机器人:fitsSystemWindows =真
工具:openDrawer =开始><包括
    布局=@布局/ app_bar_main
    机器人:layout_width =match_parent
    机器人:layout_height =match_parent/>< android.support.design.widget.NavigationView
    机器人:ID =@ + ID / nav_view
    机器人:layout_width =WRAP_CONTENT
    机器人:layout_height =match_parent
    机器人:layout_gravity =开始
    应用:headerLayout =@布局/ nav_header_main
    应用:菜单=@菜单/ activity_main_drawer/>< /android.support.v4.widget.DrawerLayout>

app_bar_main.xml

 <?XML版本=1.0编码=UTF-8&GT?;
< android.support.design.widget.CoordinatorLayout的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
的xmlns:程序=htt​​p://schemas.android.com/apk/res-auto
的xmlns:工具=htt​​p://schemas.android.com/tool​​s
机器人:layout_width =match_parent
机器人:layout_height =match_parent
机器人:fitsSystemWindows =真
工具:上下文=hu.pe.thinhhoang.aaosync.MainActivity>< android.support.design.widget.AppBarLayout
    机器人:layout_width =match_parent
    机器人:layout_height =WRAP_CONTENT
    机器人:主题=@风格/ AppTheme.AppBarOverlay>    < android.support.v7.widget.Toolbar
        机器人:ID =@ + ID /工具栏
        机器人:layout_width =match_parent
        机器人:layout_height =?ATTR / actionBarSize
        机器人:ATTR / colorPrimary背景=
        应用:popupTheme =@风格/ AppTheme.PopupOverlay/>< /android.support.design.widget.AppBarLayout><包括布局=@布局/ content_main/>< /android.support.design.widget.CoordinatorLayout>

styles.xml(V21)

 <资源>><样式名称=AppTheme.NoActionBar>
    <项目名称=windowActionBar>假LT; /项目>
    <项目名称=windowNoTitle>真< /项目>
    <项目名称=机器人:windowDrawsSystemBarBackgrounds>真< /项目>
    <项目名称=机器人:statusBarColor> @android:彩色/透明< /项目>
< /风格>< /资源>


解决方案

这阴影下面LOLLIPOP API的 windowContentOverlay 部分的(上LOLLIPOP它@null )。

当你使用工具栏小部件的工作的工具栏不窗口装饰的一部分了,所以影子在窗​​口顶部到工具栏,而不是它下面的开始(所以你想要的windowContentOverlay是@null)。此外,您需要添加工具栏pre-LOLLIPOP与背景设置为垂直阴影绘制( 8DP高大梯度#20000000 到#00000000 效果最好)。在LOLLIPOP可以集8DP海拔工具栏上的来代替。

I'm using a template from Android Studio that used AppCompat Toolbar. Unfortunately, the toolbar casts shadow on the status bar so it doesn't look right.I also implement a NavigationDrawer so I can't simply set the color of the status bar.

This is how it looks:

This is how it should be:

activity_main.xml

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

app_bar_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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="hu.pe.thinhhoang.aaosync.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

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

</android.support.design.widget.CoordinatorLayout>

styles.xml (v21)

<resources>>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

</resources>

解决方案

This shadow is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's @null).

When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be @null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.

这篇关于工具栏的对棒棒糖状态栏阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆