Recycleview横向滑动,当前显示的item居中且高亮显示

  公司项目最近的一个要求是,显示一系列数据,横向滑动排列,滑到居中位置,就高亮显示,两边半透明。图如下(如红圈所示。整个图画是整个设计,采用的是自定义的recycleview嵌套里面多个recycleview组成的,如果有小伙伴感兴趣的,欢迎私信。当然,后续有时间,我也会继续添加到这里的。):

横向列表很简单实现,就是使用

RecyclerView的layoutmanager的横向设置。
1.每次的item滑动停止时都显示到中间位置,可以使用官方提供的
LinearSnapHelper类,这个网上有很多详细的介绍,在此就不过多解释,主要是讲实现的方式。

调用下面的方法,即可实现滑动停止的item会自动滚到屏幕中间。

LinearSnapHelper mLinearySnapHelper = new LinearSnapHelper();//让recycleview的item居中的方法
mLinearySnapHelper.attachToRecyclerView(hor_recyclerview);//将该类绑定到相应的recycleview上

2.调用1后,我们会发现,所有的item都能自动滚动停止到屏幕中间。这时我们还需要第一个item和最后一个item也在屏幕中间,这时就要手动计算item中间距离屏幕边的位置。

这时我们可以使用recycleview的

addItemDecoration方法,自定义一个itemdecoration类实现item间距的调整。

自定义类如下:

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

        //计算一下第一个item距离屏幕左边的距离:(屏幕的宽度-item的宽度)/2。其中item的宽度=实际ImagView的宽度+margin。
//        if (mLeftPageVisibleWidth ==0) {
            //如果每个item都是相等的宽度,计算一次就好了,否则,是需要每次都计算的
             LinearLayout linearlayout = (LinearLayout)view.findViewById(R.id.item_lin);
            //measure方法的参数值都设为0即可
            linearlayout.measure(0,0);
            //获取组件宽度
            int width = linearlayout.getMeasuredWidth()+dpToPx(30);
            //获取实际居左距离
            int swidth = (getScreenWidth(view.getContext())) / 2 -(width) /2;
//            mLeftPageVisibleWidth = CommonUtil.convertPixelsToDp(view.getContext(),swidth);
            mLeftPageVisibleWidth = swidth;//px

//        }

        //获取当前Item的position
        int position = parent.getChildAdapterPosition(view);
        //获得Item的数量
        int itemCount = parent.getAdapter().getItemCount();
        int leftMagin = 0;
        int rightMagin = 0;
        if(position == 0){
            if(mLeftPageVisibleWidth < dpToPx(mPageMargin)){
                leftMagin = mLeftPageVisibleWidth;
                rightMagin = mLeftPageVisibleWidth;
            }else{
                leftMagin = mLeftPageVisibleWidth;
                rightMagin = dpToPx(mPageMargin);
            }
        }else if(position == itemCount-1){
            if(mLeftPageVisibleWidth < dpToPx(mPageMargin)){
                rightMagin = mLeftPageVisibleWidth;
                leftMagin = mLeftPageVisibleWidth;
            }else{
                rightMagin = mLeftPageVisibleWidth;
                leftMagin = dpToPx(mPageMargin);
            }
        }else{
            leftMagin = dpToPx(mPageMargin);
            rightMagin = dpToPx(mPageMargin);
        }
//        if (position == 0){
//            leftMagin= mLeftPageVisibleWidth;
//        }else{
//            leftMagin=dpToPx(mPageMargin);
//        }
//
//        if (position == itemCount-1) {
//            rightMagin=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();
        int screenWidth = display.getWidth();
        return screenWidth;
    }

自定义好该类后,直接用recycleview去使用,如下:

hor_recyclerview.addItemDecoration(new CustomItemDecoration());

到目前为止,就已经实现了要求的效果。

其中如果有什么问题,欢迎小伙伴积极解答。谢谢。

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要将RecyclerView的item居中显示,你可以使用LayoutManager来实现。以下是一种常见的方法: 1. 首先,在你的RecyclerView的布局文件中,确保为RecyclerView设置了固定的宽度和高度,以便居中显示。 2. 在你的代码中,为RecyclerView设置布局管理器LayoutManager。可以使用LinearLayoutManager或GridLayoutManager。 - LinearLayoutManager示例: ```java LinearLayoutManager layoutManager = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false); recyclerView.setLayoutManager(layoutManager); ``` - GridLayoutManager示例: ```java GridLayoutManager layoutManager = new GridLayoutManager(context, spanCount); layoutManager.setOrientation(RecyclerView.HORIZONTAL); // 如果是水平方向 recyclerView.setLayoutManager(layoutManager); ``` 3. 确保RecyclerView的item布局中的根布局设置了合适的宽度和高度,以便居中显示。 - 如果使用LinearLayoutManager,可以在item布局的根布局上添加以下属性: ```xml android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" ``` - 如果使用GridLayoutManager,可以在item布局的根布局上添加以下属性: ```xml android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" ``` 这样设置后,RecyclerView的item就会居中显示了。你可以根据实际需求选择适合的布局管理器和设置适当的宽高属性来实现居中显示效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值