Libreria FAB di supporto progettazione Android in un frammento di ViewPager con layout di coordinatore

Question

Sto cercando di ottenere un pulsante di azione mobile dalla libreria di supporto di progettazione Android all'interno di un frammento che si trova all'interno di un ViewPager. Ho 4 schede e voglio il FAB solo in una delle schede. Il mio layout sono i seguenti:

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

Ora il problema è, la FAB non funziona secondo le specifiche di progettazione. il nascondiglio e la rappresentazione del fab non funzionano. Inoltre, il FAB non si trova nella posizione iniziale quando viene attivato il frammento. Ho allegato gli screenshot qui sotto per renderlo più chiaro.

Nell'immagine a sinistra, come potete vedere, il FAB è fuori dallo schermo. Quando scorro, la barra degli strumenti si nasconde (si pensi all'app Play Store) e le schede rimangono, quella volta il FAB scorrerà verso l'alto.

Si tratta di un bug nella libreria Supporto alla progettazione? O il mio layout è errato? Inoltre, voglio il FAB solo in uno dei frammenti, quindi l'aggiunta nel genere main_layout.xml ha lo scopo di sconfiggere.

Answer 1

Non è strettamente un bug, ma solo il modo in cui l'hanno implementato.

E 'a causa di questo:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

Questo comportamento non manipolare la dimensione della ViewPager, appena spinge fuori la parte inferiore dello schermo quando l'AppBarLayout è espanso.

Il frammento sta riempiendo l'intera dimensione di ViewPager e quindi allinea correttamente il FAB in basso a destra del contenitore di ViewPager; ma poiché il contenitore ViewPager è sfalsato, in basso a destra è disattivato.

Il modo "corretto" di utilizzare un FloatingActionButton in questo contesto, è di avere l'attività vederlo - in questo modo:

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

È quindi modificare le dimensioni, l'icona del FloatingActionButton e onClickBehaviour sulla base di ciò che la pagina è indicata nel ViewPager usando l'interfaccia OnPageChangeListener.

Per fare in modo che il FloatingActionButton scorra verso il basso quando si esegue il riciclo di RecyclerView, è necessario creare un comportamento! Questo è quello che ho usato in un progetto diverso:

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; 


    } 


} 

Impostare questo sul vostro FloatingActionButton con app: layout_behaviour e tutto deve essere ben ...