Android: desplácese/mueva el ListView en sí

scroll offset

Question

He visto algunas aplicaciones modernas de Android e iOS donde habrá una Imagen en la parte superior de la página que cubre todo el ancho de la pantalla. Debajo de él, habrá un ListView que se extiende hasta la página.

Cuando comienza a desplazarse hacia abajo en ListView , ListView comienza a moverse hacia arriba hasta llegar a la parte superior de la pantalla, es decir, cubriendo completamente la pantalla superior.

Ejemplos de aplicaciones que hacen esto son: Google Play Store , Huffington Post , YouTube .

Intenté buscar en Google esto pero no he podido encontrar una fuente relativa.

Answer 1

Esto es un truco visual, donde parece que la imagen y la lista son una pero realmente no lo son.

básicamente, tiene una vista de lista con una vista de encabezado del mismo tamaño que la imagen y debajo de la vista de lista tiene su imagen, de modo que al desplazarse, la vista de lista se desplaza sobre la imagen.

El diseño se vería algo como esto

<RelativeLayout>
<ImageView></ImageView>
<ListView></ListView>
</RelativeLayout>

Cree otro diseño para el encabezado que está vacío con el tamaño de la imagen

También puede Traducir la imagen en la dirección Y cuando la lista se desplaza pero luego debe mantener la vista globalmente en su clase para que pueda traducir usando v.setTranslateY()

Answer 2

Necesita agregar un encabezado a la vista de lista. Puedes hacerlo haciendo esto:

final View header = LayoutInflater.from(getActivity()).inflate(R.layout.myheader, null);
((ListView) getActivity().findViewById(R.id.list)).addHeader(header);

Entonces puedes hacer el efecto de desplazamiento haciendo esto:

 ((ListView) getActivity().findViewById(R.id.list)).setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (v.getChildCount() > 0 && v.getChildAt(0) != null)
header.setTranslationY(Math.round(-v.getChildAt(0).getTop() * 0.5));
}
});

Aquí header es el encabezado de la lista