视差效果实现

视差效果实现效果图

1.先上效果图    源码当前使用的ReycleView当然也有使用listview版本的

使用ReycleView版本     使用ListView版本  

首先是自定义的两个view代码如下：

ParallaxRecycleView

package com.cock.parallaxrecyclerview.view;


import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;

import com.cock.parallaxrecyclerview.holder.ParallaxViewHolder;


/**
 * Author : Created by Luhailiang on 2016/8/29 12:11.
 * Email : [email protected]
 */
public class ParallaxRecyclerView extends RecyclerView {

    private OnScrollListener scrollListener;

    public ParallaxRecyclerView(Context context) {
        super(context);
        init();
    }

    public ParallaxRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ParallaxRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        setOnScrollListener(defaultListener);
    }

    private OnScrollListener defaultListener = new OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);

            if (scrollListener != null)
                scrollListener.onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            for (int i = 0; i < recyclerView.getChildCount(); i++) {
                ((ParallaxViewHolder) recyclerView.getChildViewHolder(recyclerView.getChildAt(i))).animateImage();
            }

            if (scrollListener != null)
                scrollListener.onScrolled(recyclerView, dx, dy);
        }
    };

    @Override
    public void setOnScrollListener(OnScrollListener listener) {
        if (listener != defaultListener)
            this.scrollListener = listener;
        else
            super.setOnScrollListener(listener);
    }

}

ParallaxImageView

package com.cock.parallaxrecyclerview.view;


import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;

import com.cock.parallaxrecyclerview.holder.ParallaxViewHolder;


/**
 * Author : Created by Luhailiang on 2016/8/29 12:11.
 * Email : [email protected]
 */
public class ParallaxRecyclerView extends RecyclerView {

    private OnScrollListener scrollListener;

    public ParallaxRecyclerView(Context context) {
        super(context);
        init();
    }

    public ParallaxRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ParallaxRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        setOnScrollListener(defaultListener);
    }

    private OnScrollListener defaultListener = new OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);

            if (scrollListener != null)
                scrollListener.onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            for (int i = 0; i < recyclerView.getChildCount(); i++) {
                ((ParallaxViewHolder) recyclerView.getChildViewHolder(recyclerView.getChildAt(i))).animateImage();
            }

            if (scrollListener != null)
                scrollListener.onScrolled(recyclerView, dx, dy);
        }
    };

    @Override
    public void setOnScrollListener(OnScrollListener listener) {
        if (listener != defaultListener)
            this.scrollListener = listener;
        else
            super.setOnScrollListener(listener);
    }

}

然后创建Adapter和ViewHolder

package com.cock.parallaxrecyclerview.holder;

import android.support.v7.widget.RecyclerView;
import android.view.View;

import com.cock.parallaxrecyclerview.view.ParallaxImageView;

/**
 * Author : Created by Luhailiang on 2016/8/29 12:14.
 * Email : [email protected]
 */
public abstract class ParallaxViewHolder extends RecyclerView.ViewHolder
        implements ParallaxImageView.ParallaxImageListener {

    private ParallaxImageView backgroundImage;

    public abstract int getParallaxImageId();

    public ParallaxViewHolder(View itemView) {
        super(itemView);

        backgroundImage = (ParallaxImageView) itemView.findViewById(getParallaxImageId());
        backgroundImage.setListener(this);
    }

    @Override
    public int[] requireValuesForTranslate() {
        if (itemView.getParent() == null) {
            // Not added to parent yet!
            return null;
        } else {
            int[] itemPosition = new int[2];
            itemView.getLocationOnScreen(itemPosition);

            int[] recyclerPosition = new int[2];
            ((RecyclerView) itemView.getParent()).getLocationOnScreen(recyclerPosition);

            return new int[]{itemView.getMeasuredHeight(), itemPosition[1], ((RecyclerView) itemView.getParent()).getMeasuredHeight(), recyclerPosition[1]};
        }
    }

    public void animateImage() {
        getBackgroundImage().doTranslate();
    }

    public ParallaxImageView getBackgroundImage() {
        return backgroundImage;
    }
}

package com.cock.parallaxrecyclerview.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.cock.parallaxrecyclerview.R;
import com.cock.parallaxrecyclerview.holder.ParallaxViewHolder;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

/**
 * Author : Created by Luhailiang on 2016/8/29 12:22.
 * Email : [email protected]
 */
public class MyRecyclerAdapter extends RecyclerView.Adapter {

    private Context context;
    private LayoutInflater inflater;
    private int getItemLayoutId ;
    private ArrayList mData;


    public MyRecyclerAdapter(Context context, int getItemLayoutId, ArrayList mData) {
        this.context = context;
        this.inflater = LayoutInflater.from(context);
        this.getItemLayoutId = getItemLayoutId;
        this.mData = mData;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int position) {
        return new ViewHolder(inflater.inflate(getItemLayoutId, viewGroup, false));
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {
        Picasso.with(context).load(mData.get(position)).into(viewHolder.getBackgroundImage());
        viewHolder.getTextView().setText("测试数据第" + position);

        // Important to call this method
        viewHolder.getBackgroundImage().reuse();
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    /**
     * # CAUTION:
     * ViewHolder must extend from ParallaxViewHolder
     */
    public static class ViewHolder extends ParallaxViewHolder {

        private final TextView textView;

        public ViewHolder(View v) {
            super(v);

            textView = (TextView) v.findViewById(R.id.label);
        }

        @Override
        public int getParallaxImageId() {
            return R.id.backgroundImage;
        }

        public TextView getTextView() {
            return textView;
        }
    }
}

最后在MainActivity中调用

package com.cock.parallaxrecyclerview.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;

import com.cock.parallaxrecyclerview.R;
import com.cock.parallaxrecyclerview.adapter.MyRecyclerAdapter;
import com.cock.parallaxrecyclerview.view.ParallaxRecyclerView;

import java.util.ArrayList;
/**
 * Author : Created by Luhailiang on 2016/8/29 12:22.
 * Email : [email protected]
 */
public class MainActivity extends AppCompatActivity {

    private ArrayList list = new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        ParallaxRecyclerView recyclerView = (ParallaxRecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(new MyRecyclerAdapter(this, R.layout.item, list));
    }

    private void initData() {
        for (int i = 0; i < 20; i++) {
            list.add(R.mipmap.image1);
            list.add(R.mipmap.image2);
            list.add(R.mipmap.image3);
            list.add(R.mipmap.image4);
            list.add(R.mipmap.image5);
        }
    }
}