目录
效果图
介绍
使用
导入依赖
自定义属性
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使用。