Android中的Banner轮播图的使用

目录

效果图

介绍

3.XML中banner常用的属性

使用

导入依赖

xml文件 

 活动代码（本文在碎片中使用）

---

效果图

Banner效果图

介绍

       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);
    }
}

以上就是该控件使用的全部内容。