android - studio - Indicadores de flecha izquierda-derecha sobre un ViewPager

viewpager android github

Question

Quiero mostrar flechas hacia la izquierda y hacia la derecha sobre mi ViewPager, para indicar el deslizamiento.

Agregué dos ImageButtons sobre el elemento ViewPager pero esas áreas luego bloquean el ViewPager para que no active el "deslizamiento".

También quiero presionar esas flechas para hacer que el fragmento cambie en consecuencia.

En resumen: los ImageButtons no deben interferir con el deslizamiento, pero deben registrarse presionando.

¿Cómo puedo conseguir esto? ¡Gracias!

Answer 1

El siguiente código me funcionó perfectamente. NB: use FrameLayout ya que permite vistas superpuestas

 <FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="200dp" />
<ImageButton
android:id="@+id/left_nav"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical|left"
android:src="@drawable/ic_chevron_left_black_24dp" />
<ImageButton
android:id="@+id/right_nav"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical|right"
android:src="@drawable/ic_chevron_right_black_24dp" />
</FrameLayout>

La siguiente parte la utilicé para manejar los eventos de clic de ImageButton

viewPager = (ViewPager) view.findViewById(R.id.viewpager);
leftNav = (ImageButton) view.findViewById(R.id.left_nav);
rightNav = (ImageButton) view.findViewById(R.id.right_nav);
// Images left navigation
leftNav.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int tab = viewPager.getCurrentItem();
if (tab > 0) {
tab--;
viewPager.setCurrentItem(tab);
} else if (tab == 0) {
viewPager.setCurrentItem(tab);
}
}
});
// Images right navigatin
rightNav.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int tab = viewPager.getCurrentItem();
tab++;
viewPager.setCurrentItem(tab);
}
});

Salida

Answer 2

Implemente los botones de flecha izquierda y derecha en su fragmento. Luego registre su onClick en su actividad y llame al método arrowScroll de viewpager para desplazarse programáticamente en viewPager.

public void onRightClick(View view) {
viewPager.arrowScroll(ViewPager.FOCUS_RIGHT);
}
public void onLeftClick(View view) {
viewPager.arrowScroll(ViewPager.FOCUS_LEFT);
}

Cree un método para alternar la visibilidad de la flecha izquierda / derecha en su fragmento.

public void toggleArrowVisibility(boolean isAtZeroIndex, boolean isAtLastIndex) {
if(isAtZeroIndex)
leftBtn.setVisibility(View.INVISIBLE);
else
leftBtn.setVisibility(View.VISIBLE);
if(isAtLastIndex)
rightBtn.setVisibility(View.INVISIBLE);
else
rightBtn.setVisibility(View.VISIBLE);
}

Ahora implementa ViewPager.OnPageChangeListener en tu actividad. Use SmartFragmentStatePagerAdapter para realizar un seguimiento de los fragmentos registrados en la memoria.

@Override
public void onPageSelected(int position) {
MyFragment fragment = (MyFragment) smartAdapter.getRegisteredFragment(position);
fragment.toggleArrowVisibility(position == 0, position == list.size() - 1);
}

Answer 3

Me di cuenta de una solución. Es muy sencillo.

En lugar de usar ImageButtons para mostrar las flechas, ahora uso ImageViews porque pasan los eventos táctiles a la capa debajo.

Luego, coloco los Botones transparentes en los fragmentos, de esa forma, no bloquearán el comportamiento de deslizamiento de los ViewPagers, sino que dispararán en ¡Eventos de clic!

Answer 4

No es necesario administrar el índice actual para esto o manejar cualquier deslizamiento manual. Simplemente llame al método viewPager.arrowScroll(int direction) en los eventos de clic de las flechas izquierda y derecha.

En pocas palabras, siga estos 2 pasos simples:

1. Implemente 2 ImageViews / ImageButtons / Buttons para las flechas izquierda y derecha.

2. Al hacer clic en ellos, llame:

   a) si se hace clic en la flecha izquierda - viewPager.arrowScroll(View.FOCUS_LEFT);

   b) si se hace clic en la flecha hacia la derecha: viewPager.arrowScroll(View.FOCUS_RIGHT);

Answer 5

Primero usa el diseño relativo como tu diseño padre

en segundo lugar, a continuación, agregue el paginador de vista dentro de él con el atributo principal coincidente en él

en tercer lugar, coloque dos botones de imagen sobre el paginador de la vista, pero bajo la jerarquía de diseño principal, colóquelos en el centro vertical como una gravedad y mantenga su lado a la derecha y a la izquierda según su requisito

Cuarto código funcional de escritura para botones.

quinto tomar contador estático para obtener la página de paginador vista actual

en el botón izquierdo y derecho, establezca menos y más el contador de localizador de vista resp. y de acuerdo con que muestran los datos en la vista de paginador

esta es la lógica simple para el código que puede buscar en google lo obtendrá fácilmente