在CoordinatorLayout

时间:2017-05-17 10:46:36

标签: android android-coordinatorlayout

我正在尝试使用RelativeLayout而不是FAB来实现以下UI。但是RelativeLayout的崩溃并不像FAB那样发生。 enter image description here

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/main_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" 
                android:src="@drawable/default_img"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:orientation="vertical"
            android:paddingTop="24dp">
        </LinearLayout>

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

    <RelativeLayout
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|right|end"
        android:id="@+id/cust_fab_container"
        app:layout_behavior=".ScrollingBehavior">
        <View
            android:id="@+id/target"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/circle_drawable"
            android:visibility="invisible"
            android:layout_alignParentRight="true"
            android:layout_marginRight="-48dp">
        </View>

        <rjsv.floatingmenu.floatingmenubutton.FloatingMenuButton
            android:id="@+id/my_floating_button"
            android:layout_width="65dp"
            android:layout_height="65dp">
        </rjsv.floatingmenu.floatingmenubutton.FloatingMenuButton>

  </RelativeLayout>

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

为了实现FAB行为,我附加了一个自定义行为,并且它具有动画效果 但是自定义按钮向下,即它不能按预期工作

    public class ScrollingBehavior extends CoordinatorLayout.Behavior<RelativeLayout>{
       private int toolbarHeight;

       public ScrollingBehavior(Context context, AttributeSet attrs) {
           super(context, attrs);
           this.toolbarHeight = Utils.getToolbarHeight(context);
       }

       @Override
       public boolean layoutDependsOn(CoordinatorLayout parent, RelativeLayout layout, View dependency) {
           return dependency instanceof AppBarLayout;
       }

       @Override
       public boolean onDependentViewChanged(CoordinatorLayout parent, RelativeLayout layout, View dependency) {
           if (dependency instanceof AppBarLayout) {
              CoordinatorLayout.LayoutParams lp =
                (CoordinatorLayout.LayoutParams) layout.getLayoutParams();
              int fabBottomMargin = lp.bottomMargin;
              int distanceToScroll = layout.getHeight() + fabBottomMargin;
              float ratio = (float)dependency.getY()/(float)toolbarHeight;
              layout.setTranslationY(-distanceToScroll * ratio);
          }
       return true;
     }
   }

1 个答案:

答案 0 :(得分:0)

只需更改方法onDependentViewChanged中的动画逻辑即可。

   @Override
   public boolean onDependentViewChanged(CoordinatorLayout parent, RelativeLayout layout, View dependency) {
       if (dependency instanceof AppBarLayout) {
          fab.setTranslationY(-dependency.getScrollY());
   }