英文:
Android complex collapsing toolbar transition
问题
我有一个自定义的应用栏视图和一个滚动视图（左侧布局），我希望自定义的应用栏视图能够折叠到右侧的布局上。
正如您所见，图像应该改变大小，左侧和底部的填充会改变，文本变小，按钮在右侧的填充会减少。
我如何使用折叠式工具栏实现平稳的过渡？
英文:
I have a custom app bar view and a scroll view (left layout) and I want the custom app bar view to collapse to the layout on the right
As you can see, the image should change in size, the padding on the left and bottom changes, the text becomes smaller and the buttons has less padding on the right.
How can I achieve a smooth transition using a collapsing toolbar?
答案1
得分: 3
你可以直接在MotionLayout中使用NestedScrollView。
然后你需要在res/xml文件夹中创建一个MotionScene。
在其中，你可以设置过渡的开始、结束constraintSet，以及触发类型（onSwipe）。
这里有一个很好的教程，用一个TextView解释了这个过程。
英文:
You can just use MotionLayout with a NestedScrollView.
Then you need to create a MotionScene in your res/xml folder.
In which you can set the transition start, end constraintSet, as well as the trigger type(onSwipe).
Here is a good tutorial explaining that with one TextView.
答案2
得分: 2
一种解决方案是使用MotionLayout并对其进行定制，以实现折叠式工具栏布局行为。这样，过渡会非常平滑。我记得在Google I/O大会上，他们展示了MotionLayout，其中一个展示就是将其用作折叠式工具栏布局。
另一种解决方案是检测Collapsing工具栏布局的折叠和展开状态，并将视图的布局参数更改为所需的要求。
类似于以下代码（此代码为Kotlin代码，您会理解的）：
appBarLayout.addOnOffsetChangedListener(this)
// 在onOffsetChangedListener中更改视图的布局参数
override fun onOffsetChanged(appBarLayout: AppBarLayout, offset: Int) {
when (appBarLayout.totalScrollRange) {
abs(offset) -> {
// 折叠
val params = (binding.titleTextView.layoutParams as ConstraintLayout.LayoutParams)
// 强制转换为正确的父布局参数类型，我这里是ConstraintLayout
// 自定义布局参数
params.height = 100 // 以像素为单位，您可以轻松地将dp转换为像素
binding.titleTextView.layoutParams = params
binding.titleTextView.requestLayout()
}
else -> {
// 未折叠
val params = (binding.titleTextView.layoutParams as ConstraintLayout.LayoutParams)
// 强制转换为正确的父布局参数类型，我这里是ConstraintLayout
// 自定义布局参数
params.height = 200 // 以像素为单位
binding.titleTextView.layoutParams = params
binding.titleTextView.requestLayout()
}
}
}
需要注意的是，当使用折叠式工具栏布局时，滚动标志非常重要，它们会改变折叠式工具栏的行为。这个链接说明了标志的工作原理。我选择了类似于以下的设置：
<com.google.android.material.appbar.CollapsingToolbarLayout
...
app:layout_scrollFlags="scroll|exitUntilCollapsed">
英文:
one solution is using MotionLayout and customizing it to have a collapsing toolbar layout behavior. this way the transition is very smooth. i remember in Google I/O they were showcasing the MotionLayout and one of their showcases was using it as collapsing toolbar layout.
other solution is detecting the collapsed and expanded status of Collapsing toolbar layout, and changing the layout parameters of the views to the necessary requirements.
something like this (this code is in kotlin, you'll get the idea)
appBarLayout.addOnOffsetChangedListener(this)
then in onOffsetChangedListener change the layout parameters of your views.
override fun onOffsetChanged(appBarLayout: AppBarLayout, offset: Int) {
when (appBarLayout.totalScrollRange) {
abs(offset) -> {
// Collapsed
val params =
(binding.titleTextView.layoutParams as ConstraintLayout.LayoutParams)
// cast to the correct parent layout params, in my case it was ConstraintLayout
//customize the layout params
params.height= 100 // its in pixel , you can easily convert dp to pixel
binding.titleTextView.layoutParams = params
binding.titleTextView.requestLayout()
}
else -> {
// Not Collapsed
val params =
(binding.titleTextView.layoutParams as ConstraintLayout.LayoutParams)
// cast to the correct parent layout params, in my case it was ConstraitLayout
//customize the layout params
params.height= 200 // its in pixel
binding.titleTextView.layoutParams = params
binding.titleTextView.requestLayout()
}
}
}
note that when using collapsing toolbar layout, the scroll flags are very important and change the behavior of the collapsing toolbar. this link illustrates how the flags work.
i went with something like this :
<com.google.android.material.appbar.CollapsingToolbarLayout
...
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论