[译] 5 分钟让 Drawer 在状态栏下可见

栏目: IOS · Android · 发布时间: 5年前

内容简介:你也许听过谷歌最新的设计理念 Material Design (“质感设计”)规范,可以让你的抽屉式导航栏跨越整个屏幕,包括状态栏,并且让抽屉后的所有控件以灰暗的网格形式可见。然而,许多应用打开抽屉式导航栏时看来是这样的这里将示范如何把这些元素改造成上面说到的规范。

你也许听过谷歌最新的设计理念 Material Design (“质感设计”)规范,可以让你的抽屉式导航栏跨越整个屏幕,包括状态栏,并且让抽屉后的所有控件以灰暗的网格形式可见。

然而,许多应用打开抽屉式导航栏时看来是这样的

[译] 5 分钟让 Drawer 在状态栏下可见

这里将示范如何把这些元素改造成上面说到的规范。

扩展你的主题

你可能已经给包含抽屉的 Activity 定义了一个样式。

<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>  
复制代码

第一步,创建一个扩展自 AppTheme 的新 Theme

vaules/styles.xml

<style name="AppTheme.NoActionBar">  
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
复制代码

v21/styles.xml

<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>  
复制代码

并且确保你的 Activity 指定使用了这个 theme,比如

<activity  
    android:name="MyDrawerNavActivity"
    android:theme="@style/AppTheme.NoActionBar"
复制代码

配置 DrawerLayout 控件

第二步,到你定义 DrawerLayout 控件的地方,设置 insetForegroundColor (如果你不想控制 ScrimInsetLayout 的颜色,你也可以不设置)。并设置好 fitsSystemWindow 属性值

<android.support.v4.widget.DrawerLayout  
    ...
    android:fitsSystemWindows="true"
    app:insetForeground="@color/inset_color"
    >
复制代码

看起来这样

[译] 5 分钟让 Drawer 在状态栏下可见

当然,如果一会你想在代码里改变状态栏的颜色或 ScrimInsetLayout 的颜色,你可以在 DrawerLayout 中通过setters方法来获取并改变。

drawerLayout.setStatusBarBackgroundColor(ContextCompat.getColor(this, R.color.wierd_green));  

drawerLayout.setScrimColor(ContextCompat.getColor(this, R.color.wierd_transparent_orange));  
复制代码

感谢你的阅读,如果在我分享的内容里,你有更好的方法来实现,那么在评论里更正,感激不尽。

* 以下添加于 6月5, 2016*

如果你继承 DrawerLayout

Android Support 兼容包(AppCompat) 会在 DrawerLayout 里加入一个 android.support.design.internal.ScrimInsetsFrameLayout , 但如果你使用继承自 DrawerLayout 的自定义控件则不会这么做。

如果你继承了 DrawerLayout 但是没有加入 ScrimInsetsFrameLayout ,你需要这么做:

activity_with_drawer_layout.xml

<com.myproject.views.MyDrawerLayout  
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <fragment
        android:id="@+id/left_drawer"
        android:name="com.myproject.fragments.NavigationFragment"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
         />

</com.myproject.views.MyDrawerLayout>  
复制代码

在你的抽屉布局文件中加入一个 ScrimInsetsFrameLayout ,如:

navigation_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>  
<android.support.design.internal.ScrimInsetsFrameLayout  
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    >

    <!--- content of drawer here --->

</android.support.design.internal.ScrimInsetsFrameLayout>复制代码

以上所述就是小编给大家介绍的《[译] 5 分钟让 Drawer 在状态栏下可见》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据驱动:从方法到实践

数据驱动:从方法到实践

桑文锋 / 电子工业出版社 / 2018-3 / 49

本书是从理论到实践的全面且细致的企业数据驱动指南,从作者的百度大数据工作说起,完整还原其从零到一构建百度用户行为大数据处理平台经历。详解大数据本质、理念与现状,围绕数据驱动四环节——采集、建模、分析、指标,深入浅出地讲述企业如何将数据驱动方案落地,并指出数据驱动的价值在于“数据驱动决策”、“数据驱动产品智能”。最后通过互联网金融、电子商务、企业服务、零售四大行业实践,从需求梳理、事件指标设计、数据......一起来看看 《数据驱动:从方法到实践》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具