【问题标题】:Floating Action Button not moving up and down浮动操作按钮不上下移动
【发布时间】:2016-06-07 11:07:04
【问题描述】:

问题:我已经实现了FloatingActionButton,并且我遵循了Androidhive 的示例。但是当显示SnackBar 时,FloatingActionButton 不会向上移动。

问题:如果出现SnackBar,如何实现FloatingActionButton 上下移动?

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="@+id/maschineCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <include
            android:id="@+id/toolbar_main"
            layout="@layout/toolbar"></include>

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

    <FrameLayout
        android:id="@+id/maschinelistcontainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior"
       />

    <com.github.jorgecastilloprz.FABProgressCircle
        android:id="@+id/fabProgressCircle_download_maschinen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        >

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_download_maschinen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:borderWidth="0dp"
            app:elevation="@dimen/fab_elevation"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email" />

    </com.github.jorgecastilloprz.FABProgressCircle>

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

【问题讨论】:

    标签: android android-coordinatorlayout floating-action-button


    【解决方案1】:

    这里是 FloatingAction 行为类

    FloatingActionButtonBehavior.java

    public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
    
      public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {
      }
    
      @Override
      public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        return dependency instanceof SnackbarLayout;
      }
    
      @Override
      public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
      }
    }
    

    MainActivity.java

    public class MainActivity extends AppCompatActivity {
    
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
            Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show();
          }
        });
      }
    }
    

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <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">
    
        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="16dp"
            app:layout_behavior="com.getbase.coordinatorlayoutdemo.FloatingActionButtonBehavior"
            app:fab_icon="@drawable/ic_done" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    输出:

    更多详情请访问:https://github.com/ggajews/coordinatorlayoutwithfabdemo

    【讨论】:

    • 我已将您的建议添加到我的代码中。不幸的是,按钮仍然不想移动。 FABProgressCircle 可能是这里的问题吗?
    • 您是否需要进度?
    • 是的,我需要进度指示器。是否可以对它实现移动行为?
    • @jublikon 使用这个库是不可能的?
    • 如果没有其他可能,我会那样做。但进度指示器给出了直观的设计
    【解决方案2】:

    我正在使用 com.android.support:design:24.2.0 并且要使其正常工作,您需要将您的 FAB 放在 CoordinatorLayout 中,我不知道您是否可以按照您的方式进行包装。 然后在你的 FAB 中写:

    app:layout_anchor="@id/maschinelistcontainer"
    app:layout_anchorGravity="bottom|right|end"
    

    像这样:

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_download_maschinen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_gravity="bottom|end"
        app:borderWidth="0dp"
        app:elevation="@dimen/fab_elevation"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/maschinelistcontainer"
        app:layout_anchorGravity="bottom|right|end"     />
    

    更多详情:https://code.google.com/p/android/issues/detail?id=220250

    【讨论】:

      【解决方案3】:

      我认为你确实实现了FABProgressListener 接口

      如果没有。你必须这样做。

      你应该像下面这样使用snackbar:

      @Override public void onFABProgressAnimationEnd() {
          Snackbar.make(fabProgressCircle, R.string.cloud_upload_complete, Snackbar.LENGTH_LONG)
              .setAction("Action", null)
              .show();
      }
      

      你用this page了吗?

      【讨论】:

      • 您能解释一下为什么需要它吗?不幸的是,即使没有显示进度指示器,按钮也不会移动
      • 我在this page 中告诉过当你实现 FABProgressListener 接口时,你应该像示例代码一样使用snackbar。因为下面的方法调用会在正确的时间调度
      猜你喜欢
      • 2023-04-07
      • 2020-01-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-06-07
      • 2015-06-25
      • 2015-03-10
      • 1970-01-01
      相关资源
      最近更新 更多