【问题标题】:Using custom behaviour to create multiple "anchor points"/positions for CollapsingToolbar使用自定义行为为 CollapsingToolbar 创建多个“锚点”/位置
【发布时间】:2015-12-21 14:57:38
【问题描述】:

我正在尝试在搜索登录页面中使用类似于 Google 地图应用的折叠工具栏。也就是说,存在三个“锚点”或位置。我会用图片代替地图。

  • 工具栏已折叠(内容为全屏)

  • 中间位置

  • 工具栏已扩展,仅显示一些内容(永久底部表格)

应用程序最好在这些位置之间对齐

到目前为止,我的布局基本正常。

两个主要问题是:

  • 在 NestedScrollView 内翻页无法正常工作。即使它正在使用app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior",它也会停止/停止。我相信这是AppBarLayout 的错误
  • 上述锚点未实现。

这是我的布局:

请注意,app:layout_behavior="@string/appbar_anchor_behavior"> 只是 AppBarLayout.Behavior 的未修改子类

<android.support.design.widget.CoordinatorLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/main_content"                                                         
 android:layout_width="match_parent"                                               
 android:layout_height="match_parent"                                                           
 android:background="@color/actions_bar_dark"                                                 
 android:fitsSystemWindows="true">


<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_anchor_behavior">

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll"
            android:fitsSystemWindows="true">

        <ImageView
                android:id="@+id/item_preview_thumb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                app:layout_collapseMode="parallax"
                />

        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

<android.support.v4.widget.NestedScrollView
        android:id="@+id/contentRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


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


</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_download"
        android:layout_margin="16dp"
        android:clickable="true"/>

如何使用自定义行为来实现这一点?

【问题讨论】:

  • 也许他们没有使用折叠工具栏来制作上面的东西。
  • 他们正在使用未折叠工具栏的slidingBottomPanel。
  • @k0sh 你能说得更具体点吗?
  • 我看到人们使用 umanos' AndroidSlidingUpPanel 来处理这种行为。

标签: android android-layout


【解决方案1】:

根据您想要实现的目标,您可能想要尝试 SlidingUpPanelLayout(可以在Github 找到)。它拥有您似乎需要的一切:

  • 锚点:为了实现您描述的锚点,您必须设置 umanoAnchorPoint 属性(基于百分比),或者 - 如果您需要更复杂的锚点计算,例如取决于 ImageView 的高度 - 使用 setAnchorPoint 方法。
  • 持久化:与上面提到的 BottomSheets 不同,这种布局实际上是持久化的。折叠时面板的高度可以使用umanoPanelHeight 属性或setPanelHeight 方法进行自定义。
  • 视差:不确定该实现是否符合您的需求以及您是否需要,但它确实支持基本的视差。

您可以在上面链接的 Github 上的自述文件中找到更多信息。

