RecyclerView实现Item居中效果(仿猫眼美团电影选择效果)

一、实现的效果

1、滑动的时候让每一个Item保持在中间

2、点击某一个Item让其滚动到中间

3、实际实现的效果如下:点击一次自动滚动居中，再次点击跳转到详情页

 

二、实现的思路:

1、每一次的滑动都让图片保持在中间，其实RecyclerView24.2.0版本以后，Google已经提供一个SnapHelper的辅助类，可以实现每一次滚动结束保持居中。具体用法就是：

LinearSnapHelper类似SnapHelper的一个子类，SnapHelper的另一个子类叫PagerSnapHelper。两者的作用都是滑动结束的时候Item保持在中间的位置。而区别是：LinearSnapHelper可以一次滑动多个Item，而PagerSnapHelper限制你一次只能滑动一个Item。

2、有了SnapHelper工具类解决Item居中问题，但是还需要考虑到一个问题，如何让刚开始的第一张和最后一张也居中呢？我们肯定会想到给第一张要显示的图片设置一个margin，这样第一张和最后一场也能也能居中显示。我们第一反应是在Adapter里直接修改item的LayoutParams，其实官方提供了ItemDecoration，就是给RecyclerView的Item添加修饰。代码如下：

public class GalleryItemDecoration extends RecyclerView.ItemDecoration {
    /**
     * 自定义默认的Item的边距
      */
    private int mPageMargin = 10;
    /**
     * 第一张图片的左边距
     */
    private int mLeftPageVisibleWidth;
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

        //计算一下第一中图片距离屏幕左边的距离：(屏幕的宽度-item的宽度)/2。其中item的宽度=实际ImagView的宽度+margin。
        //我这里设置的ImageView的宽度为100+margin=110
        if (mLeftPageVisibleWidth ==0) {
           //计算一次就好了
            mLeftPageVisibleWidth = DensityUtil.px2dip(view.getContext(),getScreenWidth(view.getContext()) - DensityUtil.dip2px(110, view.getContext())) / 2;

        }

        //获取当前Item的position
        int position = parent.getChildAdapterPosition(view);
        //获得Item的数量
        int itemCount = parent.getAdapter().getItemCount();
        int leftMagin;
        if (position == 0){
           leftMagin= dpToPx(mLeftPageVisibleWidth);
        }else{
            leftMagin=dpToPx(mPageMargin);
        }
        int rightMagin;
        if (position == itemCount-1) {
            rightMagin=dpToPx(mLeftPageVisibleWidth);
        }else{
            rightMagin=dpToPx(mPageMargin);
        }
        RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) view.getLayoutParams();

        //10,10分别是item到上下的margin
        layoutParams.setMargins(leftMagin,10,rightMagin,10);
        view.setLayoutParams(layoutParams);

        super.getItemOffsets(outRect, view, parent, state);


    }

    /**
     * d p转换成px
     * @param dp：
     */
    private int dpToPx(int dp){
        return (int) (dp * Resources.getSystem().getDisplayMetrics().density + 0.5f);

    }

    /**
     * 获取屏幕的宽度
     * @param context:
     * @return :
     */
    public static int getScreenWidth(Context context) {
        WindowManager manager = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        Display display = manager.getDefaultDisplay();
        return display.getWidth();
    }

}

然后直接给RecyclerView设置ItemDecoration即可：

 mRv.addItemDecoration(new GalleryItemDecoration());

3、点击某一张图片让其滚动到中间,这个只需要自定义一个LinearLayoutManager即可:

/**
 * @author csc
 * @date 2018-11-15
 */
public class CenterLayoutManager extends LinearLayoutManager {


    public CenterLayoutManager(Context context) {
        super(context);
    }

    public CenterLayoutManager(Context context, int orientation, boolean reverseLayout) {
        super(context, orientation, reverseLayout);


    }

    public CenterLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

    }

    @Override
    public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
        RecyclerView.SmoothScroller smoothScroller = new CenterSmoothScroller(recyclerView.getContext());
        smoothScroller.setTargetPosition(position);
        startSmoothScroll(smoothScroller);


    }

    private static class CenterSmoothScroller extends LinearSmoothScroller {

        CenterSmoothScroller(Context context) {
            super(context);
        }

        @Override
        public int calculateDtToFit(int viewStart, int viewEnd, int boxStart, int boxEnd, int snapPreference) {
            return (boxStart + (boxEnd - boxStart) / 2) - (viewStart + (viewEnd - viewStart) / 2);
        }
    }
    
}

然后调用RecyclerView.smoothScrollToPosition(position)即可;

4、如何判断让Item居中还是跳转到详情页，其实和简单即使用一个int记录一下，如果int==position就跳转到详情页，如果不是就执行RecyclerView.smoothScrollToPosition(position)，让其居中。具体代码如下:

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRv;
    private LinearSnapHelper mLinearSnapHelper;
    private RvAdapter mRvAdapter;

    /**
     * 记录当前选中的位置,默认位置是0
     */
    private int nowPosition = 0;

    private List mPaths;

    private CenterLayoutManager mCenterLayoutManager;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRv = findViewById(R.id.rv);
        mPaths = new ArrayList<>();
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/15685504-0b21-4201-b345-750434acaed5.jpeg");
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/7805bea2-ef27-4b83-86ec-53a4311496ad.jpeg");
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/bca2f034-9ce3-4329-a102-a90cee7d166e.png");
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/f07fdcfb-5934-44e6-abbd-077040e36abb.png");
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/6f5c9878-a669-46c3-9984-895d09ea3e54.jpeg");
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/0562e166-5e53-4aa2-93c3-c1fbb052139b.png");
        mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/31293172-6f51-4f42-8f67-c6683b6dcf33.png");
        
        mLinearSnapHelper = new LinearSnapHelper();
        mLinearSnapHelper.attachToRecyclerView(mRv);
        
        mRv.addItemDecoration(new GalleryItemDecoration());

        mCenterLayoutManager = new CenterLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        mRv.setLayoutManager(mCenterLayoutManager);

        mRvAdapter = new RvAdapter(this,mPaths);
        mRv.setAdapter(mRvAdapter);

        //Item的点击回调监听
        mRvAdapter.setOnItemClickListener(new RvAdapter.OnItemClickListener() {
            @Override
            public void onIitemClick(int position) {

                if (nowPosition == position) {
                    Toast.makeText(MainActivity.this, "跳转到点击到的详情页", Toast.LENGTH_SHORT).show();
                } else {
                    //使点击到的条目滚动到中间
                    nowPosition=position;
                    mRv.smoothScrollToPosition(position);
                }
            }
        });

    }
}