Traducir el botón de acción flotante en ViewPager

Tengo una pantalla con 3 pestañas, un ViewPager abajo con 3 fragmentos y un botón de acción flotante en la esquina inferior derecha.

Cuando la primera ficha es la pestaña actual, entonces quiero mostrar el FAB en la esquina inferior derecha. Cuando la segunda pestaña está en la pestaña actual, entonces quiero mostrar el FAB en el centro inferior. Cuando la pestaña 3 es la pestaña actual, entonces quiero ocultar el FAB.

La animación de traducción de abajo a derecha a centro de abajo o viceversa debe suceder a medida que el paginador de visualización se desplaza, es decir, sobre la base de la cantidad de desplazamiento.

A continuación se muestra lo que he intentado.

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { ViewCompat.animate(mFAB) .translationX(-translate) .withLayer() .setDuration(0) .setInterpolator(new LinearInterpolator()) .start(); } @Override public void onPageSelected(int position) { mTabLayout.getTabAt(position).select(); } @Override public void onPageScrollStateChanged(int state) { } }); 

¿Es esta la mejor manera de hacer esto? En caso afirmativo, ¿cuál debería ser el valor de la variable traducir?

Por favor, ayúdeme a implementar esto.

Para la referencia usted puede comprobar la aplicación de la llamada de Lollipop del androide. El FAB para mostrar el marcador anima de manera similar. Para la primera pestaña su en la parte inferior derecha entonces para la pestaña media que viene en el centro. Esto es exactamente lo que quiero.

One Solution collect form web for “Traducir el botón de acción flotante en ViewPager”

La forma más fácil de hacerlo sería por ejemplo:

 mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { final int width = mViewPager.getWidth(); if (position == 0) { // represents transition from page 0 to page 1 (horizontal shift) int translationX = (int) ((-(width - mFab.getWidth()) / 2f) * positionOffset); mFab.setTranslationX(translationX); mFab.setTranslationY(0); } else if (position == 1) { // represents transition from page 1 to page 2 (vertical shift) int translationY = (int) (mFab.getHeight() * positionOffset); mFab.setTranslationY(translationY); mFab.setTranslationX(-(width - mFab.getWidth()) / 2f); } } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); 

Tenga en cuenta que el parámetro width debería representar el ancho de la pantalla (asumí que ViewPager llena el ancho de la pantalla (así que width = mViewPager.getWidth() ).

Tampoco dijiste exactamente de qué manera deseas que tu FAB se oculte. Así que lo traduje verticalmente. También puede usar setScaleX(...) y setScaleY(...) .

Editar:

El valor (paso) del parámetro cambiado debe calcularse utilizando el siguiente método (llamémoslo – para futuras referencias – formula 1 ):

 // formula 1 value = targetValue - ((targetValue - initialValue) * (1.0f - offset)); 

Donde offset representa un parámetro que cambia (dentro del rango [0f; 1f] ). Así que en su caso, offset es el argumento positionOffset del método onPageScrolled .

Analicemos la transición entre las páginas 0 y 1 (de su caso; position==0 ):

  1. Desea mover su FAB horizontalmente, por lo que va a modificar el paramenter translationX .
  2. FAB está anclado en la esquina inferior derecha (por ejemplo, con layout_gravity="bottom|right" )
  3. La posición inicial de la FAB es la posición correcta de su animación para la página NO desplazada 0. Por lo tanto, el valor initialValue de la translationX para su animación es 0
 initialValue = 0; 

  1. Desea mover su FAB al centro de la pantalla. Dado el ancho de la pantalla como un width variable, puede calcular el targetValue adecuado para el desplazamiento FAB al centro de la pantalla. Es igual a la mitad del ancho de la pantalla restado por la mitad de la anchura FAB . Y puesto que estás empezando desde la esquina derecha, este valor será negativo (“)
 targetValue = -(width - mFab.getWidth()) / 2f; 

  1. Debido al hecho de que el parámetro initialValue es 0 , puede simplificar la formula 1 a (se hará referencia a la formula 2 ):
 // formula 2 value = targetValue * offset; 

  1. Tomando el targetValue calculado se termina con esto ( formula 2 con targetValue calculado y positionOffset lugar de offset ):
 value = (-(width - mFab.getWidth()) / 2f) * positionOffset; 

Que es exactamente lo que usé para mover FAB desde la posición inicial ( bottom|right ) al centro de la pantalla (horizontalmente). Pasé por un proceso similar al calcular el valor de paso deseado para la translationY en la transición entre las páginas 1 y 2.

Lo que debe hacer es hacer lo mismo para cualquier paso futuro. Piense en initialValue y targetValue de los parámetros animados, inserte valores calculados en la formula 1 y vea si funciona como se desea.

  • Biblioteca de diseño de Android - Problemas de relleno / margen de botón de acción flotante
  • Biblioteca de soporte de diseño de Android
  • Cambiar el color del icono de FAB basado en estado w / compat libs
  • Cómo reparar sombra en FloatingActionButton escalado mediante la biblioteca de soporte 23
  • El botón flotante no funciona en la versión Pre-lollipop
  • Android: Cómo cambiar el tamaño de la aplicación: fabSize = "normal" para el botón de acción flotante
  • Cómo agregar sombra a la FAB proporcionada con la biblioteca de diseño de soporte de Android?
  • FloatingActionButton no ocultar
  • No se pudo encontrar: com.android.support:appcompat-v7:22.2.0
  • Cómo agregar el botón de acción flotante en la parte superior de scrollview
  • Botón de acción flotante en Xamarin.Forms
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.