Android仿京东淘宝自动无限循环轮播控件思路详解仿京东淘宝自动无限循环轮播控件思路详解
在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) {