实现布局为DrawLayout的状态栏全透明沉侵式效果

原创 于 2017-08-17 10:16:34 发布 · 538 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何实现DrawLayout配合NavigationView达到状态栏全透明的沉浸式效果。通过设置特定主题，并在布局文件中正确配置android:fitsSystemWindows属性，确保侧滑菜单展开时状态栏颜色随菜单变化。同时，需要在build.gradle中添加对design库的依赖。文章提供最终效果展示及demo源码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

现在很多App都实现了沉侵式效果，之前我开发的一个项目用到了，使用的是SystemBarTintManager工具类，对状态栏进行颜色设置，但是发现一个问题，就是drawlayout的侧边菜单滑出来后，状态栏的颜色并不会根据侧滑菜单的颜色变化，将activity的主题设置了

<item name="android:windowTranslucentStatus">true</item>

结果状态栏还是有一层浅色的阴影，视觉感还是不好，于是在网上找了找，最后总结了一套比较简单又实用的方案。

首先，将activity的主题设置为

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--<item name="windowActionBar">false</item>-->
        <!--<item name="windowNoTitle">true</item>-->
        <!-- Customize your theme here. -->
        <!--actionbar颜色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--状态栏背景色-->
        <item name="colorPrimaryDark">@color/colorAccent</item>
        <!--各控制元件(如：check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色-->
        <item name="colorAccent">@color/colorPrimaryDark</item>
    </style>

另外，需要添加一个针对API在19以上的styles 

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
                <!--<item name="windowActionBar">false</item>-->
                <!--<item name="windowNoTitle">true</item>-->
                <item name="android:windowTranslucentStatus">true</item>
                <!-- Customize your theme here. -->
                <!--actionbar颜色-->
                <item name="colorPrimary">@color/colorPrimary</item>
                <!--状态栏背景色-->
                <item name="colorPrimaryDark">@color/colorAccent</item>
                <!--各控制元件(如：check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色-->
                <item name="colorAccent">@color/colorPrimaryDark</item>
        </style>
其中的<item name="android:windowTranslucentStatus">true</item>是将状态栏设为透明，但是效果还不是很理想。

接着，粘出布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.chuji.nulubao.mystatusbar.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/relate"
            android:background="@color/colorAccent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/tv_menu"
                android:text="菜单"
                android:paddingLeft="10dp"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="50dp" />
            <TextView
                android:text="标题"
                android:textSize="15sp"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="50dp" />
        </RelativeLayout>

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

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

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

其中，要使用NavigationView需要在build.grale里面添加依赖compile 'com.android.support:design:26.0.0-alpha1'

效果如下



注意drawlayout的一定要设置android:fitsSystemWindows="true"这个属性，否则还是有阴影。

navigationview的header就是一张背景图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="@drawable/nav_header">

</LinearLayout>


menu部分也是抄的别人的界面，记住这个文件是放在res/menu的目录下 


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <group android:checkableBehavior="single">
        <item android:title="首页" android:id="@+id/mn_home" android:icon="@drawable/home"></item>
        <item android:title="我的信息" android:id="@+id/mn_information" android:icon="@drawable/myinformation"></item>
        <item android:title="猜你喜欢" android:id="@+id/mn_guess" android:icon="@drawable/guess_like"></item>
        <item android:title="电影" android:id="@+id/mn_movie" android:icon="@drawable/movie"></item>
        <item android:title="音乐" android:id="@+id/mn_music" android:icon="@drawable/music"></item>
    </group>
    <item android:title="更多" android:id="@+id/mn_more">
        <menu>
            <item
                android:id="@+id/mn_about"
                android:icon="@drawable/about"
                android:title="关于"/>
            <item android:title="注销"
                  android:id="@+id/mn_out"
                  android:icon="@drawable/out">
            </item>
        </menu>
    </item>
</menu>

最后就是MainActivity的代码 

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout drawerLayout;
    private NavigationView mNavigation;
    private RelativeLayout relate;
    private TextView tv_menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mNavigation = (NavigationView) findViewById(R.id.navigation_view);
        relate = (RelativeLayout) findViewById(R.id.relate);
        tv_menu = (TextView) findViewById(R.id.tv_menu);
        mNavigation.setItemIconTintList(null);//让menu的图标显示自己的颜色
        mNavigation.setNavigationItemSelectedListener(this);//设置侧滑菜单item的监听事件
        relate.setPadding(0,getStatusBarHeight(),0,0);//设置padding值，防止布局嵌入到状态栏里面
        drawerLayout.setFitsSystemWindows(false);//这一步很关键，必须要
        tv_menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });
    }

    public int getStatusBarHeight() {//获取状态栏的高度
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId){
            case R.id.mn_home: {
                Toast.makeText(MainActivity.this,"首页",Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.mn_movie: {
                Toast.makeText(MainActivity.this,"电影",Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.mn_music: {
                Toast.makeText(MainActivity.this,"音乐",Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.mn_information:{
                Toast.makeText(MainActivity.this,"我的信息",Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.mn_about:{
                Toast.makeText(MainActivity.this,"关于",Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.mn_out:{
                Toast.makeText(MainActivity.this,"注销",Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.mn_guess:{
                Toast.makeText(MainActivity.this,"猜你喜欢",Toast.LENGTH_SHORT).show();
                break;
            }
        }
        drawerLayout.closeDrawer(GravityCompat.START);
        return false;
    }
}

里面主要的部分已经加了注释，另外提一下navigationview监听器的返回值，如果为true，点击了对应item后，该item背景会变暗，表示选中状态，为false就不是变。

所有的实现步骤就是这些，最后附上效果图。

                     

附上demo源码

逸隽
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值