在Fragment中实现banner轮播图效果(附效果图

2021/7/20更新
感谢评论区大哥的帮助,代码已更新

最近想做个轮播图,一直在网上博客看别人写的文章,但是可能因为时间版本问题,或多或少有些bug,最大的问题就是无法显示图片,于是自己结合了几篇博客,终于在模拟器上成功运行,下面是效果图:在这里插入图片描述
然后下面贴源码

//添加依赖
//轮播依赖
    implementation'com.youth.banner:banner:1.4.10'
//Glide框架依赖
    implementation "com.github.bumptech.glide:glide:4.6.1"
//布局代码
 <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_below="@+id/toolbar"
            />
public class FirstFragment extends Fragment {
    private Banner banner;
    private List<Integer> image=new ArrayList<>();
     private List<String> title=new ArrayList<>();
    private void initData() {
        image.clear();
        title.clear();
        image.add(R.drawable.lb_four);
        image.add(R.drawable.lb_second);
        image.add(R.drawable.lb_first);
        image.add(R.drawable.lb_three);
        image.add(R.drawable.lb_five);
        title.add("圣诞节活动");
        title.add("不一样的美");
        title.add("夏季推荐");
        title.add("家具打折");
        title.add("手表上新");

    }
    private void initView() {
        
        banner.setIndicatorGravity(BannerConfig.CENTER);

        banner.setImageLoader(new MyImageLoader());
     
        banner.setImages(image);
        
        banner.setBannerAnimation(Transformer.Default);
       
        banner.isAutoPlay(true);
      
        banner.setBannerTitles(title);
        
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);\\可以根据自己想要的更换stylr
       
        banner.setDelayTime(3000);
      
        banner.setOnBannerListener(this::OnBannerClick);
       
        banner.start();
    }

  
 public void OnBannerClick(int position) {
      Toast.makeText(getActivity(), "你点了第" + (position + 1) + "张轮播图", Toast.LENGTH_SHORT).show();
     }

   
   private class MyImageLoader extends ImageLoader {

        public void displayImage(Context context, Object path, ImageView imageView) {

            Glide.with(context).load(path).into(imageView);

        }
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view =LayoutInflater.from(getActivity()).inflate(R.layout.fragment_first,container,false);
        banner = view.findViewById(R.id.banner);
        initData();
        initView();
        return view;
    }

}

附指示器属性
setBannerStyle
BannerConfig.NOT_INDICATOR 不显示指示器和标题
BannerConfig.CIRCLE_INDICATOR 显示圆形指示器
BannerConfig.NUM_INDICATOR 显示数字指示器
BannerConfig.NUM_INDICATOR_TITLE 显示数字指示器和标题
BannerConfig.CIRCLE_INDICATOR_TITLE 显示圆形指示器和标题(垂直显示)
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE 显示圆形指示器和标题(水平显示)

setIndicatorGravity
BannerConfig.LEFT 指示器居左
BannerConfig.CENTER 指示器居中
BannerConfig.RIGHT 指示器居右

亲测有效,如有错误欢迎指出,有改进的地方欢迎沟通
如果是网络图片记得加权限

  • 18
    点赞
  • 75
    收藏
    觉得还不错? 一键收藏
  • 39
    评论
以下是一个在fragment自动轮播图片的示例代码: ```java public class BannerFragment extends Fragment { private ViewPager mViewPager; private List<Integer> mImageList; private int mCurrentPage = 0; private Timer mTimer; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_banner, container, false); mViewPager = (ViewPager) view.findViewById(R.id.view_pager); mImageList = new ArrayList<>(); mImageList.add(R.drawable.image1); mImageList.add(R.drawable.image2); mImageList.add(R.drawable.image3); mViewPager.setAdapter(new BannerPagerAdapter()); startAutoPlay(); return view; } private void startAutoPlay() { mTimer = new Timer(); mTimer.schedule(new TimerTask() { @Override public void run() { getActivity().runOnUiThread(new Runnable() { @Override public void run() { if (mCurrentPage == mImageList.size()) { mCurrentPage = 0; } mViewPager.setCurrentItem(mCurrentPage++, true); } }); } }, 3000, 3000); } private class BannerPagerAdapter extends PagerAdapter { @Override public int getCount() { return mImageList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = new ImageView(getActivity()); imageView.setImageResource(mImageList.get(position)); container.addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } @Override public void onDestroy() { super.onDestroy(); if (mTimer != null) { mTimer.cancel(); } } } ``` 这个示例代码使用了ViewPager和一个Timer来实现自动轮播,每隔3秒钟就会自动切换到下一张图片。PagerAdapter的作用是为ViewPager提供数据源。在onCreateView方法,我们创建了一个BannerPagerAdapter,然后将其设置给ViewPager。最后在onDestroy方法,我们取消了Timer的计时任务,以免内存泄漏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值