工具栏折叠时显示视图
Posted
技术标签:
【中文标题】工具栏折叠时显示视图【英文标题】:Show view when toolbar collapses 【发布时间】:2015-10-14 06:04:47 【问题描述】:我有一个带有CoordinatorLayout
、AppBarLayout
、CollapsingToolbarLayout
和Toolbar
的活动。因此,基本上,滚动RecyclerView
时会折叠的视图。
我需要做的是在展开布局的视图由于折叠而隐藏时显示自定义视图。
这是我的布局:
<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_
android:layout_
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_
android:layout_
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_
android:layout_
android:fitsSystemWindows="true"
app:contentScrim="#2196F3"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="@+id/header"
layout="@layout/header_big_first_screen"
android:layout_
android:layout_
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.CollapsingToolbarLayout
android:id="@+id/anim_toolbar"
android:layout_
android:layout_
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<TextView
android:layout_
android:layout_
android:text="Hello!"/>
</android.support.v7.widget.CollapsingToolbarLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/categories_recyclerview"
android:layout_
android:layout_
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
最后,当工具栏展开时,会显示加载元素的视图。当它折叠时它不会。当它消失时,TextView
内的 Toolbar
应该会显示出来。目前它一直显示。
我一直在查看 CollapsingToolbarLayout
的事件,以便在它改变大小时添加一个侦听器,以便我可以检查它是否小于某个值并显示该视图。
这可能有点难以解释,但我相信我已经说清楚了。我一直在谷歌搜索,找不到任何人尝试这样做。
【问题讨论】:
你能用 contentScrim 吗? @karaokyo setContentScrim 及其变体仅适用于可绘制对象和颜色,除非我遗漏了什么。 developer.android.com/reference/android/support/design/widget/… 【参考方案1】:查看CollapsingToolbarLayout
源,内容稀松布动画是通过AppBarLayout
上的OnOffsetChangedListener
触发的。因此,您可以添加另一个以在您的文本视图上触发 alpha 动画:
mListener = new AppBarLayout.OnOffsetChangedListener()
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset)
if(collapsingToolbar.getHeight() + verticalOffset < 2 * ViewCompat.getMinimumHeight(collapsingToolbar))
hello.animate().alpha(1).setDuration(600);
else
hello.animate().alpha(0).setDuration(600);
;
appBar.addOnOffsetChangedListener(mListener);
【讨论】:
完全成功!非常感谢!请注意这个问题:我正在查看CollapsibleToolbarLayout
的实现,但您是如何获得(2 * ViewCompat.getMinimumHeight(collapsingToolbar))
的值的?再次感谢
与内容 scrim 使用的触发器相同
感谢@karaokyo 的解决方案 像魅力一样工作!但是,虽然它适用于移动设备,但您的 if else 案例不会在平板电脑上触发。知道为什么吗?谢谢。
ViewCompat.getMinimumHeight 在 API 16 之前返回 0
请使用collapsingToolbar.getScrimVisibleHeightTrigger()
(developer.android.com/reference/android/support/design/widget/…) 而不是(2 * ViewCompat.getMinimumHeight(collapsingToolbar))
。它更具可读性并且还考虑到了fitsSystemWindows
里面的标志。【参考方案2】:
与其尝试复制何时应该显示(折叠)或不显示(展开)稀松布,更好的方法是覆盖每次在 CollapsingToolbarLayout 的 onOffsetChanged
内调用的 setScrimsShown
方法,并添加像这样的听众:
public class CollapsingToolbarLayoutWithScrimListener extends CollapsingToolbarLayout
public CollapsingToolbarLayoutWithScrimListener(Context context)
super(context);
public CollapsingToolbarLayoutWithScrimListener(Context context, AttributeSet attrs)
super(context, attrs);
public CollapsingToolbarLayoutWithScrimListener(Context context, AttributeSet attrs, int defStyleAttr)
super(context,attrs,defStyleAttr);
private ScrimListener scrimListener = null;
@Override
public void setScrimsShown(boolean shown, boolean animate)
super.setScrimsShown(shown, animate);
if (scrimListener != null)
scrimListener.onScrimShown(shown);
public void setScrimListener(ScrimListener listener)
scrimListener = listener;
public interface ScrimListener
void onScrimShown(boolean shown);
【讨论】:
以上是关于工具栏折叠时显示视图的主要内容,如果未能解决你的问题,请参考以下文章
隐藏 TabBar 并在按钮单击时显示 NavigationController 工具栏