android - extended - floating action button menu

Animación FAB con viewpager/tabslider

Question

Estoy tratando de encontrar la manera de lograr tal efecto https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsVlhxNGJCNTEzNFU/components-buttons-fab-behavior_04_xhdpi_009.webm

Estoy usando android.support.v4.view.ViewPager

Aprecio cualquier consejo y ayuda

Answer 1

Aquí hay otra solución. El problema para mí con otros es que otorgar el control de la FAB a la actividad que contiene el ViewPager hace que sea difícil codificarlo.

Necesito muchos controles en la FAB por parte de los Fragmentos para cambiar fácilmente el ícono de la FAB y establecer oyentes específicos en él.

A grandes rasgos, los pasos son:

1. Declara un FAB en la actividad principal que contiene el ViewPager, y no en los fragmentos (es un paso obligatorio que quería evitar, pero la magia viene después; hacer lo contrario dificulta las cosas para una buena animación)
2. En cada fragmento que se muestra en el ViewPager, creo un método donde puedo pasar un FAB, como public void shareFab(FloatingActionButton sharedFab) ; Dentro de este método, cada fragmento establecerá el ícono FAB y agregará los oyentes necesarios.
3. Configuré una escucha ViewPager.OnPageChangeListener en el ViewPager que activará animaciones y llamará a mis métodos shareFab .

Por lo tanto, cada vez que se muestra un fragmento, la actividad contenedora dará al fragmento mostrado la referencia de la FAB. El fragmento luego reinicia / recicla el FAB para satisfacer sus necesidades.

Aquí hay un ejemplo:

Los fragmentos a desplegar.

public void Fragment1 extends Fragment {

    private FloatingActionButton mSharedFab;

    @Override
    public void onDestroy() {
        super.onDestroy();
        mSharedFab = null; // To avoid keeping/leaking the reference of the FAB
    }

    public void shareFab(FloatingActionButton fab) {
        if (fab == null) { // When the FAB is shared to another Fragment
            if (mSharedFab != null) {
                mSharedFab.setOnClickListener(null);
            }
            mSharedFab = null;
        }
        else {
            mSharedFab = fab;
            mSharedFab.setImageResource(R.drawable.ic_search);
            mSharedFab.setOnClickListener((fabView) -> {
                // Your code
            });
        }
    }
}

La actividad del contenedor

public class ActivityMain extends AppCompatActivity {

    FloatingActionButton mSharedFab;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mSharedFab = (FloatingActionButton) findViewById(R.id.shared_fab);

        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        adapter.addFragment(fragment1, "Fragment1");
        adapter.addFragment(fragment2, "Fragment2");
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);

        fragment1.shareFab(mSharedFab); // To init the FAB
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
            @Override
            public void onPageSelected(int position) {  }
            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state) {
                    case ViewPager.SCROLL_STATE_DRAGGING:
                        mSharedFab.hide(); // Hide animation
                        break;
                    case ViewPager.SCROLL_STATE_IDLE:
                        switch (viewPager.getCurrentItem()) {
                            case 0:
                                fragment2.shareFab(null); // Remove FAB from fragment
                                fragment1.shareFab(mSharedFab); // Share FAB to new displayed fragment
                                break;
                            case 1:
                            default:
                                fragment1.shareFab(null); // Remove FAB from fragment
                                fragment2.shareFab(mSharedFab); // Share FAB to new displayed fragment
                                break;
                        }
                        mSharedFab.show(); // Show animation
                        break;
                }
            }
        });
    }
}

... y el trazado clásico de la actividad principal.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

    </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.FloatingActionButton
        android:id="@+id/shared_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin" />

</android.support.design.widget.CoordinatorLayout>

Los pros son:

• Animación como la descrita en las pautas de Diseño de Materiales!
• Control total de la FAB por cada fragmento.

Los contras son:

• ya que la FAB se puede compartir con otros fragmentos, la referencia de la FAB debe verificarse cada vez que se asegure que no sea nula
• Declaración de la FAB a nivel del ViewPager, un poco engorroso

Answer 2

La solución que descubrí fue:

1. Mis fragmentos que se muestran dentro de mi ViewPager implementan una interfaz (en mi caso FloatingActionButtonFragment ). Esta interfaz requiere que el fragmento tenga un método handleFABClick(View) .

