神刀安全网

Android-自定义banner实现

惯例先上图:

Android-自定义banner实现

可以看到这是一个轮播图,只不过我们以前在用的时候一般都是用ViewPager,用正常的ViewPager有几点坏处:

  • 不能无限循环
  • 不能控制自动播放

所以这就需要自己封装一个了,其实还是用的ViewPager,只不过更改了他的触摸事件并且设置了自动轮播的时间,然后自己写了一个PagerAdapter来实现无限轮播,最后下面的指示器和ViewPager、PagerAdapter封装到了一起,所以使用的时候很简单。只需要继承自BannerPagerAdapter,重写构造和setView()方法。然后在使用的时候调用方法即可,基本代码如下:

List<Integer> data = new ArrayList<>(); data.add(R.mipmap.a1); data.add(R.mipmap.a2); data.add(R.mipmap.a3); data.add(R.mipmap.a4);   AdapterDemo ad = new AdapterDemo(this, data);  Banner banner = (Banner) findViewById(R.id.banner);  /**  * 关于这里的设置参数问题,是需要这样使用的  * 在设置了小圆点之后才能设置适配器  * 因为只有在适配器里才会根据一共多少条数据来适配  * 最后需要调用开始轮播  * 个人建议在onPause()/onDestroy()方法中来停止 -- stopAutoPlay()  */ banner.setDot(R.drawable.no_selected_dot, R.drawable.selected_dot).     setDotGravity(Banner.CENTER).     setAdapter(ad).     setOnItemClickListener(new BannerPagerAdapter.onItemClickListener() {         @Override         public void onClick(int position) {             Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();         }     }).     startAutoPlay();

下面是AdapterDemo的代码:

public class AdapterDemo extends BannerPagerAdapter {      private Context mContext;     private List<Integer> data;      public AdapterDemo(Context context, List data) {         super(context, data);         mContext = context;         this.data = data;     }      /**      * 只需要重写构造和这个方法即可      * 在这里可以设置自己的View,使用自己的图片加载库      */     @Override     public View setView(int position) {         View v = LayoutInflater.from(mContext).inflate(R.layout.test, null);         ImageView iv = (ImageView) v.findViewById(R.id.iv);         iv.setImageResource(data.get(position));         return v;     } }

可以看的出来这里给调用者很大的空间来进行自己的操作,在setView中直接可以根据position来设置自己的View和数据,并且使用自己的图片加载库。

如果感兴趣的可以移步GitHub


下面开始说如何写

首先我们要确定一下这个banner有几个需要注意的点:

  1. 无限轮播
  2. 点击事件
  3. 指示器
  4. 指示器的滑动效果

无限轮播、点击事件

关于无限轮播,我参照的是任玉刚大神的博客,所以我也希望各位去看这个博客,也算是涨点人气,我这里就不写到底如何实现的了,各位可以查看我的代码

循环广告位组件的实现 — 任玉刚

指示器、滑动效果

其实我写的时候有好多坑,但是写这篇文章的时候感觉都不是特别难的点(技术太菜

关于指示器,其实现在大部分都是小圆点,这里我实现的思路是创建一个FrameLayout来添加ViewPager和指示器

但是可以看到,这里的指示器会有一个随着页面滑动而滑动的效果,这里就需要两层了,一个是包含未选中的,一个是包含了选中和未选中的(Group)

代码如下:

private void init() {     mPager = new BannerViewPager(mContext);     addView(mPager);     /**      * 实例化两个Group      */     mFrameLayout = new FrameLayout(mContext);     mDotGroup = new LinearLayout(mContext);     /**      * 设置小圆点Group的方向为水平      */     mDotGroup.setOrientation(LinearLayout.HORIZONTAL);     /**      * 如果不设置则小圆点在中间      */     mDotGroup.setGravity(CENTER | Gravity.BOTTOM);     /**      * 两个Group的大小都为match_parent      */     LinearLayout.LayoutParams params =             new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,                     ViewGroup.LayoutParams.MATCH_PARENT);     /**      * 首先添加小圆点的Group      */     mFrameLayout.addView(mDotGroup, params);     /**      * 然后添加包含的Group(f**k,表达能力有限)      */     addView(mFrameLayout, params);      /**      * 添加到任务栈,当前所有任务完事之后添加已经选中的那个小圆点      */     post(new Runnable() {         @Override         public void run() {             ImageView iv = new ImageView(mContext);             iv.setImageDrawable(mContext.getResources().getDrawable(mDot[1]));             FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);             /**              * 设置选中小圆点的左边距              */             params.leftMargin = (int) mDotGroup.getChildAt(0).getX();             params.gravity = Gravity.BOTTOM;             mFrameLayout.addView(iv, params);             mSelectedDot = mFrameLayout.getChildAt(1);         }     });     mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {         @Override         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {             /**              * 获取到当前position              */             position %= mAdapter.size;             /**              * 判断如果当前的position不是最后一个,那么就设置偏移量来实现被选中小圆点的滑动效果              */             if (mSelectedDot != null && position != mAdapter.size -1) {                 float dx = mDotGroup.getChildAt(1).getX() - mDotGroup.getChildAt(0).getX();                 mSelectedDot.setTranslationX((position * dx) + positionOffset * dx);             }         }          @Override         public void onPageSelected(int position) {             position %= mAdapter.size;             /**              * 如果已经是最后一个,那么则直接把小圆点定位到那,不然滑动效果会出错              */             if (mSelectedDot != null && position == mAdapter.size - 1) {                 float dx = mDotGroup.getChildAt(1).getX() - mDotGroup.getChildAt(0).getX();                 mSelectedDot.setTranslationX(position * dx);             }         }          @Override         public void onPageScrollStateChanged(int state) {          }     });  }

可以看到我们首先添加了ViewPager,然后我们添加了未选中指示器的Group,之后我们才添加的选中的指示器。在添加选中指示器的时候用了一个post,这个方法是把runnable里的代码添加到任务栈,前面的任务结束了这个任务才会执行,所以我们可以获取到第一个未选中小圆点的坐标,然后把选中指示器覆盖上去,后来我们移动的时候就直接移动选中的指示器就好了。

关于滑动指示器,其实就是用了一个setTranslationX()方法,这个方法可以虽然移动View的位置,但是没有真正的移动该View,所以我们在移动的时候根据position来计算,但是当移动到最后一个的时候就不应该用这个方法了,如果还用的话就会造成一种『出界』了的感觉,所以这里在最后一个的时候不进入方法。

有人应该会想到『在第一页的时候』,这里我们大家可以自己测试一下,当手指向右滑的时候,就已经是size-1页了,所以我们直接就用一个判断就够了

额,写的乱七八糟,但是代码会说话的~

还是那句话,感兴趣的请移步GitHub哟~


最后

爱生活,爱小丽,爱Android

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Android-自定义banner实现

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址