Toolbar透明沉浸背景-善用FrameLayout

还是先放图吧：

 

最近做个小东西，写到了音乐播放界面，颜值这方面网易云音乐绝对是佼佼者呀。于是就像弄出一个类似的效果，然后全屏都是歌曲图片高斯模糊的背景，包括toolbar。

我的布局主要有两层是这个层级结构：

RelativeLayout->Toolbar,ImageView

我最初的思路有两个：

一是把RelativeLayout的background直接设置模糊后的背景；

二是把ImageView的高度设置为match_parent，然后把模糊好的图片设置为它的背景。

可是这么一来，不管是RelativeLayout还是ImageView，我上面的toolbar的所有内容都被这个铺满窗口的背景给覆盖了，我的返回图标，文字，颜色都被覆盖住不能显示出来。

搞了大概几个星期，就在今天，给公司项目加新界面的时候，要用到FrameLayout，于是突然来了灵感，也许我只是少了个FrameLayout呢？FrameLayout可以使得两个控件重叠显示，如果我在布局最外层嵌套一个FrameLayout，那可不可以解决呢？

顺着这个思路，我把FrameLayout放在布局最外层，现在层级结构变成了

FrameLayout->RelativeLayout->Toolbar,ImageView

然后现在再按照上面的两种方法之一设置背景，就实现了Toolbar跟下面整体统一背景了。

曾经被framelayout设置fragment时的重叠问题困扰，现在又能用它的这一特性来解决问题，真好！

下面把主要代码贴上：

布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".view.activity.MusicPlayActivity">
        <RelativeLayout
            android:id="@+id/rlMusicPlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:background="@color/white">
        <include
            layout="@layout/include_music_play_toolbar"/>
        <ImageView
            android:id="@+id/ivBg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"/>
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">
            <pers.ll.likenews.ui.CircleImageView
                android:id="@+id/ivMusicPic"
                android:layout_width="260dp"
                android:layout_height="260dp"
                tools:src="@mipmap/ic_launcher"
                />
        </FrameLayout>
        
        <RelativeLayout
            android:id="@+id/rlSeek"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/rlMusicCtrl"
            android:layout_marginBottom="20dp"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/tvCurTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                tools:text="00:49"
                android:textColor="@color/colorAccent"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="20dp"/>
            <SeekBar
                android:id="@+id/seekBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/tvMusicDuration"
                android:layout_toRightOf="@+id/tvCurTime"/>
            <TextView
                android:id="@+id/tvMusicDuration"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                tools:text="03:49"
                android:textColor="@color/colorAccent"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"/>
        </RelativeLayout>
        
        <RelativeLayout
            android:id="@+id/rlMusicCtrl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20dp">
            <ImageView
                android:id="@+id/ivPause"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:src="@drawable/ic_pause_circle"
                android:layout_centerHorizontal="true"/>
            <ImageView
                android:id="@+id/ivPrevious"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_skip_previous"
                android:layout_toLeftOf="@+id/ivPause"
                android:layout_marginRight="20dp"
                android:layout_centerVertical="true"/>
            <ImageView
                android:id="@+id/ivNext"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_skip_next"
                android:layout_toRightOf="@+id/ivPause"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
        
        <ImageView
            android:id="@+id/ivRecycle"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_repeat_one"
            android:layout_above="@+id/rlSeek"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="7dp"/>
        </RelativeLayout>
</FrameLayout>

java:

---

这里顺便再记录一下：这个页面的全屏效果的实现，即状态栏和底部导航栏与窗体内容同色。

一开始状态栏是显示的app主题中的colorPrimary颜色，后来我按照一位大神的记录实现了状态栏与窗体内容同色，在此要感谢一下：在有ToolBar的activity中实现标题栏透明，网易云音乐播放页面效果

其实重点就在一句话:

window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)

FLAG_LAYOUT_NO_LIMITS是允许窗口扩展到屏幕之外。各个Flag的功能在:WindowManager.LayoutParams详解里面有介绍。 

但是我写了以后，会出现Toolbar被顶到状态栏里面去。这时候就需要给它设置一个marginTop高度等于状态栏高度就行了，同理，底部也是如此，在我开头第一张图中底部的播放按钮一行也被挤到了导航栏里面，给这一行的RelativeLayout设置marginBottom，高度为导航栏高度。如下：

下面是获取状态栏高度和导航栏高度的方法：

    /**
     * 获取状态栏高度的方法
     * */
    public static int getStatusBarHeight(Resources resource) {

        int statusBarHeight = -1;
        //获取status_bar_height资源的ID
        int resourceId = resource.getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            //根据资源ID获取响应的尺寸值
            statusBarHeight = resource.getDimensionPixelSize(resourceId);
        }
        Log.v("-------", "status bar height:"+ statusBarHeight);
        return statusBarHeight;
    }

    /**
    *获取导航栏高度的方法
    */
    public static int getNavigationBarHeight(Resources resources) {

        int resourceId = resources.getIdentifier("navigation_bar_height","dimen","android");

        int height = resources.getDimensionPixelSize(resourceId);

        Log.v("navigation bar>>>", "height:" + height);

        return height;

    }

这是最终效果: