Android学习一起来学习Material DesignAndroid开发

Android 沉浸式状态栏 +DrawerLayout+To

2017-03-09  本文已影响2514人  HannyYeung

概述

Android 状态栏沉浸式基于4.4及以上, Android 系统名字、版本、API level的对应关系如下:

Code name Version Cool
Nougat 7.1 API level 25
Nougat 7.0 API level 24
Marshmallow 6.0 API level 23
Lollipop 5.1 API level 22
Lollipop 5.0 API level 21
KitKat 4.4-4.4.4 API level 19
Jelly Bean 4.3.x API level 18
Jelly Bean 4.2.x4 API level 17
Jelly Bean 4.1.x API level 16

所以说只有在kitkat及以上才能实现沉浸式效果

诱因

前两天看郭霖的第二行代码,章节第十二部分主要是写了关于Material Design UI设计,界面很是炫酷,其中包括DrawerLayout+Toolbar的使用界面很是炫酷,写的也是通俗易懂,代码连接,但是本书是基于5.0写的,所以效果没有适配到4.4x上.
他的效果代码截图:

5.0及以上

5x_01.png
5x_02.png

4.4及以上

4x_01.png 4x_02.png

可以到4.4上的效果还是有差别的,下面给出解决方法:
方法有些拙劣,如果有其他更好的解决办法,请一定告诉我.

img.jpg

这三个颜色,新建工程时都是给出

    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
<resources>

    <!-- Base application theme. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme" parent="@style/BaseAppTheme"></style>
</resources>

新建:values-v19和values-v21文件夹,分别在里面创建styles文件,分别配置
values-v19

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:fitsSystemWindows">false</item>
    </style>

    <style name="fitsystem">
        <item name="android:fitsSystemWindows">true</item>
    </style>
</resources>

values-v21

<resources>

    <style name="AppTheme" parent="BaseAppTheme">
    </style>
</resources>

为什么要这么配置呢,因为本例子用到了CoordinatorLayout,AppBarLayout,Toolar,所以要单独对对Toolbar做处理,看代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                style="@style/fitsystem"
                android:layout_width="match_parent"
                android:layout_height="@dimen/toolBarheight"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swip_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.v4.widget.SwipeRefreshLayout>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done" />
    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

可以看到在在Toolbar里让布局在v19里是

 <style name="fitsystem">
      <item name="android:fitsSystemWindows">true</item>
  </style>

同样的道理这个时候Toolbar的高,也要出处理,在v19里面要设置更高些,因为它得一部分是嵌入到状态里面的
所以在values values-v19 values-v21都设置了Toolbar的高度,在19里单独设置了80dp ,其他的都是54,这个值可以自己来衡量

      setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

      StatusBarCompat.compat(this);

这里如果是在4.4上就要另外添加一个颜色块到状态栏

public class StatusBarCompat {

    private static final int statusColor = Color.parseColor("#303F9F");

    public static void compat(Activity activity ) {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
            View statusBarView = contentView.getChildAt(0);
            //改变颜色时避免重复添加statusBarView
            if (statusBarView != null && statusBarView.getMeasuredHeight() == getStatusBarHeight(activity)) {
                statusBarView.setBackgroundColor(statusColor);
                return;
            }
            statusBarView = new View(activity);
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    getStatusBarHeight(activity));
            statusBarView.setBackgroundColor(statusColor);
            contentView.addView(statusBarView, lp);
        }

    }

    public static int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
}

5.0及以上

5x_03.png

4.4及以上

4x_03.png

可以看到效果就OK了,然后我有测试了7.0效果也是OK的.文笔稍差.

总结

当然了可能你把这个用到你的项目可能会发现有些问题,因为本文是针对郭霖代码处理的,尽可能最小的改动达到效果.要特别注意在v19

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

这个要配合代码布局文件使用,要根据自己的项目布局去处理,如这篇文章家杰的博客
本文参考了鸿洋的经典文章
这是我的代码,错误或有更好的方法请告诉我.

上一篇 下一篇

猜你喜欢

热点阅读