Receiving requirements requires the following effects

After receiving the request, I immediately thought of using viewpager to set Android :clipChildren=”false” in the view without limiting the display range of the view. After writing, I found that the left margin of the first picture and the right margin of the last picture could not be controlled, and the following blank area would appear

Found that the viewPager implementation is difficult to think of recyclerView to imitate viewPager to achieve the effect of the need to look up the relevant information found that you can use the attachToRecyclerView method in PagerSnapHelper to simulate the viewPager effect

The first set Recyclerview lateral sliding, and set up the adapter (I use BaseRecyclerViewAdapterHelper)

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

And then I’m going to add what I said above

PagerSnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);
Copy the code

Now you can emulate viewPager. Now that the two images are next to each other without a left and right margin, we start by setting the width of the images (the layout in the Adapter) and the margin between them. If you set the image margin in the direct layout, the left margin of the first image and the right margin of the last image will be inconsistent with the middle image margin, so you need to control the left margin of the first image except for the first image, all other images only set the right margin

@Override
    protected void convert(BaseViewHolder helper, final HuoDongBean item) {
        ImageView imageView = helper.getView(R.id.imageView);
        if (helper.getAdapterPosition() == 0) {// The first image
            // Set the package contents or fill the parent form size
            LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams(
                    ScreenUtils.getScreenWidth()-200, LinearLayout.LayoutParams.MATCH_PARENT);
            // Set margin
            lp1.setMargins(30.0.30.0);
            imageView.setLayoutParams(lp1);
        }else{
            // Set the package contents or fill the parent form size
            LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams(
                    ScreenUtils.getScreenWidth()-200, LinearLayout.LayoutParams.MATCH_PARENT);
            // Set margin
            lp1.setMargins(0.0.30.0);
            imageView.setLayoutParams(lp1);
        }
        Glide.with(context).load(item.src).into(imageView);
    }
Copy the code

For the first image, the left margin is 30 and the right margin is 15. For the rest of the images, the left margin is 0 and the right margin is 30

THE END

See the effect