前言

最近开发遇到一个非常怪异的设计图,他实际上是一个Banner,但是比较特殊

你可以看到第一个Item左边和返回按钮对齐,第二个偏移的比较厉害,当时我想到的就是一个Viewpager2加上下面的指示器就得了,然后给Viewpager2加上一个监听,当position对2取余等于1时就设置padding等于50dp,也就是说1,3,5,7....的position对左边都离得远一点,0,2,4,6....都对右边离得远一点,但是后面监听器得到回调设置padding的时候直接直接把展示的效果干劈叉了,后面又换了youth5201314的Banner,下面是代码

Code

Activity

public class BannerActivity extends AppCompatActivity {
    private Banner mBanner;
    private BannerAdapter bannerAdapter;

    @Override
    protected void onCreate(@Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner);

        List<String> list = new ArrayList<>();
        for (int i = 0; i < 2; i++) {
            list.add("adf");
        }
        bannerAdapter = new BannerAdapter(this, list);

        initView2();
    }

    private void setPadding(ViewPager2 viewPager2, int i) {
        //banner内部实际上用的还是Viewpager2只不过封装了一下,
        // Viewpager2呢adapter要求的是RecyclerView.Adapter,Viewpager的第一个View一定是RecyclerView,人家就是这么设计的,我也没啥好解释的
        RecyclerView childAt = (RecyclerView) viewPager2.getChildAt(0);
        //是否允许View在padding中绘制
        childAt.setClipToPadding(false);
        int i50 = ImageUtil.dp2px(this, 50);
        int i18 = ImageUtil.dp2px(this, 18);
        //根据参数判断
        if(i==0){
            childAt.setPadding(i18, 0, 0, 0);
        }else{
            childAt.setPadding(i50, 0, 0, 0);

        }
    }

    private void initView2() {
        mBanner = findViewById(R.id.banner);
        //第二个参数表示是否可以无限循环,比如总共两个数据,第二个再次往右划就会滑到第一个,这里根据需求就直接传false了
        mBanner.setAdapter(bannerAdapter,false);
        //不允许自动轮播
        mBanner.isAutoLoop(false);
        mBanner.addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //当pos为奇数时,将recyclerview的paddleft设置为50dp
                if (position % 2 == 1) {
                    RecyclerView recyclerView = (RecyclerView) mBanner.getViewPager2().getChildAt(0);
                    if (recyclerView != null) {
                        recyclerView.setPadding(ImageUtil.dp2px(BannerActivity.this, 50), mBanner.getPaddingTop(),
                                ImageUtil.dp2px(BannerActivity.this, 14), mBanner.getPaddingBottom());
                    }
                } else if (position % 2 == 0) {
                    //当pos为偶数时,将recyclerview的paddleft设置为50dp
                    RecyclerView recyclerView = (RecyclerView) mBanner.getViewPager2().getChildAt(0);
                    if (recyclerView != null) {
                        recyclerView.setPadding(ImageUtil.dp2px(BannerActivity.this, 16), mBanner.getPaddingTop(),
                                ImageUtil.dp2px(BannerActivity.this, 50), mBanner.getPaddingBottom());
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        //最后设置一个初始值
        setPadding(mBanner.getViewPager2(),0);
    }

}

从效果图可以看到第一个右边的控件,和第二个右边的空间是完全不一样的,好了实现完成,睡觉觉

奇形怪状的Banner

前言

Code