support - viewpager android slider

Ver la traducción deslizando un ViewPager (4)

Mientras vuelvo a leer su pregunta y esta respuesta, no estoy seguro de haber abordado realmente su pregunta. Creo que puede ser de ayuda, así que lo estoy publicando.

De acuerdo con esto , position = 0 significa que esta página es frontal y central (y para este ejemplo, pantalla completa). Solo nos importa una página con una posición en el rango de -1 a +1, de lo contrario está demasiado fuera de la vista como para preocuparse. Puede ver esto en la primera y última condición donde alfa se establece en 0, haciendo que la vista sea completamente transparente.

No puedo entender la declaración,
view.setTranslationX(horzMargin - vertMargin / 2);

Cuando lo miré, tampoco vi mucho valor en esta sección de código. Dado que los márgenes se calculan en función del scaleFactor, y que está limitado a 0.85 - 1.0, no hace mucha diferencia en la apariencia de la transición. Estoy seguro de que alguien con un ojo mucho mejor para el diseño que yo estaría en desacuerdo. Sin embargo, eliminé esta parte del código como un experimento.

float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); }

Si bien pude ver pequeñas diferencias dependiendo de la configuración de traducción, si miraba de cerca, nunca lo notaría con un uso casual. Se puede ver una mayor diferencia al configurar MIN_SCALE en 0.5 (o más pequeño).

¿Qué pasaría con mi cálculo?

Probablemente nada, siempre y cuando lo limite a un pequeño resultado, como lo hace el código actual. Tenga en cuenta que la clase ViewPager es el controlador principal de la animación en lugar de setTranslationX() .

Estaba leyendo un ejemplo sobre la personalización de la animación de página deslizante de ViewPager que implica traducir la página ( View ) a una cierta cantidad. El ejemplo es de los documentos . Específicamente, se trata de una implementación llamada ZoomOutPageTransformer que se puede establecer en un ViewPager través de setPageTransformer() para personalizar cómo se desliza la página (incorporando una animación de zoom en ella).

Así es como se supone que se verá el resultado final:

Ahora, describen cómo lo van a hacer:

En su implementación de transformPage() , puede crear animaciones de diapositivas personalizadas determinando qué páginas deben transformarse en función de la posición de la página en la pantalla, que se obtiene del parámetro de position del método transformPage() .
El parámetro de position indica dónde se encuentra una página determinada en relación con el centro de la pantalla. Es una propiedad dinámica que cambia a medida que el usuario se desplaza por las páginas. Cuando una página llena la pantalla, su valor de position es 0. Cuando una página se dibuja justo al lado derecho de la pantalla, su valor de position es 1. Si el usuario se desplaza a medio camino entre las páginas uno y dos, la página uno tiene una position de -0.5 y la página dos tiene una position de 0.5. Según la position de las páginas en la pantalla, puede crear animaciones de diapositivas personalizadas estableciendo propiedades de página con métodos como setAlpha() , setTranslationX() o setScaleY() .

Y esta es la implementación del PageTransformer que han proporcionado:

public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }

Problema:

No puedo entender la declaración,

view.setTranslationX(horzMargin - vertMargin / 2);

Según entendí, un valor de 1.0 para el parámetro de position equivale a cubrir el ancho de la pantalla, es decir, w. Entonces, si el centro de una página se movió x unidades de position entonces la traducción en términos de píxeles / dp sería, w * x. Pero están usando algunos cálculos de margen para el cálculo del monto de la traducción.

¿Alguien puede explicar cómo han hecho este cálculo y qué habría de malo en mi cálculo?

GitHub proporciona una biblioteca para la animación que desee sin ningún cálculo
No es necesario que cree su página personalizada de ViewPagerTransformer
Simplemente agregue la siguiente biblioteca en su archivo app/build.gradle .

compile ''com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar''

MainActivity.java

