[英]Android Design Support Library FAB in a ViewPager Fragment with Coordinator Layout
I'm trying to get a Floating Action Button from the Android Design Support Library inside a Fragment which is inside a ViewPager. 我正试图在ViewPager内部的片段内的Android设计支持库中获取一个浮动操作按钮。 I've 4 tabs and I want the FAB in only one of the Tabs.
我有4个选项卡,我只想在其中一个选项卡中使用FAB。 My layout are as follows:
我的布局如下:
main_layout.xml
main_layout.xml
<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:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabIndicatorHeight="3dp"
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" />
list_fragment_with_fab.xml
list_fragment_with_fab.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="5dip"
android:background="@color/Transparent_White"
android:fitsSystemWindows="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<org.lucasr.twowayview.widget.TwoWayView
android:id="@+id/clip_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:twowayview_layoutManager="ListLayoutManager" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/add_list_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="@drawable/ic_list_add"
app:layout_anchor="@+id/clip_recycler_view"
app:layout_anchorGravity="bottom|right|end" />
Now the problem is, the FAB does not work as per the design specs. 现在的问题是,FAB不能按照设计规范工作。 ie the hiding and showing of the fab doesn't work.
即隐藏和展示工厂不起作用。 Also, the FAB is not at it's initial place when the fragment is activated.
此外,当激活片段时,FAB不在其初始位置。 I've attached screenshots below to make it more clear.
我在下面附上了截图,以便更清楚。
The in the left image, as you can see, the FAB is off the screen. 如您所见,在左侧图像中,FAB不在屏幕上。 When I scroll, the Toolbar will hide (think Play Store App) and the tabs remain, that time the FAB will scroll up.
当我滚动时,工具栏将隐藏(想想Play商店应用程序)并且标签保持不变,那时FAB将向上滚动。
Is this a bug in the Design Support library? 这是设计支持库中的错误吗? Or is my layout incorrect?
或者我的布局不正确? Also, I want the FAB in only one of the fragments, so adding in the main_layout.xml kinda defeats that purpose.
此外,我只想在其中一个片段中使用FAB,因此添加main_layout.xml有点会失败。
It's not strictly a bug, but just the way they've implemented it. 它不是严格意义上的错误,而是它们实现它的方式。
It's because of this: 这是因为:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
This behavior doesn't manipulate the size of the ViewPager, it just pushes it off the bottom of the screen when the AppBarLayout is expanded. 此行为不会操纵ViewPager的大小,它只是在展开AppBarLayout时将其从屏幕底部推出。
Your fragment is filling the entire size of the ViewPager and so correctly aligns the FAB to the bottom right of the ViewPager container; 您的片段正在填充ViewPager的整个大小,因此正确地将FAB对齐到ViewPager容器的右下角; but because the ViewPager container is offset, the bottom right is offscreen.
但由于ViewPager容器是偏移的,因此右下角是屏幕外的。
The "proper" way of using a FloatingActionButton in this context is by having the activity show it - like this: 在此上下文中使用FloatingActionButton的“正确”方法是让活动显示它 - 如下所示:
<?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="bubblebearapps.co.uk.nfcapi.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:theme="@style/AppTheme.AppBarOverlay">
<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">
</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.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.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
You then change the FloatingActionButton's size, icon and onClickBehaviour based on what page is shown in the ViewPager using the OnPageChangeListener interface. 然后,您可以使用OnPageChangeListener接口根据ViewPager中显示的页面更改FloatingActionButton的大小,图标和onClickBehaviour。
To make the FloatingActionButton scroll off the bottom when you're scolling the RecyclerView, you must create a Behaviour! 要在您收集RecyclerView时使FloatingActionButton从底部滚动,您必须创建一个行为! This is one I used in a different project:
这是我在另一个项目中使用的:
public class ScrollOffBottomBehaviour extends CoordinatorLayout.Behavior<View> {
private int mViewHeight;
private ObjectAnimator mAnimator;
public ScrollOffBottomBehaviour(Context context, AttributeSet attrs) {
super();
}
@Override
public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
mViewHeight = child.getHeight();
return super.onLayoutChild(parent, child, layoutDirection);
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
if(mAnimator == null || !mAnimator.isRunning()){
int totalScroll = (dyConsumed + dyUnconsumed);
int targetTranslation = totalScroll > 0 ? mViewHeight : 0;
mAnimator = ObjectAnimator.ofFloat(child, "translationY", targetTranslation);
mAnimator.start();
}
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
}
Set this onto your FloatingActionButton with app:layout_behaviour and all should be well... 使用app:layout_behaviour将它设置到您的FloatingActionButton上,一切都应该很好......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.