Android Design Support Bibliothek FAB in einem ViewPager Fragment mit Koordinator Layout

Question

Ich versuche, eine Floating Action Button aus der Android Design Support Library innerhalb eines Fragments zu bekommen, das sich in einem ViewPager befindet. Ich habe 4 Tabs und ich möchte die FAB nur in einem der Tabs. Mein Layout sind wie folgt:

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

<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" /> 

Das Problem ist jetzt, die FAB funktioniert nicht gemäß den Designspezifikationen. Das Ausblenden und Anzeigen der Fab funktioniert nicht. Außerdem ist der FAB nicht an seinem ursprünglichen Ort, wenn das Fragment aktiviert ist. Ich habe unten Screenshots angehängt, um es klarer zu machen.

Die im linken Bild, wie Sie sehen können, ist der FAB aus dem Bildschirm. Wenn ich blättern gehe, wird die Toolbar ausgeblendet (denke Play Store App) und die Tabs bleiben, zu dieser Zeit wird der FAB nach oben scrollen.

Ist das ein Fehler in dem Design Support-Bibliothek? Oder ist mein Layout falsch? Außerdem möchte ich die FAB nur in einem der Fragmente, also fügt das Hinzufügen der main_layout.xml irgendwie diesen Zweck ein.

Answer 1

Es ist nicht nur ein Fehler, sondern nur die Art, wie sie es implementiert haben.

Es ist aus diesem Grund:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

Dieses Verhalten nicht die Größe des ViewPager nicht manipulieren, sie schiebt es nur den unteren Rand des Bildschirms aus, wenn der AppBarLayout erweitert wird.

Ihr Fragment füllt die gesamte Größe des ViewPagers und richtet den FAB korrekt rechts unten am ViewPager-Container aus. Da der ViewPager-Container jedoch versetzt ist, befindet sich die untere rechte Ecke außerhalb des Bildschirms.

Die „richtige“ Weg, um eine FloatingActionButton in diesem Zusammenhang der Verwendung ist durch die Aktivität zeigen es - wie folgt aus:

<?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> 

Sie dann die Größe des FloatingActionButton, das Symbol und onClickBehaviour basierend auf welcher Seite angezeigt wird im ViewPager mit der OnPageChangeListener Schnittstelle.

Um den FloatingActionButton beim Scrollen des RecyclerViews von unten nach unten scrollen zu lassen, müssen Sie ein Verhalten erstellen! Dies ist ein ich in einem anderen Projekt verwendet:

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; 


    } 


} 

Setzen Sie diese auf Ihre FloatingActionButton mit App: layout_behaviour und es sollte alles gut sein ...