Question

我正在尝试将ImageView放在折叠工具栏的底部

我尝试使用ImageView替换默认存在的FloatingActionButton，结果如下

ImageView in place of FloatingActionButton

一开始看起来不错，但当我向上滚动时会发生这种情况

ImageView不会像使用FloatingActionButton那样消失或崩溃。

如何在向上滚动时使ImageView消失？

这是我的布局

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.kid.uimockup.UserProfileActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:fitsSystemWindows="true"
    android:layout_height="@dimen/app_bar_height"
    android:layout_width="match_parent"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <ImageView
            android:src="@drawable/white"
            android:scaleType="centerCrop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:layout_collapseMode="parallax"
            android:minHeight="100dp"/>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_user_profile"/>

   //I want to anchor this
  <de.hdodenhof.circleimageview.CircleImageView
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_margin="7dp"
      android:src="@drawable/breaking_bad"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|end"/>

 </android.support.design.widget.CoordinatorLayout>

Answer 1

您需要的是CoordinatorLayout.Behavior的自定义实现。

我根据FloatingActionButton实现进行了快速实施，以便在锚定到AppBarLayout时显示/隐藏。您可以看到here的代码。请注意包名称 - 您需要在该包中使用此名称以使用Behavior中的某些util方法。

要将Behavior添加到CircleImageView，请执行以下操作：

// your image view here
CircleImageView imageView = (CircleImageView) findViewById(R.id.circle_image_view);

CoordinatorLayout.LayoutParams params =
    (CoordinatorLayout.LayoutParams) imageView.getLayoutParams();
params.setBehavior(new CircleImageViewBehavior());

现在，当您向上/向下滚动足够远时，应显示或隐藏CircleImageView。如果你想要像FloatingActionButton这样的动画使用，你可以查看该实现来创建一个类似的动画。

希望这有帮助。

Answer 2

变化

app:layout_scrollFlags="scroll|exitUntilCollapsed"

<{1}}

的

Coordinatorlayout

有没有办法在CollapsingToolBarLayout中正确锚定imageview？

2 个答案: