首页 > 程序开发 > 移动开发 > Android >

Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程

2017-04-01

Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程。

Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程

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

一、自定义控件属性

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

1、扩展属性

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

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


        
        
            
            
        
        
            
            
            
            
            
            
        
        
        

        
        

        
        

        
        
        
        
        
    

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

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

相关文章
最新文章
热点推荐