浮动操作button没有完全显示在片段内

我在Fragment中使用FABbutton和RecyclerView。 这个片段是一个TabViewPager的实例。 我遇到了FABbutton的问题。 我已经把RecyclerView和fabbutton放在一个FrameLayout里，FABbutton位于右下方。 现在我面对的问题是FABbutton不完全可见。 它的一半是隐藏的，如下面的截图所示。 任何人都可以帮我解决这个问题。 提前致谢。

FAB与FrameLayout中的RecyclerView

注意：一旦滚动，FAB正确alignment。 只有在理想的情况下（滚动完成之前）才会出现问题。

fragment.xml之 

<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="10dp" app:backgroundTint="@color/red" android:src="@drawable/ic_done"/> </FrameLayout>

tabviewpagerlayout.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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>

您应该将您的FAB移到CoordinatorLayout 。 像这样的东西： 

 <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_gravity="end|bottom"/> </android.support.design.widget.CoordinatorLayout>

然后你可以这样在viewPager里面添加RecyclerView： 

 Adapter adapter = new Adapter(getSupportFragmentManager()); adapter.addFragment(new RecyclerViewFragment(), "Tab1"); viewPager.setAdapter(adapter);

RecyclerViewFragment布局是： 

  <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent"/>

这是不可接受的解决scheme，必须显示/隐藏FAB无论选项卡被选中。 我已经尝试过所有的布局组合，但将FAB移至活动布局是唯一可行的解​​决scheme。 但是如果你只需要一个标签中的button呢？ 这是现在唯一的方法，但是我期待更新devise库，因为这个版本太麻烦了。 无论如何，底线是FAB必须是CoordinatorLayout的直接后裔，所以它不会被折叠的工具栏压低…

  1. 我有同样的问题，FloatingActionButton是完全不可见的，它在屏幕底部。 当我向下滚动时出现。
  2. 此外，滚动标签时隐藏，但我希望他们总是可见的，所以我通过删除app:layout_scrollFlags="scroll|enterAlways"修复它app:layout_scrollFlags="scroll|enterAlways" 。 向JDev致谢如何避免向下滚动时隐藏标签？
    这也解决了FloatingActionButton问题，现在可见。

加布里埃尔提出的将FAB移至包含活动的build议， 您还需要更新onTabSelected中的FAB颜色/ clickListener： 

 public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener { @Override protected void onCreate(Bundle savedInstanceState) { ... setFloatingActionButtonForImagesTab(); } ... @Override public void onTabSelected(final TabLayout.Tab tab) { switch (tab.getPosition()) { case 0: setFloatingActionButtonForImagesTab(); break; case 1: setFloatingActionButtonForMusicTab(); break; case 2: setFloatingActionButtonForVideoTab(); break; } } ... }

然后在设置function中设置颜色并点击监听器： 

 private void setFloatingActionButtonForImagesTab() { myViewPager.setCurrentItem(0); floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple)); floatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(coordinatorLayout, "images", Snackbar.LENGTH_LONG) .show(); } }); }

记下上面对setCurrentItem的调用。 现在需要实现TabLayout.OnTabSelectedListener 。

我遇到了同样的问题。 不幸的是，我没有你的答案，但一些附加点。

不是button被按下，而是整个片段被按下。 到目前为止我还没有testing过，但我想，如果有一种方法可以让你看到片段页面的大小，你会发现它不会在屏幕底部结束，因为它应该是。

为了可能的解决scheme，我想在底部添加大小为“？attr / actionBarSize”的填充。

我会testing这个，完成后回来

更新：正如我使用80 DP的边界，得到一个屏幕截图 （我没有10个声望发布一个屏幕截图，WTH）

