Android仿京东淘宝自动无限循环轮播控件思路详解

更新时间：2017年04月01日 08:53:52 作者：LTing5505

在App的开发中，很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏，这里小编写了一个，分享到脚本之家平台供大家参考

在App的开发中，很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏，所以就自己写了一个，下面是我自定义控件的思路和过程。

一、自定义控件属性

新建自定义控件SliderLayout继承于RelativeLayout，首先要考虑的就是自定义的控件需要扩展那些属性，把这些属性列出来。在这里是要实现类似于京东淘宝的无限轮播广告栏，那么首先想到的就是轮播的时长、轮播指示器的样式等等。我在这里列举了一些并且结合到了代码中。

1、扩展属性

（1）是否开启自动轮播的功能。
（2）指示器的图形样式，一般为圆形和方形两种。
（3）指示器的位置，一般为底部或者顶部。
（4）指示器被选中和不被选中时的样式：颜色、高度、宽度、间隔等。
（5）轮播的时长。
（6）加载的如果是网络图片的话，需要默认图片和错误图片等。

2、在attrs.xml文件中添加这些扩展的属性。

<declare-styleable name="SliderLayout">
  <attr name="sl_is_auto_play" format="boolean"/>
  <attr name="sl_indicator_shape" format="enum">
   <enum name="oval" value="0" />
   <enum name="rect" value="1" />
  </attr>
  <attr name="sl_indicator_position" format="enum">
   <enum name="centerBottom" value="0" />
   <enum name="rightBottom" value="1" />
   <enum name="leftBottom" value="2" />
   <enum name="centerTop" value="3" />
   <enum name="rightTop" value="4" />
   <enum name="leftTop" value="5" />
  </attr>
  <attr name="sl_selected_indicator_color" format="color|reference" />
  <attr name="sl_unselected_indicator_color" format="color|reference" />
  <attr name="sl_selected_indicator_height" format="dimension|reference" />
  <attr name="sl_selected_indicator_width" format="dimension|reference" />
  <attr name="sl_unselected_indicator_height" format="dimension|reference" />
  <attr name="sl_unselected_indicator_width" format="dimension|reference" />
  <attr name="sl_indicator_space" format="dimension|reference" />
  <attr name="sl_indicator_margin" format="dimension|reference" />
  <attr name="sl_auto_play_duration" format="integer|reference" />
  <attr name="sl_default_image" format="reference"/>
  <attr name="sl_error_image" format="reference"/>
 </declare-styleable>

二、自定义轮播控件的初始化

1、获取到扩展属性的值

在自定义SliderLayout中获取到扩展的样式，然后根据样式获取相应的属性值，最好是要先设置好默认值。

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SliderLayout, defStyleAttr, 0);
  if (array != null) {
   isAutoPlay = array.getBoolean(R.styleable.SliderLayout_sl_is_auto_play, isAutoPlay);
   //get the shape of indicator
   int intShape = array.getInt(R.styleable.SliderLayout_sl_indicator_shape, indicatorShape.ordinal());
   for (IndicatorShape shape : IndicatorShape.values()) {
    if (shape.ordinal() == intShape) {
     indicatorShape = shape;
     break;
    }
   }
   //get the position of indicator
   int intPosition = array.getInt(R.styleable.SliderLayout_sl_indicator_position, IndicatorPosition.centerBottom.ordinal());
   for (IndicatorPosition position : IndicatorPosition.values()) {
    if (position.ordinal() == intPosition) {
     indicatorPosition = position;
     break;
    }
   }
   unSelectedIndicatorColor = array.getColor(R.styleable.SliderLayout_sl_unselected_indicator_color, unSelectedIndicatorColor);
   selectedIndicatorColor = array.getColor(R.styleable.SliderLayout_sl_selected_indicator_color, selectedIndicatorColor);
   unSelectedIndicatorHeight = array.getDimension(R.styleable.SliderLayout_sl_unselected_indicator_height, unSelectedIndicatorHeight);
   unSelectedIndicatorWidth = array.getDimension(R.styleable.SliderLayout_sl_unselected_indicator_width, unSelectedIndicatorWidth);
   selectedIndicatorHeight = array.getDimension(R.styleable.SliderLayout_sl_selected_indicator_height, selectedIndicatorHeight);
   selectedIndicatorWidth = array.getDimension(R.styleable.SliderLayout_sl_selected_indicator_width, selectedIndicatorWidth);
   indicatorSpace = array.getDimension(R.styleable.SliderLayout_sl_indicator_space, indicatorSpace);
   indicatorMargin = array.getDimension(R.styleable.SliderLayout_sl_indicator_margin, indicatorMargin);
   autoPlayDuration = array.getInt(R.styleable.SliderLayout_sl_auto_play_duration, autoPlayDuration);
   defaultImage = array.getResourceId(R.styleable.SliderLayout_sl_default_image, defaultImage);
   errorImage = array.getResourceId(R.styleable.SliderLayout_sl_error_image, errorImage);
  }

