Parallax effect in ViewPager using Glide

6

I'm using glide to load the images and apply the ViewPager to visualize them horizontally.

I would like to add to these images the Parallax effect (that the image moves slower to the viewPager). For this reason, when having a horizontal list of images with the ViewPager, when sliding to the left or right, the image has a movement effect at a speed different from the ViewPager

An example is this video

For the parallax effect, I am relying on the code of this site

In my activity UserDetail I use the parallaxImages () method in 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);
    }
}

In my Adapter UserDetailPagerAdapter I return a Fragment UserDetailFragment which contains the data and loads the image with glide

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;
}

}

And in the Fragment class UserDetailFragment filled the elements and loaded the image

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;
}
}

I just have no idea how to get the ImageView and the Position from the Adapter that loads in the instantiateItem () method, since from the Fragment class, it is where I generate the view and in the example of the above site loads these from the Adapter. Or could I pass everything from my Fragment clsae to my adapter ??

Does anyone know what I need to do? Thanks

    
asked by Eduardo Mtz 02.02.2017 в 16:57
source

0 answers