5

estoy usando glide para cargar las imágenes y aplique el ViewPager para visualizarlas horizontalmente.

Quisiera agregarles a estas imagenes el efecto Parallax(que la imagen se mueva mas lento al viewPager). Para así, al tener una lista horizontal de imagenes con el ViewPager, al deslizar a la izquierda o derecha, la imagen tenga un efecto de movimiento a una velocidad distinta al ViewPager

Un ejemplo es este video

Para el efecto parallax, me estoy basando en el codigo de este sitio

En mi activity UsuarioDetalle uso el metodo parallaxImages() en onPageScrolled()

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    parallaxImages(position, positionOffsetPixels);
}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}

private void parallaxImages(int position, int positionOffsetPixels) {
    Map<Integer, View> imageViews = mUsuarioDetallePagerAdapter.getImageViews();

    for (Map.Entry<Integer, View> entry: imageViews.entrySet()){
        int imagePosition = entry.getKey();
        int correctedPosition = imagePosition - position;
        int displace = -(correctedPosition * width/2)+ (positionOffsetPixels / 2);

        View view = entry.getValue();
        view.setX(displace);
    }
}

En mi Adapter UsuarioDetallePagerAdapter retorno un Fragment UsuarioDetalleFragment el cual contiene los datos y carga con glide la imagen

public class UsuarioDetallePagerAdapter extends FragmentStatePagerAdapter implements ViewPager.OnPageChangeListener {

private ArrayList<Usuario> listUsuarios;
private int currentPosition = 0;

public UsuarioDetallePagerAdapter(FragmentManager fm, ArrayList<Usuario> list) {
    super(fm);
    this.listUsuarios = list;
}

@Override
public Fragment getItem(int position) {
    Usuario usuario = listUsuarios.get(position);
    return UsuarioDetalleFragment.newInstance(usuario);
}

@Override
public int getCount() {
    return listUsuarios.size();
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position)
{
    currentPosition = position;
}

@Override
public void onPageScrollStateChanged(int state) {

}

Map<Integer, View> imageViews = new HashMap<Integer, View>();
public Map<Integer, View> getImageViews() {
    return imageViews;
}

}

Y en la clase Fragment UsuarioDetalleFragment lleno los elementos y cargo la imagen

public class UsuarioDetalleFragment extends Fragment {
private static final String ARG_OBJECT = "UsuarioDetalle";


public UsuarioDetalleFragment() {
}
public static UsuarioDetalleFragment newInstance(Usuario u) {
    UsuarioDetalleFragment fragment = new UsuarioDetalleFragment();
    Bundle bundle  = new Bundle();

    bundle.putParcelable(ARG_OBJECT, u);

    fragment.setArguments(bundle);
    return fragment;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_usuario_detalle, container, false);
    TextView textView = (TextView) view.findViewById(R.id.label_usuario_detalle);


    Bundle bundle = this.getArguments();
    if (bundle != null) {
        Usuario usuario = bundle.getParcelable(ARG_OBJECT);
        textView.setText("Usuario NO: " + usuario.getIdUsuario().toString());


        ImageView imagenUsuarioDetalle = (ImageView) view.findViewById(R.id.imagen_usuario_detalle);
        if(!usuario.getImagen().isEmpty()){
            Glide.with(imagenUsuarioDetalle.getContext())
                    .load(usuario.getImagen())
                    .into(imagenUsuarioDetalle);
        }else{
            Glide.with(imagenUsuarioDetalle.getContext())
                    .load(R.drawable.default_user_grid)
                    .into(imagenUsuarioDetalle);
        }

    }

    return view;
}
}

Solo que me quede sin idea de como obtener la ImageView y la Position desde el Adapter que carga en el método instantiateItem(), ya que desde la clase Fragment, es donde genero la view y en el ejemplo del sitio de arriba carga estos desde el Adapter. O podria pasar todo lo de mi clsae Fragment a mi adapter??

Alguien sabe que necesito hacer? Gracias

7
  • Hola, bienvenido! Para que tu pregunta esté mucho mejor te recomiendo que expliques el funcionamiento que esperas (ya que no todos podemos ver el video) y que funcionamiento tienes actualmente y que no coincide con lo que deseas. Una buena pregunta basta con leer la pregunta y no recurrir a videos/webs/enlaces.. Un saludo!
    – lois6b
    Commented el 2 feb. 2017 a las 16:01
  • Enterado, gracias Commented el 2 feb. 2017 a las 16:16
  • Es una transición muy llamativa, la he visto en varias aplicaciones, sin embargo no tiene que ver con Glide, lo que tienes dentro de getView() es correcto, el Adapter sería el que realizaría la animación.
    – Jorgesys
    Commented el 2 feb. 2017 a las 16:36
  • 1
    Que buen efecto al cambiar la imagen, bastante interesante
    – Ashley G.
    Commented el 2 feb. 2017 a las 16:51
  • 1
    y porque mejor no te basas en el código del efecto del video? github.com/xgc1986/ParallaxPagerTransformer
    – Bourne
    Commented el 3 feb. 2017 a las 17:30

1 respuesta 1

0

Prueba aplicando el efecto directamente a la imagen en el xml.

<ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:fitsSystemWindows="true"
           android:src="@drawable/random_pattern"
           android:scaleType="fitXY"
           app:layout_collapseMode="parallax"
           app:layout_collapseParallaxMultiplier="0.75"/>

Espero haberte ayudado. Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.