2、初始化控件

根据这里所需要实现的功能，首先需要一个图像切换器ImageSwticher，还要指示器，这里就用ImageView了。

switcherImage = new ImageSwitcher(context);
  switcherImage.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
for (int i = 0; i < itemCount; i++) {
   ImageView indicator = new ImageView(context);
   indicator.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
   indicator.setPadding((int) (indicatorSpace), (int) (indicatorSpace), (int) (indicatorSpace), (int) (indicatorSpace));
   indicator.setImageDrawable(unSelectedDrawable);
   indicatorContainer.addView(indicator);
   final int finalI = i;
   indicator.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
     stopAutoPlay();
     switchIndicator(finalI);
     pictureIndex = finalI;
     handler.sendEmptyMessageDelayed(START_AUTO_PLAY,autoPlayDuration);
    }
   });
  }

3、初始化选中第一张图片

专门写一个针对指示器切换的函数，然后在初始化的时候直接调用，选中第一个指示器，就是选中第一张图片了。

函数代码如下。

private void switchIndicator(int index) {
  for (int i = 0; i < indicatorContainer.getChildCount(); i++) {
   ((ImageView) indicatorContainer.getChildAt(i)).setImageDrawable(i == index ? selectedDrawable : unSelectedDrawable);
  }
  loadImage(index);
 }

调用选中第一张图。

switchIndicator(0);

三、图片的加载

1、网路图片的加载

在这里使用Picasso框架来加载图片，根据url来加载显示图片，同时也要显示图片的加载进度，这里就需要一个Dialog提示框了，Dialog的样式最好是可以自定义的。

private void loadNetImage(int pictureIndex) {
  if (list != null && list.size() != 0) {
   Picasso.with(context)
     .load((String) list.get(pictureIndex))
     .placeholder(defaultImage)
     .error(errorImage)
     .tag(context)
     .into(mTarget);
  }
 }

下面是图片的加载提示过程。

private Target mTarget = new Target() {
  @Override
  public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
   dismissDialog();
   ((ImageView) switcherImage.getCurrentView()).setScaleType(ImageView.ScaleType.CENTER_CROP);
   ((ImageView) switcherImage.getCurrentView()).setLayoutParams(new ImageSwitcher.LayoutParams(ImageSwitcher.LayoutParams.MATCH_PARENT, ImageSwitcher.LayoutParams.MATCH_PARENT));
   ((ImageView) switcherImage.getCurrentView()).setImageBitmap(bitmap);
  }
  @Override
  public void onBitmapFailed(Drawable errorDrawable) {
   dismissDialog();
   ((ImageView) switcherImage.getCurrentView()).setImageDrawable(errorDrawable);
  }
  @Override
  public void onPrepareLoad(Drawable placeHolderDrawable) {
   showDialog();
  }
 };

2、资源图片的加载

只能加载网络图片是不够的呢，还需要可以加载资源图片，加载资源图片的办法就更加简单了。

private void loadFileImage(int pictureIndex) {
   if (list != null && list.size() != 0) {
    switcherImage.setImageResource((Integer) list.get(pictureIndex));
   }
  }

四、设置图片切换的动画

设置图片从左往右以及从右往左的动画效果，并且当滑动到该图片时，指示器也要一起变化，这里就简单说下从左往右的动画了。

