Android轮播图的画廊效果

目录

效果图

介绍

使用

导入依赖

自定义属性

xml文件

活动代码（本文仿写百词斩，写在了碎片里）

---

本文使用的是仿写魅族Banner的第三方库（链接在文章末尾）

效果图

画廊效果

介绍

        在Android中，轮播图的画廊效果通常是指一种类似于画廊（Gallery）或者类似于卡片堆叠的视觉效果，使得轮播图在切换时更具有层次感和独特的动画效果。这种效果能够吸引用户的注意力，提升用户体验。以下是一些常见的画廊效果的介绍：

1. 画廊效果特点：

• 层叠效果： 轮播图的多张图片以层叠的方式呈现，一般只显示当前焦点图片的中心部分，使得前后图片部分可见。
• 位移动画： 图片切换时通过位移动画，使得前后图片以不同的层次感切入或切出。
• 居中焦点： 当前焦点图片通常会被放大或者突出显示，以吸引用户的注意。

2. 常见画廊效果：

• 层叠画廊： 前后图片以层叠的方式呈现，当前焦点图片位于中心，前后图片以透明度变化或者其他动画效果切入或切出。
• 卡片堆叠画廊： 图片以卡片堆叠的方式呈现，当前焦点图片在最上面，前后图片以堆叠的形式出现在下方。

3. 属性和效果定制：

• 层叠数量： 可以调整层叠的图片数量，以及每张图片的层叠偏移量。
• 切换动画： 可以定制切换时的动画效果，如位移、缩放、透明度等。
• 居中缩放： 当前焦点图片通常会有一个缩放效果，以突出显示。

使用

导入依赖

implementation 'com.github.pinguo-zhouwei:MZBannerView:v2.0.2'

自定义属性

属性名	属性意义	取值
open_mz_mode	是否开启魅族模式	true 为魅族Banner效果，false 则普通Banner效果
canLoop	是否轮播	true 轮播，false 则为普通ViewPager
indicatorPaddingLeft	设置指示器距离左侧的距离	单位为 dp 的值
indicatorPaddingRight	设置指示器距离右侧的距离	单位为 dp 的值
indicatorAlign	设置指示器的位置	有三个取值：left 左边，center 剧中显示，right 右侧显示
middle_page_cover	设置中间Page是否覆盖（真正的魅族Banner效果）	true 覆盖，false 无覆盖效果

xml文件

<com.zhouwei.mzbanner.MZBannerView
                    android:layout_width="320dp"
                    android:layout_height="320dp"
                    android:layout_gravity="center"
                    app:open_mz_mode="true"
                    app:canLoop="true"
                    app:indicatorAlign="center"
                    app:indicatorPaddingLeft="10dp"
                    android:id="@+id/Gallery" />

活动代码（本文仿写百词斩，写在了碎片里）

public class Fragment_Store extends Fragment {
    private MZBannerView galleryRecycle;

    private List<Integer> galleries = Arrays.asList(new Integer[]{R.drawable.gallery1,R.drawable.gallery2,R.drawable.gallery3,R.drawable.gallery4,
        R.drawable.gallery5,R.drawable.gallery6});

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_store,container,false);

        galleryRecycle = (MZBannerView) view.findViewById(R.id.Gallery);
        
        galleryRecycle.setPages(galleries, new MZHolderCreator<BannerViewHolder>() {
            @Override
            public BannerViewHolder createViewHolder() {
                return new BannerViewHolder();
            }
        });
        
        return view;
    }
    
    public class BannerViewHolder implements MZViewHolder<Integer>{
        ImageView imageView;
        @Override
        public View createView(Context context) {
            View view = LayoutInflater.from(context).inflate(R.layout.gallery_item,null);
            imageView = (ImageView) view.findViewById(R.id.gallery_image);
            return view;
        }
        @Override
        public void onBind(Context context, int position, Integer data) {
            imageView.setImageResource(data);
        }
    }

    @Override
    public void onPause() {
        super.onPause();
        galleryRecycle.pause();
    }

    @Override
    public void onResume() {
        super.onResume();
        galleryRecycle.start();
    }
}

 

第三方库GitHub地址：GitHub - pinguo-zhouwei/MZBannerView: 仿魅族BannerView,图片轮播控件,支持多种模式切换：普通ViewPager使用，普通Banner使用，仿魅族Banner使用。