应用RecyclerView实现Gallery相册效果——注意引入recyclerview-v7的版本

整理总结自鸿洋的博客：http://blog.csdn.net/lmj623565791/article/details/38173061/

一、初次使用RecyclerView实现”适配器“的功能

1、MainActivity.java

public class MainActivity extends Activity {    private RecyclerView mRecyclerView;    private GalleryAdapter mAdapter;    private List<Integer> mDatas;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        //获得数据        initDatas();        //得到控件        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview_horizontal);        //设置布局管理器        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);        mRecyclerView.setLayoutManager(linearLayoutManager);        //设置适配器        mAdapter = new GalleryAdapter(this, mDatas);        mRecyclerView.setAdapter(mAdapter);    }    private void initDatas() {        mDatas = new ArrayList<Integer>(Arrays.asList(R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g, R.mipmap.h, R.mipmap.l));    }}

2、activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v7.widget.RecyclerView        android:id="@+id/id_recyclerview_horizontal"        android:layout_width="match_parent"        android:layout_height="120dp"        android:layout_centerVertical="true"        android:background="#FF0000"        android:scrollbars="none" /></RelativeLayout>

3、activity_index_gallery_item.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="120dp"    android:layout_height="120dp"    android:background="@drawable/item_bg02">    <ImageView        android:id="@+id/id_index_gallery_item_image"        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_margin="5dp"        android:scaleType="centerCrop" />    <TextView        android:id="@+id/id_index_gallery_item_text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/id_index_gallery_item_image"        android:layout_centerHorizontal="true"        android:layout_marginBottom="5dp"        android:layout_marginTop="5dp"        android:text="some info"        android:textColor="#ff0000"        android:textSize="12dp" /></RelativeLayout>

4、GalleryAdapter.java

/** * Created by jiatao on 2016/06/14 18:26 * Description: 应用RecyclerView的适配器 */public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.ViewHolder> {    private LayoutInflater mInflater;    private List<Integer> mDatas;    public GalleryAdapter(Context context, List<Integer> datats) {        mInflater = LayoutInflater.from(context);        mDatas = datats;    }    /**     * 创建内部静态类，必须继承RecyclerView.ViewHolder。承上启下。     * 上：RecyclerView.Adapter<GalleryAdapter.ViewHolder>     * 下：ViewHolder viewHolder = new ViewHolder(view);     * 详细说明：     *      我们创建的ViewHolder必须继承RecyclerView.ViewHolder，这个RecyclerView.ViewHolder在构造时必须传入一个View，     *      这个View相当于我们ListView getView中的convertView （即：把我们需要inflate的item布局传入）     */    public static class ViewHolder extends RecyclerView.ViewHolder {        ImageView mImg;        TextView mTxt;        public ViewHolder(View view) {            super(view);        }    }    /**     * 获取总条目数，同BaseAdapter     */    @Override    public int getItemCount() {        return mDatas.size();    }    /**     * 创建ViewHolder     */    @Override    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {        View view = mInflater.inflate(R.layout.activity_index_gallery_item, viewGroup, false);        ViewHolder viewHolder = new ViewHolder(view);        viewHolder.mImg = (ImageView) view.findViewById(R.id.id_index_gallery_item_image);        return viewHolder;    }    /**     * 将数据绑定到ViewHolder     */    @Override    public void onBindViewHolder(final ViewHolder viewHolder, final int i) {        viewHolder.mImg.setImageResource(mDatas.get(i));    }}

二、为RecyclerView添加OnItemClickListener回调

1、MainActivity.java

public class MainActivity extends Activity {    private RecyclerView mRecyclerView;    private GalleryAdapter mAdapter;    private List<Integer> mDatas;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initDatas();//获得数据        initView(); //初始化视图    }    private void initDatas() {        mDatas = new ArrayList<Integer>(Arrays.asList(R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g, R.mipmap.h, R.mipmap.l));    }    private void initView() {        //得到控件        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview_horizontal);        //设置布局管理器        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);        mRecyclerView.setLayoutManager(linearLayoutManager);        //设置适配器        mAdapter = new GalleryAdapter(this, mDatas);        //添加点击监听        mAdapter.setmOnItemClickListener(new GalleryAdapter.OnItemClickListener() {            @Override            public void itemClick(View view, int position) {                Toast.makeText(MainActivity.this, position+"", Toast.LENGTH_SHORT).show();            }        });        mRecyclerView.setAdapter(mAdapter);    }}

2、activity_main.xml

同上

3、activity_index_gallery_item.xml

同上

4、GalleryAdapter.java

/** * Created by jiatao on 2016/06/15 7:26 * Description: 应用RecyclerView的适配器 *  添加OnItemClickListener回调接口，实现对条目的点击事件 */public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.ViewHolder> {    /**********************添加OnItemClickListener回调接口↓↓******************************/    public interface OnItemClickListener{        void itemClick(View view, int position);    }    private OnItemClickListener mOnItemClickListener;    public void setmOnItemClickListener(OnItemClickListener listener){        this.mOnItemClickListener = listener;    }    /**********************添加OnItemClickListener回调接口↑↑******************************/    private LayoutInflater mInflater;    private List<Integer> mDatas;    public GalleryAdapter(Context context, List<Integer> datats) {        mInflater = LayoutInflater.from(context);        mDatas = datats;    }    /**     * 创建内部静态类，必须继承RecyclerView.ViewHolder。承上启下。     * 上：RecyclerView.Adapter<GalleryAdapter.ViewHolder>     * 下：ViewHolder viewHolder = new ViewHolder(view);     * 详细说明：     *      我们创建的ViewHolder必须继承RecyclerView.ViewHolder，这个RecyclerView.ViewHolder在构造时必须传入一个View，     *      这个View相当于我们ListView getView中的convertView （即：把我们需要inflate的item布局传入）     */    public static class ViewHolder extends RecyclerView.ViewHolder {        ImageView mImg;        TextView mTxt;        public ViewHolder(View view) {            super(view);        }    }    /**     * 获取总条目数，同BaseAdapter     */    @Override    public int getItemCount() {        return mDatas.size();    }    /**     * 创建ViewHolder     */    @Override    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {        View view = mInflater.inflate(R.layout.activity_index_gallery_item, viewGroup, false);        ViewHolder viewHolder = new ViewHolder(view);        viewHolder.mImg = (ImageView) view.findViewById(R.id.id_index_gallery_item_image);        return viewHolder;    }    /**     * 将数据绑定到ViewHolder     */    @Override    public void onBindViewHolder(final ViewHolder viewHolder, final int position) {        viewHolder.mImg.setImageResource(mDatas.get(position));        //如果设置了点击事件的回调        if(mOnItemClickListener != null){            viewHolder.itemView.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    mOnItemClickListener.itemClick(viewHolder.itemView, position);                }            });        }    }}

三、自定义RecyclerView实现滚动时内容联动

1、MainActivity.java

public class MainActivity extends Activity {    private GalleryAdapter mAdapter;    private ImageView id_content;    private CustomRecyclerView mCustomRecyclerView;    private List<Integer> mDatas;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initDatas();//获得数据        initView();//初始化视图    }    private void initDatas() {        mDatas = new ArrayList<Integer>(Arrays.asList(R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g, R.mipmap.h, R.mipmap.l));    }    private void initView() {        //得到控件        id_content = (ImageView) findViewById(R.id.id_content);        mCustomRecyclerView = (CustomRecyclerView) findViewById(R.id.id_recyclerview_horizontal);        //设置布局管理器        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);        mCustomRecyclerView.setLayoutManager(linearLayoutManager);        //设置适配器        mAdapter = new GalleryAdapter(this, mDatas);        //添加点击监听        mAdapter.setOnItemClickListener(new GalleryAdapter.OnItemClickListener() {            @Override            public void itemClick(View v, int position) {                Toast.makeText(MainActivity.this, position+"", Toast.LENGTH_SHORT).show();            }        });        mCustomRecyclerView.setAdapter(mAdapter);        //添加滑动监听        mCustomRecyclerView.setOnItemScrollChangeListener(new CustomRecyclerView.OnItemScrollChangeListener() {            @Override            public void onChange(View view, int position) {                 id_content.setImageResource(mDatas.get(position));            }        });    }}

2、activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <FrameLayout        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1">        <ImageView            android:id="@+id/id_content"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_gravity="center"            android:layout_margin="10dp"            android:scaleType="centerCrop" />    </FrameLayout>    <com.cctvjiatao.recyclerviewgallery.view.CustomRecyclerView        android:id="@+id/id_recyclerview_horizontal"        android:layout_width="match_parent"        android:layout_height="120dp"        android:layout_gravity="bottom"        android:background="#FF0000"        android:scrollbars="none" /></LinearLayout>

3、activity_index_gallery_item.xml

同上

4、GalleryAdapter.java

同上

5、CustomRecyclerView.java

/** * Created by jiatao on 2016/06/15 09:55 * Description: 自定义RecyclerView */public class CustomRecyclerView extends RecyclerView {    private View mCurrentView;    public CustomRecyclerView(Context context, AttributeSet attrs) {        super(context, attrs);    }    /**********************添加OnItemScrollChangeListener回调接口相关↓↓******************************/    //定义一个滚动时回调的接口，然后在onTouchEvent中，监听ACTION_MOVE，用户手指滑动时，不断地把当前第一个View回调回去    public interface OnItemScrollChangeListener {        void onChange(View view, int position);    }    private OnItemScrollChangeListener mItemScrollChangeListener;    public void setOnItemScrollChangeListener(OnItemScrollChangeListener listener) {        this.mItemScrollChangeListener = listener;    }    /**********************添加OnItemScrollChangeListener回调接口相关↑↑******************************/    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        mCurrentView = getChildAt(0);        if (mItemScrollChangeListener != null) {            mItemScrollChangeListener.onChange(mCurrentView, getChildLayoutPosition(mCurrentView));//Android 6.0中View.getChildPosition()过时，更新为View.getChildLayoutPosition        }    }    @Override    public boolean onTouchEvent(MotionEvent e) {        if (e.getAction() == MotionEvent.ACTION_MOVE) {            mCurrentView = getChildAt(0);            // Log.e("TAG", getChildLayoutPosition(getChildAt(0)) + "");            if (mItemScrollChangeListener != null) {                mItemScrollChangeListener.onChange(mCurrentView, getChildLayoutPosition(mCurrentView));//Android 6.0中View.getChildPosition()过时，更新为View.getChildLayoutPosition            }        }        return super.onTouchEvent(e);    }}

四、优化与打造真正的Gallery效果效果—— 所用jar包是 recyclerview-v7:23.3.0

1、MainActivity.java

public class MainActivity extends Activity {    private GalleryAdapter mAdapter;    private ImageView id_content;    private CustomRecyclerView mCustomRecyclerView;    private List<Integer> mDatas;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initDatas();//获得数据        initView();//初始化视图    }    private void initDatas() {        mDatas = new ArrayList<Integer>(Arrays.asList(R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g, R.mipmap.h, R.mipmap.l));    }    private void initView() {        //得到控件        id_content = (ImageView) findViewById(R.id.id_content);        mCustomRecyclerView = (CustomRecyclerView) findViewById(R.id.id_recyclerview_horizontal);        //设置布局管理器        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);        mCustomRecyclerView.setLayoutManager(linearLayoutManager);        //设置适配器        mAdapter = new GalleryAdapter(this, mDatas);        //添加点击监听        mAdapter.setOnItemClickListener(new GalleryAdapter.OnItemClickListener() {            @Override            public void itemClick(View v, int position) {//                Toast.makeText(MainActivity.this, position+"", Toast.LENGTH_SHORT).show();                id_content.setImageResource(mDatas.get(position));            }        });        mCustomRecyclerView.setAdapter(mAdapter);        //添加滑动监听        mCustomRecyclerView.setOnItemScrollChangeListener(new CustomRecyclerView.OnItemScrollChangeListener() {            @Override            public void onChange(View view, int position) {                 id_content.setImageResource(mDatas.get(position));            }        });    }}

2、activity_main.xml

同上

3、activity_index_gallery_item.xml

同上

4、GalleryAdapter.java

同上

5、CustomRecyclerView.java

/** * Created by jiatao on 2016/06/15 09:55 * Description: 自定义RecyclerView，使用 recyclerview-v7-21.0.3 即以上的版本 *  放弃重写onTouchEvent方法，而是让这个类实现RecyclerView.OnScrollListener接口，然后设置监听，在onScrolled里面进行判断。 *  至于优化：使用了一个成员变化存储当前第一个View，只有第一个View发生变化时才回调 */public class CustomRecyclerView extends RecyclerView {    /**********************添加OnItemScrollChangeListener回调接口相关↓↓******************************/    public interface OnItemScrollChangeListener {        void onChange(View view, int position);    }    private OnItemScrollChangeListener mItemScrollChangeListener;    public void setOnItemScrollChangeListener(OnItemScrollChangeListener listener) {        this.mItemScrollChangeListener = listener;    }    /**********************添加OnItemScrollChangeListener回调接口相关↑↑******************************/    private View mCurrentView;    public CustomRecyclerView(Context context, AttributeSet attrs) {        super(context, attrs);        this.addOnScrollListener(new MyScrollListener());//从 recyclerview-v7-21.0.3 开始 setOnScrollListener()过时，更新为 addOnScrollListener()    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        mCurrentView = getChildAt(0);        if (mItemScrollChangeListener != null) {            mItemScrollChangeListener.onChange(mCurrentView, getChildLayoutPosition(mCurrentView));//从 recyclerview-v7-21.0.3 开始 getChildPosition()过时，更新为 getChildLayoutPosition        }    }    /**********************添加RecyclerView.OnScrollListener监听相关↓↓******************************/    // 从 recyclerview-v7-21.0.3 开始，RecyclerView.OnScrollListener 已不是接口，而是抽象类了，所以要用如下写法了    //  recyclerview-v7-21.0.3 之前的版本可以使用 public class CustomRecyclerView extends RecyclerView implements RecyclerView.OnScrollListener{……}的写法    private class MyScrollListener extends RecyclerView.OnScrollListener  {        public MyScrollListener() {            super();        }        @Override        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {            super.onScrollStateChanged(recyclerView, newState);        }        @Override        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {            super.onScrolled(recyclerView, dx, dy);            View newView = getChildAt(0);            if(mItemScrollChangeListener != null){                if(newView != null && newView != mCurrentView){                    mCurrentView = newView;                    mItemScrollChangeListener.onChange(mCurrentView, getChildLayoutPosition(mCurrentView));                }            }        }    }    /**********************添加RecyclerView.OnScrollListener回调接口相关↑↑******************************/}

五、优化与打造真正的Gallery效果效果—— 所用jar包是 recyclerview-v7:21.0.3

1、MainActivity.java

同上

2、activity_main.xml

同上

3、activity_index_gallery_item.xml

同上

4、GalleryAdapter.java

同上

5、CustomRecyclerView.java

/** * Created by jiatao on 2016/06/15 09:55 * Description: 自定义RecyclerView，使用 recyclerview-v7-21.0.3 及以下的版本 *  放弃重写onTouchEvent方法，而是让这个类实现RecyclerView.OnScrollListener接口，然后设置监听，在onScrolled里面进行判断。 *  至于优化：使用了一个成员变化存储当前第一个View，只有第一个View发生变化时才回调 */public class CustomRecyclerView extends RecyclerView implements RecyclerView.OnScrollListener {    /**********************添加OnItemScrollChangeListener回调接口相关↓↓******************************/    public interface OnItemScrollChangeListener {        void onChange(View view, int position);    }    private OnItemScrollChangeListener mItemScrollChangeListener;    public void setOnItemScrollChangeListener(OnItemScrollChangeListener listener) {        this.mItemScrollChangeListener = listener;    }    /**********************添加OnItemScrollChangeListener回调接口相关↑↑******************************/    private View mCurrentView;    public CustomRecyclerView(Context context, AttributeSet attrs) {        super(context, attrs);        this.setOnScrollListener(this);//从 recyclerview-v7-21.0.3 开始 setOnScrollListener()过时，更新为 addOnScrollListener()    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        mCurrentView = getChildAt(0);        if (mItemScrollChangeListener != null) {            mItemScrollChangeListener.onChange(mCurrentView, getChildPosition(mCurrentView));//从 recyclerview-v7-21.0.3 开始 getChildPosition()过时，更新为 getChildLayoutPosition        }    }    /**********************添加RecyclerView.OnScrollListener监听相关↓↓******************************/    //  recyclerview-v7-21.0.3 之前的版本可以使用这种 implements RecyclerView.OnScrollListener 的写法    // 从 recyclerview-v7-21.0.3 开始，RecyclerView.OnScrollListener 已不是接口，而是抽象类了，就不能用以下写法，    @Override    public void onScrollStateChanged(int newState) {    }    @Override    public void onScrolled(int dx, int dy) {        View newView = getChildAt(0);        if(mItemScrollChangeListener != null){            if(newView != null && newView != mCurrentView){                mCurrentView = newView;                mItemScrollChangeListener.onChange(mCurrentView, getChildPosition(mCurrentView));            }        }    }    /**********************添加RecyclerView.OnScrollListener回调接口相关↑↑******************************/}