【讨论】:

    【解决方案2】:

    您在问题中提到的实际上不是CollapsingToolbar,而是可拉伸的BottomSheet。不幸的是,android sdk 还没有提供任何东西供我们使用(尽管 Google 已经在自己的应用程序中使用它们)。

    BottomSheet 是一个提供可关闭视图的 Android 组件 从屏幕底部。 BottomSheet 可能是一个有用的替代品 用于对话框和菜单,但可以保存任何视图,因此用例是 无止境。此存储库包括 BottomSheet 组件本身,但 还包括一组常见的视图组件,显示在底部 床单。这些位于公共模块中。

    另一方面,一些好心人已经开发了足够接近的库并在 GitHub 上共享以供我们使用。它们与 Google 使用的 BottomSheet 组件很接近。

    与您想要的最接近的是这个 - Flipbard/BottomSheet - 检查本页“通用组件”部分下的图像。 (一个优点是它已经在 Flipboard 的生产中使用了一段时间,所以它已经过彻底的测试。)

    这是另一个最小的 BottomSheet 库 - soarcn/BottomSheet,但它只允许点击图标。您可能可以获得源代码并对其进行自定义以满足您的需求。但是,来自 Flipboard 的第一个更接近,因为它可以容纳任何类型的视图并且更可定制。

    点击上述两个 GitHub 链接,查看示例、设置说明和源代码。

    【讨论】:

    • 您好,感谢您的帮助。我熟悉BottomSheet(您提到的设计和两个实现)。 Flipboard/BottomSheet 的问题在于它不打算成为持久的底部工作表,而这正是我所需要的。有没有办法解决这个问题?可惜谷歌在 BottomSheet 上发布了 MD 文档,却没有提供它的实现。
    • 使其看起来像它持久,可以在活动开始上加载它,并且在选择一个选项后,它可以覆盖ondismiss方法并重新加载它,或者它允许阻止解雇.
    • 恐怕不可能做到这一点。 github.com/Flipboard/bottomsheet/issues/66 "嗨@albertogarrido。这个库目前不支持始终打开的工作表。你提到的所有选项都会有问题。"
    【解决方案3】:

    我不是专家,但请查看 Github.using 修改后的 Android SlidingUpPanel 上的此实现。像地图动画一样实现 Foursquare。它可能会对您有所帮助。

    【讨论】:

      【解决方案4】:

      更新: Look at this answer if you are looking for all google maps behaviors

      回答你的问题

      如何使用自定义行为来实现这一点? /使用自定义行为创建多个“锚点”/位置...

      Google 地图使用 app:layout_behavior 中的 BottomSheetBehavior 来显示以折叠模式开始的内容。倒塌的不是地图,谷歌地图有一个带有视差效果的背景图像/工具栏。

      您可以通过以下步骤实现您想要修改默认 BottomSheetBehavior 添加更多统计信息:

      1. 创建一个 Java 类并从 CoordinatorLayout.Behavior&lt;V&gt; 扩展它
      2. 将粘贴代码从默认BottomSheetBehavior 文件复制到新文件。
      3. 用以下代码修改方法clampViewPositionVertical

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {
            return constrain(top, mMinOffset, mHideable ? mParentHeight : mMaxOffset);
        }
        
        int constrain(int amount, int low, int high) {
            return amount < low ? low : (amount > high ? high : amount);
        }
        
      4. 添加新状态

        public static final int STATE_ANCHOR_POINT = X;

      5. 修改下一个方法:onLayoutChildonStopNestedScrollBottomSheetBehavior&lt;V&gt; from(V view)setState(可选)



      我将添加那些修改后的方法和link to the example project

      public boolean onLayoutChild(CoordinatorLayout parent, V child, int layoutDirection) {
          // First let the parent lay it out
          if (mState != STATE_DRAGGING && mState != STATE_SETTLING) {
              if (ViewCompat.getFitsSystemWindows(parent) &&
                      !ViewCompat.getFitsSystemWindows(child)) {
                  ViewCompat.setFitsSystemWindows(child, true);
              }
              parent.onLayoutChild(child, layoutDirection);
          }
          // Offset the bottom sheet
          mParentHeight = parent.getHeight();
          mMinOffset = Math.max(0, mParentHeight - child.getHeight());
          mMaxOffset = Math.max(mParentHeight - mPeekHeight, mMinOffset);
      
          //if (mState == STATE_EXPANDED) {
          //    ViewCompat.offsetTopAndBottom(child, mMinOffset);
          //} else if (mHideable && mState == STATE_HIDDEN...
          if (mState == STATE_ANCHOR_POINT) {
              ViewCompat.offsetTopAndBottom(child, mAnchorPoint);
          } else if (mState == STATE_EXPANDED) {
              ViewCompat.offsetTopAndBottom(child, mMinOffset);
          } else if (mHideable && mState == STATE_HIDDEN) {
              ViewCompat.offsetTopAndBottom(child, mParentHeight);
          } else if (mState == STATE_COLLAPSED) {
              ViewCompat.offsetTopAndBottom(child, mMaxOffset);
          }
          if (mViewDragHelper == null) {
              mViewDragHelper = ViewDragHelper.create(parent, mDragCallback);
          }
          mViewRef = new WeakReference<>(child);
          mNestedScrollingChildRef = new WeakReference<>(findScrollingChild(child));
          return true;
      }
      
      
      public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target) {
          if (child.getTop() == mMinOffset) {
              setStateInternal(STATE_EXPANDED);
              return;
          }
          if (target != mNestedScrollingChildRef.get() || !mNestedScrolled) {
              return;
          }
          int top;
          int targetState;
          if (mLastNestedScrollDy > 0) {
              //top = mMinOffset;
              //targetState = STATE_EXPANDED;
              int currentTop = child.getTop();
              if (currentTop > mAnchorPoint) {
                  top = mAnchorPoint;
                  targetState = STATE_ANCHOR_POINT;
              }
              else {
                  top = mMinOffset;
                  targetState = STATE_EXPANDED;
              }
          } else if (mHideable && shouldHide(child, getYVelocity())) {
              top = mParentHeight;
              targetState = STATE_HIDDEN;
          } else if (mLastNestedScrollDy == 0) {
              int currentTop = child.getTop();
              if (Math.abs(currentTop - mMinOffset) < Math.abs(currentTop - mMaxOffset)) {
                  top = mMinOffset;
                  targetState = STATE_EXPANDED;
              } else {
                  top = mMaxOffset;
                  targetState = STATE_COLLAPSED;
              }
          } else {
              //top = mMaxOffset;
              //targetState = STATE_COLLAPSED;
              int currentTop = child.getTop();
              if (currentTop > mAnchorPoint) {
                  top = mMaxOffset;
                  targetState = STATE_COLLAPSED;
              }
              else {
                  top = mAnchorPoint;
                  targetState = STATE_ANCHOR_POINT;
              }
          }
          if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
              setStateInternal(STATE_SETTLING);
              ViewCompat.postOnAnimation(child, new SettleRunnable(child, targetState));
          } else {
              setStateInternal(targetState);
          }
          mNestedScrolled = false;
      }
      
      public final void setState(@State int state) {
          if (state == mState) {
              return;
          }
          if (mViewRef == null) {
              // The view is not laid out yet; modify mState and let onLayoutChild handle it later
              /**
               * New behavior (added: state == STATE_ANCHOR_POINT ||)
               */
              if (state == STATE_COLLAPSED || state == STATE_EXPANDED ||
                      state == STATE_ANCHOR_POINT ||
                      (mHideable && state == STATE_HIDDEN)) {
                  mState = state;
              }
              return;
          }
          V child = mViewRef.get();
          if (child == null) {
              return;
          }
          int top;
          if (state == STATE_COLLAPSED) {
              top = mMaxOffset;
          } else if (state == STATE_ANCHOR_POINT) {
              top = mAnchorPoint;
          } else if (state == STATE_EXPANDED) {
              top = mMinOffset;
          } else if (mHideable && state == STATE_HIDDEN) {
              top = mParentHeight;
          } else {
              throw new IllegalArgumentException("Illegal state argument: " + state);
          }
          setStateInternal(STATE_SETTLING);
          if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
              ViewCompat.postOnAnimation(child, new SettleRunnable(child, state));
          }
      }
      
      
      public static <V extends View> BottomSheetBehaviorGoogleMapsLike<V> from(V view) {
          ViewGroup.LayoutParams params = view.getLayoutParams();
          if (!(params instanceof CoordinatorLayout.LayoutParams)) {
              throw new IllegalArgumentException("The view is not a child of CoordinatorLayout");
          }
          CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) params)
                  .getBehavior();
          if (!(behavior instanceof BottomSheetBehaviorGoogleMapsLike)) {
              throw new IllegalArgumentException(
                      "The view is not associated with BottomSheetBehaviorGoogleMapsLike");
          }
          return (BottomSheetBehaviorGoogleMapsLike<V>) behavior;
      }
      



      您甚至可以通过 behavior.setBottomSheetCallback(new BottomSheetBehaviorGoogleMapsLike.BottomSheetCallback() {.... 使用回调

      那时我正在研究图像视差效果和工具栏。

      它的外观如下:
      []

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-08-07
        • 2015-11-26
        • 2017-03-21
        • 2012-05-04
        • 2019-11-09
        • 1970-01-01
        相关资源
        最近更新 更多