【MyAndroid】viewpage+cardView卡片海报效果展示--100个经典UI设计模板(99/100)

官网效果挺好看的：



不过需求不需要指示器
笔者的实现效果如图：
PageStyle.NORMAL

PageStyle.MULTI_PAGE

PageStyle.MULTI_PAGE_OVERLAP

笔者集成到MyAndroid项目里了，做了一定的修改。后面可能还会修改参数。UI设计大佬给的效果难度比较大哦！
定制化可参考https://gitee.com/lc951/my-android

简单使用参考Github开源即可

记录一下使用过程中的难点

1. AS环境要求4.2以上，可是笔者是驻场内网开发，开发工具不能随便升级
2. java和kt脚本混搭，硬是看了半个小时才搞明白整体业务设计结构，建议搞不懂的看分支2_x的版本java比较多
3. java环境要求比较高一些，一些旧的老的项目在语法上不兼容

定制笔者的效果参考下面代码：

 BannerViewPager<CardOverlayModel, CardOverlayViewHolder> bannerViewPager = findViewById(R.id.banner_view);
        bannerViewPager.setOnPageClickListener(new BannerViewPager.OnPageClickListener() {
            @Override
            public void onPageClick(int position) {
                Toast.makeText(CardOverlayActivity.this, "position:" + position, Toast.LENGTH_SHORT)
                        .show();
            }
        })
                .setAutoPlay(false)
                .setPageStyle(PageStyle.MULTI_PAGE_SCALE)
                .setRevealWidth(BannerUtils.dp2px(30))
                .setHolderCreator(() -> new CardOverlayViewHolder(this))
                .create(list);
1
2
3
4
5
6
7
8
9
10
11
12
13

主要是setPageStyle(PageStyle.MULTI_PAGE_SCALE)和setRevealWidth(BannerUtils.dp2px(30))
布局如下：

    <com.zhpan.bannerview.BannerViewPager
            android:id="@+id/banner_view"
            android:layout_width="match_parent"
            android:layout_margin="10dp"
            android:layout_height="160dp" />
1
2
3
4
5

可能也许需要下面这段

public class CardOverlayViewHolder implements ViewHolder<CardOverlayModel> {

    private Context context;


    public CardOverlayViewHolder(Context context) {
        this.context=context;
    }

    @Override
    public int getLayoutId() {
        return R.layout.item_viewpager;
    }

    @Override
    public void onBind(View itemView, CardOverlayModel data, int position, int size) {
        ImageView imageView = itemView.findViewById(R.id.card_iv);

        if(!TextUtils.isEmpty(data.getCoverUrl())){
            Glide.with(context)
                    .load(data.getCoverUrl())
                    .error(R.mipmap.ic_img02)
                    .placeholder(R.mipmap.ic_img01)
                    .into(imageView);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

使用效果很好。集成难度有些。耐心点慢慢理解都能克服哈！

混淆

    -keep class androidx.recyclerview.widget.**{*;}
    -keep class androidx.viewpager2.widget.**{*;}
1
2

参考

https://github.com/zhpanvip/BannerViewPager/blob/master/README_CN.md