public class MainActivity extends Activity { private static final String KEY_SELECTED_PAGE = "KEY_SELECTED_PAGE"; private static final String KEY_SELECTED_CLASS = "KEY_SELECTED_CLASS"; private int mSelectedItem; private ViewPager mPager; private PageAdapter mAdapter; @SuppressWarnings("deprecation") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); int selectedPage = 0; if (savedInstanceState != null) { mSelectedItem = savedInstanceState.getInt(KEY_SELECTED_CLASS); selectedPage = savedInstanceState.getInt(KEY_SELECTED_PAGE); } setContentView(R.layout.activity_main); mAdapter = new PageAdapter(getFragmentManager()); mPager = (ViewPager) findViewById(R.id.container); mPager.setAdapter(mAdapter); try { mPager.setPageTransformer(true, new TransformerItem(ZoomOutSlideTransformer.class).clazz.newInstance()); } catch (InstantiationException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } mPager.setCurrentItem(selectedPage); } public static class PlaceholderFragment extends Fragment { private static final String EXTRA_POSITION = "EXTRA_POSITION"; private static final int[] COLORS = new int[] { 0xFF33B5E5, 0xFFAA66CC, 0xFF99CC00, 0xFFFFBB33, 0xFFFF4444 }; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final int position = getArguments().getInt(EXTRA_POSITION); final TextView textViewPosition = (TextView) inflater.inflate(R.layout.fragment_main, container, false); textViewPosition.setText(Integer.toString(position)); textViewPosition.setBackgroundColor(COLORS[position - 1]); return textViewPosition; } } private static final class PageAdapter extends FragmentStatePagerAdapter { public PageAdapter(FragmentManager fragmentManager) { super(fragmentManager); } @Override public Fragment getItem(int position) { final Bundle bundle = new Bundle(); bundle.putInt(PlaceholderFragment.EXTRA_POSITION, position + 1); final PlaceholderFragment fragment = new PlaceholderFragment(); fragment.setArguments(bundle); return fragment; } @Override public int getCount() { return 5; } } private static final class TransformerItem { final String title; final Class<? extends PageTransformer> clazz; public TransformerItem(Class<? extends PageTransformer> clazz) { this.clazz = clazz; title = clazz.getSimpleName(); } @Override public String toString() { return title; } } }

activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="MainActivity" />

fragment_main.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/app_name" android:textColor="@android:color/white" android:textSize="72sp" tools:context="MainActivity$PlaceholderFragment" />

Espero que esto te pueda ayudar. :-)

Hay una cosa que te falta aquí, el PageTransformer se aplica a las vistas DESPUÉS de que se hayan posicionado.

Entonces, con o sin un PageTransformer conectado a PageView, cuando se desplaza entre páginas, simplemente hace un desplazamiento (como en un LiseView) con capacidades SNAP.

El PageTransformer solo agrega efectos además de eso.

Entonces el propósito de,

NO es para mover las páginas, sino para compensar el encogimiento de la página.

Sin él, la página tendrá algunos efectos secundarios desagradables. PRUÉBALO, elimine las líneas :) - Las vistas irán a la derecha / izquierda, pero la posición estará desactivada.

Por lo tanto, la traducción X no mueve la página, pero, en este caso, simplemente gestiona el espacio de las páginas para mejorar la sensación de la animación; lo anterior es la matemática para ello. Lo que hace es reducir el espacio entre las páginas según la altura / ancho de la pantalla. Primero niega el espacio (horzMargin) luego agrega un poco de espacio (- vertMargin / 2)

Y es por eso que su cálculo no es bueno (w * x) - Está tratando de mover la página - Pero ya se está moviendo.

Si reduce la resistencia mediante scaleFactor,

Asuma que la altura original es la altura de la página y el ancho es la anchura de la página;

La nueva altura de contracción será scaleFactor * pageHeight

shrinkMarginTopBottom = pageHeight - scaleFactor * pageHeight = pageHeight(1 - scaleFactor); and I assume it will be equally shirnked from bottom and top; shrinkMarginTop = shrinkMarginTopBottom/2; which is equal to below mentioned formula float vertMargin = pageHeight * (1 - scaleFactor) / 2;

Así que publique los cálculos de márgenes

La xtraducción debe tener cierta compensación para las posiciones de página 0 y 1 para obtener el efecto de animación y cierta distancia, por lo tanto, restando los márgenes para ambos ... La división ocurre porque + ve y -ve x la traducción se suma al margen exacto

Puedo estar adivinando, pero para mí tener una traducción x variable y un margen que varía con el factor de escala, vertMargin se usa para crear ese desplazamiento que varía con la escala ... si quita el código de vertMargin, seguirá animando lo mismo pero un poco más rápido pero sin mantener ningún margen entre dos páginas.