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

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

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




    

        

            

        
    

    

    


content_scrolling.xml的布局如下:




    


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


AppBarLayout动态设置View.GONE的空白占位问题_第1张图片
正常情况.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: 在最后对布局少做修改,不影响主逻辑,不用在意。

你可能感兴趣的:(AppBarLayout动态设置View.GONE的空白占位问题)