解决方法： 

 <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/rootLayout" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <include layout="@layout/toolbar"/> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/fragment_root" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/border" android:layout_marginTop="?attr/actionBarSize" > <!--android:paddingBottom="?attr/actionBarSize"--> <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/border"></LinearLayout> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.derek.hianthy.mydiary.ui.BaseFragment" tools:layout="@layout/layout" android:background="@drawable/border" /> </FrameLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fabBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_marginBottom="@dimen/fab_margin_bottom" android:layout_marginRight="@dimen/fab_margin_right" android:src="@drawable/ic_action_add" app:borderWidth="0dp" app:fabSize="normal" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentTop="false" android:layout_alignParentLeft="false" /> </android.support.design.widget.CoordinatorLayout>

notic app：layout_behavior =“@ string / appbar_scrolling_view_behavior”已被取出。 结果

这可能有点晚，但对我来说，最好的select似乎是创build另一个片段，其中包含片段与您的内容和浮动button。 这段代码在我的应用程序中工作得很好： 

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="domain.ItemsFragment"> <fragment android:layout_width="wrap_content" android:layout_height="wrap_content" android:name="com.lucyapp.client.ItemFragment" android:id="@+id/fragment" tools:layout="@layout/fragment_item_list" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </FrameLayout>

我面临同样的问题查看pager 1st Fragment FABbutton显示在屏幕下方并滚动其显示。 但经过一些调查发现，我发现我写了 

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

在CoordinatorLayout的ViewPager中。 所以删除这个滚动行为后，FAB职位问题就解决了。

请检查我的实施工作是否正常： 

 <?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="@string/app_name" android:textColor="@color/textPrimary" android:textSize="18sp" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="@string/str_toolbar_subtittle" android:textColor="@color/textPrimary" android:textSize="14sp" /> </LinearLayout> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="?attr/colorPrimary" app:tabGravity="fill" app:tabIndicatorColor="@color/colorAccent" app:tabSelectedTextColor="@color/errorColor" app:tabTextColor="@color/white" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/app_bar" /> </android.support.design.widget.CoordinatorLayout>

这个解决scheme为我工作。 使用以下代码创build一个名为CustomBehavior的新类： 

 public class CustomBehavior extends CoordinatorLayout.Behavior<ViewPager> { private int mActionBarHeight; public CustomBehavior(Context context, AttributeSet attributeSet) { super(context, attributeSet); init(context); } public CustomBehavior(Context context) { init(context); } private void init(Context context) { TypedValue tv = new TypedValue(); if (context.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) { mActionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources().getDisplayMetrics()); } } @Override public boolean layoutDependsOn(CoordinatorLayout parent, ViewPager child, View dependency) { return dependency instanceof AppBarLayout; } public boolean onDependentViewChanged(CoordinatorLayout parent, ViewPager child, View dependency) { offsetChildAsNeeded(parent, child, dependency); return false; } private void offsetChildAsNeeded(CoordinatorLayout parent, View child, View dependency) { if (child instanceof ViewPager) { ViewPager viewPager = (ViewPager) child; View list = viewPager.findViewById(R.id.recycler_view); if (list != null) { final CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior(); if (behavior instanceof AppBarLayout.Behavior) { final AppBarLayout.Behavior ablBehavior = (AppBarLayout.Behavior) behavior; AppBarLayout appBarLayout = (AppBarLayout) dependency; ViewCompat.setTranslationY(list, ablBehavior.getTopAndBottomOffset() + appBarLayout.getTotalScrollRange() + mActionBarHeight); } } } }

}

现在，将自定义行为类分配给xml文件中的viewpager小部件 

 <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="yourpackage.CustomBehavior" />
Interesting Posts

如何防止多个表单提交在PHP中的多个点击

禁用WPF中的button？

jQuery $（“＃radioButton”）。更改（…）在取消select期间不会触发

支持库的FloatingActionButton示例

我怎样才能给像Android上的button的imageview点击效果？

button与图像，ImageButton和可点击的ImageView之间的区别？

获取单选button组的值

Android材质devisebutton – 预棒棒糖

如何防止button提交表单

使用Javascript获取单选button值