2. Mi oyente de cambio de ViewPager se ve a continuación:

   viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   
   
       @Override
       public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   
       }
   
       @Override
       public void onPageSelected(int position) {
   
   
       }
   
       @Override
       public void onPageScrollStateChanged(int state) {
   
           switch (state) {
               case ViewPager.SCROLL_STATE_SETTLING:
                   displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
                   break;
   
               case ViewPager.SCROLL_STATE_IDLE:
                   displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
                   break;
   
               default:
                   mFloatingActionButton.hide();
           }
   
       }
   });
   
   private void displayFloatingActionButtonIfNeeded(int position) {
       if (mFragmentStatePagerAdapter.getItem(position) instanceof FloatingActionButtonFragment) {
   
           final FloatingActionButtonFragment floatingActionButtonFragment = (FloatingActionButtonFragment) mFragmentStatePagerAdapter.getItem(position);
   
           mFloatingActionButton.show();
           mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   floatingActionButtonFragment.handleFABClick(v);
               }
           });
       }
   }

Esto hace que la FAB se "esconda" cuando el usuario está cambiando las vistas, pero luego activa el método de mostrar cuando el estado de la vista está inactivo (se ha calmado) o se está resolviendo (necesitaba hacer las dos cosas porque no me sentía bien usando solo ocioso).

Answer 3

Para mi problema, no quería mostrar el botón de acción flotante en la primera pestaña; Para lograr esto agregué

android:visibility="invisible"

En barra de acción flotante.

<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:visibility="invisible"
        app:srcCompat="@android:drawable/ic_input_add" />

Y he agregado ViewpagerListner en mi actividad como lo sugiere @chantell

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                switch (position) {
                    case 0:
                        addFloatingActionBt.hide();
                        break;
                    default:
                        addFloatingActionBt.show();
                        break;

                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

Answer 4

Para una buena animación de hide y show usa esto:

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state){
                    case ViewPager.SCROLL_STATE_IDLE:
                        fab.show();
                        break;
                    case ViewPager.SCROLL_STATE_DRAGGING:
                    case ViewPager.SCROLL_STATE_SETTLING:
                        fab.hide();
                        break;
                }

            }
        });

Answer 5

Primero, debe tener el diseño con el botón de acción flotante anclado al ViewPager:

<android.support.design.widget.CoordinatorLayout
    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/action_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:tabGravity="center"
            app:tabIndicatorColor="?attr/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="?attr/colorAccent"
            app:tabTextColor="@android:color/black" />

    </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.FloatingActionButton
            android:id="@+id/fab"
            app:layout_anchor="@id/viewpager"
            app:layout_anchorGravity="bottom|right|end"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:src="@drawable/ic_add_white"
            app:borderWidth="@dimen/fab_border_width"
            app:fabSize="normal" />

</android.support.design.widget.CoordinatorLayout>

Ahora que tiene el FAB anclado en el ViewPager (nota: lo he intentado en un fragmento que es una pestaña en el viewpager; parece que no se comporta correctamente), agregue un OnPageChangeListener a su ViewPager así:

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {

            switch (position) {
                case INDEX_OF_TAB_WITH_FAB:
                    fab.show();
                    break;

                default:
                    fab.hide();
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

Las animaciones para el "pop" y el "encogimiento" al cambiar de pestaña se manejan automáticamente con la nueva versión de la biblioteca de soporte.

Answer 6

Recientemente encontré una solución mucho mejor con la que estoy satisfecho. El método de ocultación FAB también puede tener un detector de parámetros que se activa cuando el botón está oculto (el método de mostrar también lo tiene). El único inconveniente es que tiene que implementar los cambios de viewpager y tablayout manualmente.

@Override
public void onPageSelected(int position) {
    onToolbarTitleChanged(adapter.getPageTitle(position).toString());
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageScrollStateChanged(int state) {
}

@Override
public void onTabSelected(TabLayout.Tab tab) {
    viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(final TabLayout.Tab tab) {
    fab.hide(new FloatingActionButton.OnVisibilityChangedListener() { // Hide FAB
        @Override
        public void onHidden(FloatingActionButton fab) {
            fab.show(); // After FAB is hidden show it again
        }
    });
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
}

Si desea mostrar FAB solo en pestañas específicas, puede cambiar el método onTabSelected para:

@Override
public void onTabSelected(TabLayout.Tab tab) {
    if (tab.getPosition() == 2) {
        createButton.hide();
    }
    viewPager.setCurrentItem(tab.getPosition());
}