private void SliderLeftToRight() {
  // get current index
  pictureIndex = pictureIndex == 0 ? itemCount - 1
    : pictureIndex - 1;
  // set Animation
  switcherImage.setInAnimation(AnimationUtils.loadAnimation(context,
    android.R.anim.slide_in_left));
  switcherImage.setOutAnimation(AnimationUtils.loadAnimation(context,
    android.R.anim.slide_out_right));
  switchIndicator(pictureIndex);
 }

从右往左滑动时的代码和这个是一样的，就是换了下方向，需要自己定义下。

五、定义图片的点击事件

1、定义interface来监听事件

在自定义控件中自定义一个interface来监听事件就可以了。

public interface IOnClickListener {
  void onItemClick(View view, int position);
 }

2、在onTouch中调用点击事件。

这里需要说明下为什么在onTouch中处理，因为onTouch是触摸事件，在滑动的过程中，用户是触摸了屏幕的，所以根据用户触摸屏幕时点击下的X坐标和点击起来时的X坐标的对比来判断是左滑还是右滑了，这样的话，就会和onClick事件相冲了，所以就想到了一个办法，那就是在范围内的话，就默认为点击事件，范围外就是滑动事件了。

if (0==(Math.abs(touchUpX - touchDownX))||(Math.abs(touchUpX - touchDownX))<50) {
    if (listener != null) {
     stopAutoPlay();
     listener.onItemClick(view, pictureIndex);
     handler.sendEmptyMessageDelayed(START_AUTO_PLAY,autoPlayDuration);
    }
}

六、效果图

说到了这里，应该有所思路了吧，现在就来看下效果吧。

这里写图片描述

源代码目前已经开放了，放在Github上面，欢迎指导建议。http://www.github.com/LT5505/SliderLayout

以上所述是小编给大家介绍的Android仿京东淘宝自动无限循环轮播控件思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Android Flutter在点击事件上添加动画效果实现全过程
这篇文章主要给大家介绍了关于Android Flutter在点击事件上添加动画效果实现的相关资料,通过实例代码介绍的非常详细,对大家学习Android具有一定的参考学习价值,需要的朋友可以参考下
2023-03-03
360浏览器文本框获得焦点后被android软键盘遮罩该怎么办
最近接了个项目，项目需求是这样的，站点上筛选按钮点击后弹出层（fixed），当输入框获取焦点以后弹出系统自带的软键盘，在android上十款浏览器挨个测试比对，发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了，下面分享我的解决办法
2015-12-12
Android 使用VideoView播放MP4的简单实现
这篇文章主要介绍了Android 使用VideoView播放MP4的简单实现,实现简单的播放功能，播放手机本地的MP4文件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Android Activity Results API代替onActivityResul
说到onActivityResult，我们已经非常熟悉来，通过在A activity启动B activity并且传入数据到B中，然后在A中通过onActivityResult来接收B中返回的数据。在最新的activity-ktx的beta版本中，谷歌已经废弃了onActivityResult
2022-09-09
Android毕业设计备忘录APP
这篇文章主要介绍了一个Android毕业设计备忘录APP,它很小,但是功能很全,可实现添加、删除、修改、查看的功能,使用Java语言开发,风格简练
2021-08-08
Java ArrayList源码深入分析
ArrayList 类是一个可以动态修改的数组，与普通数组的区别就是它是没有固定大小的限制，我们可以添加或删除元素。ArrayList 继承了 AbstractList，并实现了List接口
2022-08-08
Android中的Bitmap的详细介绍
本篇文章主要介绍了Android中的Bitmap，是Windows标准格式图形文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Android中Dialog自定义上下文花式菜单
这篇文章主要为大家详细介绍了Android中Dialog自定义上下文花式菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Android引用开源框架通过AsyncHttpClient实现文件上传
这篇文章主要介绍了Android引用开源框架通过AsyncHttpClient实现文件上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Android中判断网络连接是否可用的方法总结
这篇文章主要介绍了Android中判断网络连接是否可用的方法总结的相关资料,需要的朋友可以参考下
2017-04-04

Android仿京东淘宝自动无限循环轮播控件思路详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具