天天看点

应用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回调接口相关↑↑******************************/

}