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

来源:互联网 发布:js隐藏style没有定义 编辑:程序博客网 时间:2024/06/05 20:04

现在很多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源码

原创粉丝点击