我在AppBarLayout和CollapsingToolbarLayout方面遇到了一些问题。这是目前发生的事情:
https://www.youtube.com/watch?v=z4yD8rmjSjU
向下滚动动作正是我想要的。然而,当我再次向上滚动时,橙色条应立即出现(它确实如此),但我希望ImageView仅在用户滚动到最顶部时才开始出现。任何人都可以帮我实现这个效果吗?
这是我的布局xml:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:text="ImageView"
android:textSize="20sp"
android:textColor="@android:color/white"
android:gravity="center"
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="145dp"
app:layout_collapseMode="parallax"
android:background="#444"/>
<TextView
android:text="Top bar"
android:textColor="@android:color/white"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:text="Bottom bar"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:textColor="@android:color/black"
android:layout_height="50dp"
android:background="#ddd"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling"/>
定制CoordinatorLayout
行为很难。您希望橙色栏立即显示,但ImageView仅在内容滚动到顶部后显示,但这些视图属于一个父CollapsingToolbarLayout
,并且两者都获得您现在拥有的行为或与enterAlwaysCollapsed
标志相反的行为。我认为没有办法在不混淆CoordinatorLayout / CollapsingToolbarLayout Java API的情况下分离这些视图的行为。
如果简单的行为不是一个选项而且没有人指出一个简单的解决方案,我建议尝试一个相对较新的MotionLayout
而不是与CollapsingToolbarLayout
内部跳舞,你最终会节省很多时间。开始时会有点困难,但它提供了明确的定制方式。这里是a very good article,它展示了如何使用CoordinatorLayout
构建类似于MotionLayout
的用户体验。和second part of this article一些额外的自定义。
我最终将橙色条移出CollapsingToolbarLayout
并设置了OnOffsetChangedListener
,改变了translationY
顶部栏的AppBarLayout
。
设置OnOffsetChangedListener
:
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->
topbar.translationY = Math.min(image.height.toFloat(), - offset.toFloat())
})
布局:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="@+id/topbar"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="@android:color/white"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="@android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:id="@+id/bottombar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="@android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<include layout="@layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>
我认为你可以通过你的代码管理它,我已经通过简单地检测布局的行为来尝试
app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
{
// Collapsed
}
else
{
//Expanded
}
}
});
试试这个@Mark。我得到了你在视频中展示的卷轴
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:layout_marginTop="56dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="@android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="@android:color/white"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="@android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<include layout="@layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
通过设置不同的layout_scrollFlags
可以实现对滚动行为的很多影响。在你的情况下,我认为你想要的旗帜是enterAlwaysCollapsed
。添加标志和enterAlways
而不是替换所有标志。
scroll
将使工具栏像其他内容一样滚动,enterAlways
将使工具栏和CollapsingToolbarLayout
的其余部分在向上滚动后立即弹回,而enterAlwaysCollapsed
仅在页面一直滚动到顶部后展开CollapsingToolbarLayout
。
Here是enterAlwaysCollapsed
实现的效果。