AppBarLayout动态设置View.GONE的空白占位问题

遇到关于AppBarLayout的一个坑点，估计会遇到的人也会不少，但网上这方面解决方案资料空白，特地再次记录。

布局就是标准的 ·CoordinatorLayout· 嵌套布局，隐藏掉无关代码， 结构如下：

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout">

            <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_scrolling"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

content_scrolling.xml的布局如下:

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
        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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_scrolling"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ScrollingActivity">

    <TextView/>

</androidx.core.widget.NestedScrollView>

看一下正常运行时候的表现:

 

 

正常情况.gif

正常情况下运行很完美. 但我们可能会遇到这么一个需求, 当运行起来以后, 我们需要在代码中手动隐藏AppBarLayout这个布局,如果我们直接手动设置View.GONE方法会怎样? Activity逻辑代码如下:

 

package com.example.appbarlayoutdemo

import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.snackbar.Snackbar
import kotlinx.android.synthetic.main.activity_scrolling.*

class ScrollingActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_scrolling)
        setSupportActionBar(toolbar)
        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show()
            app_bar.visibility = View.GONE
        }
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.menu_scrolling, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.

        return when (item.itemId) {
            R.id.action_settings -> true
            else -> super.onOptionsItemSelected(item)
        }
    }
}

注意 fab 的点击事件，仅仅是手动设置了app_bar的visibility为View.GONE，运行后的结果如下：

 

置空后异常情况.gif

我们可以看到，即使设置了AppBarLayout的Visibility为View。GONE，依然还有问题，而且还占据着空白位置。问题的原因到底是什么呢？ 经过一番不断测试与研究，我将问题定位在如下代码身上,来自content_scrolling.xml中的一行代码:

 

 

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

我们来分析一下为什么这行代码会导致AppBarLayout无法正常隐藏。
CoordinatorLayout 通过behavior ，可以协调内部子控件的交互关系，继承自ViewGroup，其控件布局方式类似于FrameLayout，属于层叠模式。
当内部View声明 app：layout_behavior="@string/appbar_scrolling_view_behavior"之后， CoordinatorLayout 会默认将该控件与顶部的View留有一定的距离，就像是在FrameLayout中为该控件主动设置了marginTop类似，使得该控件无法像正常view那样移动到屏幕顶部。

了解问题之后，我们便知道了解决问题的办法。 在代码中需要动态显示/隐藏AppbarLayout的时候，手动设置或者清除view的behavior,并手动更改AppBarLayout的高度即可， 修改隐藏/显示代码如下：

 

fun changeAppbarState(isVisibile: Boolean) {
        var appbarLayoutParams = app_bar.layoutParams
        checkNotNull(nestedScrollView)
        if (isVisibile) {
            appbarLayoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
            var coor_params = nestedScrollView.layoutParams as CoordinatorLayout.LayoutParams
            coor_params.behavior = AppBarLayout.ScrollingViewBehavior()
            nestedScrollView.layoutParams = coor_params
        } else {
            appbarLayoutParams.height = 0
            var coor_params = nestedScrollView.layoutParams as CoordinatorLayout.LayoutParams
            coor_params.behavior = null
            nestedScrollView.layoutParams = coor_params
        }
        app_bar.layoutParams = appbarLayoutParams
        app_bar.visibility = if (isVisibile) View.VISIBLE else View.GONE
    }

然后调用处修改如下:

 

var isVisibile: Boolean = true

 fab.setOnClickListener { view ->
            changeAppbarState(!isVisibile)
        }

效果如下所示:

 

 

解决完异常后的情况.gif

ps: 在最后对布局少做修改，不影响主逻辑，不用在意。