Android好用的轮播图控件

首先我先声明一下这是一个三方控件,我在这里仅仅是介绍一下用法,当然你也许会说不就是一个轮播图吗?还用得着用第三方的,真是菜比,没错,我确实是菜比,不过有现成的好用的简单的 为何还一定要自己造轮子,自己写的难免问题多

我要介绍的轮播图控件是ConvenientBanner:通用的广告栏控件,让你轻松实现广告头效果。支持无限循环,可以设置自动翻页和时间(而且非常智能,手指触碰则暂停翻页,离开自动开始翻页。你也可以设置在界面onPause的时候不进行自动翻页,onResume之后继续自动翻页),并且提供多种翻页特效。 对比其他广告栏控件,大多都需要对源码进行改动才能加载网络图片,或者帮你集成不是你所需要的图片缓存库。而这个库能让有代码洁癖的你欢喜,不需要对库源码进行修改你就可以使用任何你喜欢的网络图片库进行配合

如果你喜欢研究源码 如果你想学的更多 请参考原始项目地址
ConvenientBanner原始项目地址

我这里只是简单介绍下用法

我开发用的是Android Studio(以下简称AS)
1 如果你开发也用的是AS,那么很简单,在你的build.gradle文件里面加入 compile ‘com.bigkoo:convenientbanner:2.0.5’
当然如果你还在使用eclipse,那么去上面项目地址下载demo拷贝架包吧 说一句废话哈 还是早点转AS吧 AS比eclipse智能好用方便。
2 布局文件中使用

<com.bigkoo.convenientbanner.ConvenientBanner
                android:id="@+id/id_cb"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                app:canLoop="true"   //控制循环与否
        />

3 代码中使用
(1) 自定义你的holder 这个非常简单 实现Holder接口 实现未实现的方法

public class ImageViewHolder implements Holder<Integer>{
                 private ImageView imageView;
                @Override
                public View createView(Context context) {
                    imageView = new ImageView(context);
                    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    return imageView;
                }
                @Override
                public void UpdateUI(Context context, int position, Integer data) {

                    imageView.setImageResource(data);
                }
        }
(2)给convenientBanner设置setPages
mCb.setPages(new CBViewHolderCreator<ImageViewHolder>() {
                @Override
                public ImageViewHolder createHolder() {
                    return new ImageViewHolder();
                }
                },mImageList)
                .setPageIndicator(new int[]  {R.drawable.ponit_normal,R.drawable.point_select}) //设置两个点作为指示器
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.CENTER_HORIZONTAL); //设置指示器的方向水平  居中
(3)记得设置mCb.startTurning(2000)开启轮播图循环翻页,至此 一个轮播图框架就搭建好了。
(4) 轮播图条目点击事件,项目中点击轮播图条目一般都会有跳页操作 我们可以在这个方法中处理跳页操作
mCb.setOnItemClickListener(new OnItemClickListener() {
                @Override
                public void onItemClick(int position) {
                    Toast.makeText(MainActivity.this,"点击了条目"+position,Toast.LENGTH_LONG).show();
                }
        });
(5)如果是加载网络图片记得在清单文件中加上网络权限

4 常用方法介绍

mCb.setPageIndicator(int[])  这个是设置指示器的方法
        mCb.setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign) 设置指示器方向 
        mCb.startTurning(2000);      //设置开始轮播以及轮播时间  建议在onResume方法中设置
        mCb.stopTurning();              //停止轮播  建议在onPause方法中设置
        mCb.setManualPageable(false);//设置不能手动影响  默认是手指触摸 轮播图不能翻页
        mCb.setCanLoop(boolean);  //默认true,设置轮播图是否轮播

5 源代码下载
6 效果图
这里写图片描述
7 联系方式
QQ: 1509815887
邮箱: zlc921022@163.com

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Android自定义轮播控件可以使用ViewPager和Handler实现: 1. 首先创建一个自定义的ViewPager类,并重写onTouchEvent()方法,实现手势滑动效果。 ``` public class MyViewPager extends ViewPager { private float startX; private float startY; private OnItemClickListener onItemClickListener; public MyViewPager(Context context) { super(context); } public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: startX = ev.getX(); startY = ev.getY(); break; case MotionEvent.ACTION_UP: float endX = ev.getX(); float endY = ev.getY(); if (startX == endX && startY == endY) { if (onItemClickListener != null) { onItemClickListener.onItemClick(getCurrentItem()); } } break; } return super.onTouchEvent(ev); } public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } public interface OnItemClickListener { void onItemClick(int position); } } ``` 2. 创建一个自定义的轮播控件类,继承自LinearLayout,并在该类中初始化ViewPager和指示器,并设置自动轮播。 ``` public class MyBanner extends LinearLayout { private Context mContext; private MyViewPager mViewPager; private LinearLayout mIndicatorLayout; private List<ImageView> mIndicatorViews; private List<String> mImageUrls; private int mCurrentItem = 0; private Handler mHandler = new Handler(); public MyBanner(Context context) { super(context); initView(context); } public MyBanner(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } private void initView(Context context) { mContext = context; View view = LayoutInflater.from(mContext).inflate(R.layout.my_banner_layout, this); mViewPager = (MyViewPager) view.findViewById(R.id.viewpager); mIndicatorLayout = (LinearLayout) view.findViewById(R.id.indicator_layout); } public void setImageUrls(List<String> imageUrls) { mImageUrls = imageUrls; initIndicator(); mViewPager.setAdapter(new MyBannerAdapter()); mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % mImageUrls.size())); startAutoScroll(); } private void initIndicator() { mIndicatorViews = new ArrayList<>(); for (int i = 0; i < mImageUrls.size(); i++) { ImageView indicatorView = new ImageView(mContext); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.rightMargin = 20; indicatorView.setLayoutParams(params); if (i == 0) { indicatorView.setImageResource(R.drawable.indicator_selected); } else { indicatorView.setImageResource(R.drawable.indicator_normal); } mIndicatorLayout.addView(indicatorView); mIndicatorViews.add(indicatorView); } } private void startAutoScroll() { mHandler.postDelayed(new Runnable() { @Override public void run() { mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1); mHandler.postDelayed(this, 2000); } }, 2000); } private class MyBannerAdapter extends PagerAdapter { @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, final int position) { ImageView imageView = new ImageView(mContext); imageView.setScaleType(ImageView.ScaleType.FIT_XY); Glide.with(mContext).load(mImageUrls.get(position % mImageUrls.size())).into(imageView); container.addView(imageView); imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext, "点击了第" + (position % mImageUrls.size() + 1) + "张图片", Toast.LENGTH_SHORT).show(); } }); return imageView; } } } ``` 3. 在布局文件中使用自定义的轮播控件。 ``` <com.example.myapplication.MyBanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200dp" /> ``` 4. 在代码中设置轮播的图片地址。 ``` List<String> imageUrls = new ArrayList<>(); imageUrls.add("http://img2.imgtn.bdimg.com/it/u=202085641,1798154443&fm=27&gp=0.jpg"); imageUrls.add("http://img5.imgtn.bdimg.com/it/u=2746360890,4221331673&fm=27&gp=0.jpg"); imageUrls.add("http://img0.imgtn.bdimg.com/it/u=3054917406,3471798182&fm=27&gp=0.jpg"); mBanner.setImageUrls(imageUrls); ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值