Recyclerview实现ViewPager效果

5,459 阅读2分钟

接到需求需要实现以下效果

接到需求后第一时间想到直接使用viewpager在view中设置android:clipChildren="false"不限制view显示范围,写完之后发现第一张图的左边距和最后一张图的和右边距没办法控制会出现以下空白区域

发现viewpager实现困难后想到recyclerview来模仿viewpager实现需求效果 查阅相关资料发现可以使用PagerSnapHelper中的attachToRecyclerView方法来模拟viewpager效果

首先设置Recyclerview横向滑动,并设置adapter(本人使用的是BaseRecyclerViewAdapterHelper)

recyclerView.setLayoutManager(new LinearLayoutManager(getActivity(), RecyclerView.HORIZONTAL, false));
RecyclerViewpagerAdapter recyclerViewpagerAdapter = new RecyclerViewpagerAdapter(getActivity(), R.layout.item_image);
recyclerView.setAdapter(recyclerViewpagerAdapter);
recyclerViewpagerAdapter.setNewData(list);

然后加入上面说到的

PagerSnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);

现在做到了模仿viewpager。 现在两张图片紧挨在一起没有一个左右边距,我们开始在adapter中设置图片(adapter中的布局)的宽度和之间的边距。 如果直接布局中设置图片边距第一张图片的左边距和最后一张图片右边距会和中间图片边距不一致,所以需要控制一下第一张图片的距左边距除第一张图片外其余图片全部只设置右边距

@Override
    protected void convert(BaseViewHolder helper, final HuoDongBean item) {
        ImageView imageView = helper.getView(R.id.imageView);
        if (helper.getAdapterPosition() == 0){//第一张图片
            // 设置包裹内容或者填充父窗体大小
            LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams(
                    ScreenUtils.getScreenWidth()-200, LinearLayout.LayoutParams.MATCH_PARENT);
            //设置margin值
            lp1.setMargins(30, 0, 30, 0);
            imageView.setLayoutParams(lp1);
        }else{
            // 设置包裹内容或者填充父窗体大小
            LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams(
                    ScreenUtils.getScreenWidth()-200, LinearLayout.LayoutParams.MATCH_PARENT);
            //设置margin值
            lp1.setMargins(0, 0, 30, 0);
            imageView.setLayoutParams(lp1);
        }
        Glide.with(context).load(item.src).into(imageView);
    }

判断第一张图左边距为30 右边距为15,其余图片左边距为0右边距30 实现了边距保持一致的效果 还有动态设置了一下控件的宽度我偷懒直接取到屏幕宽度(px)减了200 不建议

THE END

看效果