RecyclerView点击，移动到中间位置

这篇博客介绍怎样给RecyclerView添加点击事件，点击某一条item，被点击的item能移动到中间位置。

例如我们点击靠右边的03-28那一个item，这个item会自动滑到中间位置，效果如下：

具体实现过程是怎么样的呢？(RecyclerView的使用前面的博客已介绍过，这里就不再赘述了。)

首先，我们在RecyclerView的adapter里，自定义一个接口OnItemClickListener，onBindViewHolder()方法中，给item添加点击事件。示例代码如下：

package com.li.recyclerviewdemo;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.TextView;

public class RvAdapter extends RecyclerView.Adapter<RvAdapter.ViewHolder> {

    private Context context;
    private List<TestBeans> datas;
    private RvAdapter.OnItemClickListener onItemClickListener;
    //用来标记点击的item位置，方便设置背景颜色
    private List<Integer> posList = new ArrayList<Integer>();

    public RvAdapter(Context context, List<TestBeans> datas) {
        super();
        this.context = context;
        this.datas = datas;
    }

    public void setOnItemClickListener(RvAdapter.OnItemClickListener listener){
        this.onItemClickListener = listener;
    }

    @Override
    public int getItemCount() {
        return datas == null ? 0 : datas.size();
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int pos) {
        TestBeans bean = datas.get(pos);
        holder.tvDate.setText(bean.getDateMd());
        holder.tvDay.setText(bean.getDateDay());
        holder.tvPrice.setText(bean.getPrice());

        //设置点击事件的回调
        holder.itemView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(onItemClickListener != null){
                    int position = holder.getPosition();
                    onItemClickListener.onItemClick(holder.itemView, position);
                    //标记点击的item位置
                    posList.clear();
                    posList.add(position); 
                }
            }
        });

        if(posList.contains(pos)){
            holder.itemView.setBackgroundColor(context.getResources().getColor(R.color.green));
        }else{
            holder.itemView.setBackgroundColor(context.getResources().getColor(R.color.grey));
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup arg0, int arg1) {
        View v = LayoutInflater.from(arg0.getContext()).inflate(
                R.layout.rv_adapter_item, arg0, false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        TextView tvDate;
        TextView tvDay;
        TextView tvPrice;

        public ViewHolder(View itemView) {
            super(itemView);
            tvDate = (TextView) itemView.findViewById(R.id.tvDate);
            tvDay = (TextView) itemView.findViewById(R.id.tvDay);
            tvPrice = (TextView) itemView.findViewById(R.id.tvPrice);
        }
    }

    /**
     * 自定义的点击事件接口
     * @author lish
     */
    public interface OnItemClickListener{
        void onItemClick(View view, int position);
//      void onItemLongClick(View view, int position); //长按
    }
}

MainActivity.java 中，adapter添加点击事件，然后被点击的item移动到中间位置。

adapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this, "-->" + position, Toast.LENGTH_SHORT).show();
                moveToMiddle(view);
                adapter.notifyDataSetChanged();
            }
        });

View移动的方法：

    /**
     * 滚动到中间位置
     * @param clkView  被点击的View
     */
    public void moveToMiddle(View clkView){
        int itemWidth = clkView.getWidth();
        int screenWidth = getResources().getDisplayMetrics().widthPixels;
        int scrollWidth = clkView.getLeft() - (screenWidth / 2 - itemWidth / 2);
        rvView.scrollBy(scrollWidth, 0);
    }

移动到中间位置基本原理：先计算出屏幕宽度screenWidth，被点击View的宽度itemWidth，被点击View距离左边的距离为clkView.getLeft()，需要移动的宽度是 clkView.getLeft() - (screenWidth / 2 - itemWidth / 2);

这些距离计算，在纸上画一下就比较清晰了，我画了一下，有点难看，但是能说明问题，不清楚的多想想。

完整示例代码如下：

package com.li.recyclerviewdemo;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Locale;

import com.li.recyclerviewdemo.RvAdapter.OnItemClickListener;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity {

    private RecyclerView rvView;
    private LinearLayoutManager layoutManager;
    private RvAdapter adapter;
    private List<TestBeans> beanList = new ArrayList<TestBeans>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getDatas();
        initView();
    }

    private void initView() {
        rvView = (RecyclerView) findViewById(R.id.rvView);
        layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        rvView.setLayoutManager(layoutManager);

        adapter = new RvAdapter(this, beanList);
        rvView.setAdapter(adapter);

        adapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this, "-->" + position, Toast.LENGTH_SHORT).show();
                moveToMiddle(view);
                adapter.notifyDataSetChanged();
            }
        });
    }

    /**
     * 滚动到中间位置
     * @param clkView  被点击的View
     */
    public void moveToMiddle(View clkView){
        int itemWidth = clkView.getWidth();
        int screenWidth = getResources().getDisplayMetrics().widthPixels;
        int scrollWidth = clkView.getLeft() - (screenWidth / 2 - itemWidth / 2);
        rvView.scrollBy(scrollWidth, 0);
    }

    private void getDatas() {
        Calendar cal = Calendar.getInstance(Locale.CHINA);
        SimpleDateFormat sdfMd = new SimpleDateFormat("MM-dd");

        String[] dayNames = getResources().getStringArray(R.array.week_day);

        for (int i = 0; i < 15; i++) {
            cal.add(Calendar.DAY_OF_MONTH, 1);
            Date date = cal.getTime();
            String dateMd = sdfMd.format(date);

            int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK) - 1;
            if (dayOfWeek < 0) {
                dayOfWeek = 0;
            }
            String day = dayNames[dayOfWeek];

            TestBeans bean = new TestBeans();
            bean.setDateMd(dateMd);
            bean.setDateDay(day);
            bean.setPrice("￥" + (i+1) * 100); 

            beanList.add(bean);
        }
    }

}