浮动操作按钮未完全显示在片段内
Floating Action Button not showing fully inside a fragment
我在 Fragment 中使用 FAB 按钮和 RecyclerView。此 Fragment 是 TabViewPager 的一个实例。我在使用 FAB 按钮时遇到问题。我已将 RecyclerView 和 fab 按钮放置在 FrameLayout 中,其中 FAB 按钮位于右下角。现在我面临的问题是 FAB 按钮不完全可见。它的一半部分被隐藏,如下面的屏幕截图所示。谁能帮我解决这个问题。提前致谢。
注意: FAB 在滚动后正确对齐。只有在理想情况下(在滚动完成之前)才会出现问题。
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"/>
我有点按照 Gabriele 的建议将 FAB 移动到包含 activity。您还需要在 onTabSelected:
中更新 FAB 的 color/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;
}
}
...
}
然后在设置函数中设置颜色并点击侦听器:
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
.
无论选择什么选项卡,都必须 show/hide FAB 是不可接受的解决方案。我尝试了所有布局组合,但将 FAB 移动到 activity 布局是唯一可行的解决方案。但是,如果您只需要一个选项卡中的按钮怎么办?这是现在唯一可行的方法,但我期待设计库的更新,因为这个版本有太多错误。无论如何,最重要的是 FAB 必须是 CoordinatorLayout 的直接后代,所以它不会被折叠的工具栏压下...
我刚 运行 遇到了同样的问题。不幸的是,我没有给你答案,但有一些附加点。
不是按钮被按下,而是整个fragment被按下。到目前为止我还没有测试过,但我想,如果有一种方法可以让您看到片段页面的大小,您会发现它并没有像它应该的那样在屏幕底部结束。
对于可能的解决方案,我考虑在底部添加一个大小为“?attr/actionBarSize”的填充。
我会测试这个,post 完成后回来
更新:
因为我使用了 80 dp 的边框,所以得到一个 screen shot(我没有 10 声望 post 一个屏幕截图,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>
注意 app:layout_behavior="@string/appbar_scrolling_view_behavior" 已被删除。
result
- 我遇到了同样的问题,FloatingActionButton 完全不可见,并且在屏幕底部不可见。当我向下滚动时,它出现了。
- 此外,向下滚动时标签会隐藏,但我希望它们始终可见,所以我通过删除
app:layout_scrollFlags="scroll|enterAlways"
修复了它。感谢 JDev 在
这也解决了 FloatingActionButton 问题,现在可见。
可能有点晚了,但对我来说最好的选择似乎是创建另一个片段,其中包含带有您的内容和浮动按钮的片段。此代码在我的应用程序中运行良好:
<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>
我在使用 view pager 1st Fragment FAB 按钮时遇到了同样的问题,它显示在屏幕下方并滚动显示。
但是经过一些发现我发现我写了
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>
这个解决方案对我有用。使用以下代码创建一个名为 CustomBehavior 的新 class:
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);
}
}
}
}
}
现在,将自定义行为 class 分配给 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"
/>
我遇到了同样的问题,要求在片段中显示 FAB。我所做的只是从工具栏中删除了行
app:layout_scrollFlags="scroll|enterAlways"
你可以看看我的布局
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/appbar_padding_top"
android:background="@color/white"
app:elevation="0dp"
android:elevation="0dp"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="@color/white"
app:title="@string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabs_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
即使在 2021 年也有很多问题。我的解决方案
- 将浮动条放入主要 activity 布局 - 这样它就会显示在整个应用程序/所有片段(我知道)中的正确位置。
- 然后您可以通过编程方式将它从您不需要的 Fragments 中隐藏起来。
我在 Fragment 中使用 FAB 按钮和 RecyclerView。此 Fragment 是 TabViewPager 的一个实例。我在使用 FAB 按钮时遇到问题。我已将 RecyclerView 和 fab 按钮放置在 FrameLayout 中,其中 FAB 按钮位于右下角。现在我面临的问题是 FAB 按钮不完全可见。它的一半部分被隐藏,如下面的屏幕截图所示。谁能帮我解决这个问题。提前致谢。
注意: FAB 在滚动后正确对齐。只有在理想情况下(在滚动完成之前)才会出现问题。
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"/>
我有点按照 Gabriele 的建议将 FAB 移动到包含 activity。您还需要在 onTabSelected:
中更新 FAB 的 color/clickListenerpublic 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;
}
}
...
}
然后在设置函数中设置颜色并点击侦听器:
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
.
无论选择什么选项卡,都必须 show/hide FAB 是不可接受的解决方案。我尝试了所有布局组合,但将 FAB 移动到 activity 布局是唯一可行的解决方案。但是,如果您只需要一个选项卡中的按钮怎么办?这是现在唯一可行的方法,但我期待设计库的更新,因为这个版本有太多错误。无论如何,最重要的是 FAB 必须是 CoordinatorLayout 的直接后代,所以它不会被折叠的工具栏压下...
我刚 运行 遇到了同样的问题。不幸的是,我没有给你答案,但有一些附加点。
不是按钮被按下,而是整个fragment被按下。到目前为止我还没有测试过,但我想,如果有一种方法可以让您看到片段页面的大小,您会发现它并没有像它应该的那样在屏幕底部结束。
对于可能的解决方案,我考虑在底部添加一个大小为“?attr/actionBarSize”的填充。
我会测试这个,post 完成后回来
更新: 因为我使用了 80 dp 的边框,所以得到一个 screen shot(我没有 10 声望 post 一个屏幕截图,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>
注意 app:layout_behavior="@string/appbar_scrolling_view_behavior" 已被删除。 result
- 我遇到了同样的问题,FloatingActionButton 完全不可见,并且在屏幕底部不可见。当我向下滚动时,它出现了。
- 此外,向下滚动时标签会隐藏,但我希望它们始终可见,所以我通过删除
app:layout_scrollFlags="scroll|enterAlways"
修复了它。感谢 JDev 在
这也解决了 FloatingActionButton 问题,现在可见。
可能有点晚了,但对我来说最好的选择似乎是创建另一个片段,其中包含带有您的内容和浮动按钮的片段。此代码在我的应用程序中运行良好:
<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>
我在使用 view pager 1st Fragment FAB 按钮时遇到了同样的问题,它显示在屏幕下方并滚动显示。 但是经过一些发现我发现我写了
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>
这个解决方案对我有用。使用以下代码创建一个名为 CustomBehavior 的新 class:
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);
}
}
}
}
}
现在,将自定义行为 class 分配给 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"
/>
我遇到了同样的问题,要求在片段中显示 FAB。我所做的只是从工具栏中删除了行
app:layout_scrollFlags="scroll|enterAlways"
你可以看看我的布局
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/appbar_padding_top"
android:background="@color/white"
app:elevation="0dp"
android:elevation="0dp"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="@color/white"
app:title="@string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabs_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
即使在 2021 年也有很多问题。我的解决方案
- 将浮动条放入主要 activity 布局 - 这样它就会显示在整个应用程序/所有片段(我知道)中的正确位置。
- 然后您可以通过编程方式将它从您不需要的 Fragments 中隐藏起来。