android - style - bottomnavigationview api 23

android ViewPager personalizable

Question

Necesito implementar una vista de desplazamiento como se muestra:

Es decir, en la imagen de estado "inactiva", "1" es visible en tamaño completo y la imagen "2" es visible parcialmente (lo que da una pista al usuario de que puede desplazar el contenido). Después del desplazamiento, scrool view no debe permanecer en estado intermedio y el desplazamiento debe completarse (como ocurre con la vista de desplazamiento de iOS cuando se activa "Paging Enabled"):

Me negué a usar HorizontalScrollView , porque no tiene nada similar a la propiedad "Paging Enabled".

Después de buscar en Google, me encontré con android.support.v4.view.ViewPager . Su comportamiento de desplazamiento es perfectamente lo que quiero, pero no tengo una buena idea de cómo admitir la siguiente imagen "parcialmente visible" en ViewPager . Técnicamente, ¿qué debería devolver en el

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)?

Por el momento, mi código es

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    View view = inflater.inflate(R.layout.stage_select_image_layout, container, false);
    ImageView imageView = (ImageView) view.findViewById(R.id.stage_select_image_layout_image);
    imageView.setImageResource(m_imageResourceId);
    return view;
}

Pero resulta en un comportamiento "exactamente una imagen por página", no lo que quiero (vea la primera figura).

Answer 1

Use el atributo widthFactor de LayoutParams de ViewPager. Debería escalarlo para que pueda ver un poco de la siguiente página.

Answer 2

Esto hace el truco:

    ViewPager pager = ...;
    pager.setOffscreenPageLimit(2);
    pager.setPageMargin(-200);

Answer 3

Lo más fácil es que, en su PagerAdapter, implemente una anulación para getPageWidth. El valor de retorno es un porcentaje que la vista ocupa del espacio total.

@Override
public float getPageWidth(int position) {
    return 0.75f;
}