遇到关于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>
看一下正常运行时候的表现:
正常情况下运行很完美. 但我们可能会遇到这么一个需求, 当运行起来以后, 我们需要在代码中手动隐藏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,运行后的结果如下:
我们可以看到,即使设置了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)
}
效果如下所示:
ps: 在最后对布局少做修改,不影响主逻辑,不用在意。