目录
效果图
介绍
3.XML中banner常用的属性
使用
导入依赖
xml文件
活动代码(本文在碎片中使用)
效果图
介绍
Banner轮播图是一种常见的移动应用界面设计元素,用于展示多张图片或广告,并支持自动切换。它通常以水平方向循环滚动的形式呈现,用户可以通过手动滑动或自动播放查看不同的内容。以下是一份详细介绍Banner轮播图的内容:
1.
用途和场景:
-
广告展示:
用于应用中展示广告、推广内容等。
-
焦点展示:
用于突出显示应用中的重要信息、特色功能等。
-
引导页:
在应用启动时,通过轮播图引导用户了解应用的特性。
2.
基本特征:
-
自动轮播:
支持自动切换轮播图内容,增强用户体验。
-
手动滑动:
允许用户通过手势滑动切换轮播图,提供交互性。
-
指示器:
显示当前轮播图位置的指示器,帮助用户了解总共有多少张轮播图以及当前所在位置。
3.XML中banner常用的属性
banner_loop_time 轮播间隔时间,默认3000
banner_radius banner圆角半径
banner_orientation 轮播方向:horizontal(默认) or vertical
banner_auto_loop 是否自动轮播,默认true
使用
导入依赖
implementation 'io.github.youth5201314:banner:2.2.2'
xml文件
<com.youth.banner.Banner
android:layout_width="match_parent"
android:layout_height="220dp"
android:id="@+id/banner"
app:banner_radius="15dp"
android:layout_margin="10dp"
app:banner_auto_loop="true"
app:banner_loop_time="3500"//轮播间隔时间
android:scrollIndicators="bottom"//指示器位置
app:banner_indicator_margin="5dp"//指示器间隙
app:banner_indicator_normal_color="@color/white"//指示器未选中时颜色
app:banner_indicator_selected_color="@color/blue"/>//指示器选中时颜色
活动代码(本文在碎片中使用)
public class Fragment_Store extends Fragment {
private Banner banner;
private List<Integer> bannerList;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_store,container,false);
initBannerList();
banner = (Banner) view.findViewById(R.id.banner);
banner.setAdapter(new BannerImageAdapter<Integer>(bannerList) {
@Override
public void onBindView(BannerImageHolder holder, Integer data, int position, int size) {
holder.imageView.setImageResource(data);
}
});
banner.setIndicator(new CircleIndicator(getContext()));//想要有指示器这一步必须有
banner.start();
return view;
}
public void initBannerList(){
bannerList = new ArrayList<>();
bannerList.add(R.drawable.xuexiji);
bannerList.add(R.drawable.cidianbi);
bannerList.add(R.drawable.word_machine);
bannerList.add(R.drawable.sijibeikao);
bannerList.add(R.drawable.bijiben);
bannerList.add(R.drawable.shuqian);
}
}
以上就是该控件使用的全部内容。