Android开发之轮播效果

来源:互联网 发布:男士爽肤水和乳液 知乎 编辑:程序博客网 时间:2024/05/17 23:00
/**
 * 关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位    来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户"友好性"

 */

这里讲解两种实现:一种ViewPager 另一种则是github上的开源库

一、ViewPager实现轮播效果:


实现步骤

1、定义ViewPager并为ViewPager设置Adapter

    @Override    public Object instantiateItem(ViewGroup container, int position) {        int pos = position % imgs.length;        ImageView iv = new ImageView(context);        iv.setBackgroundResource(imgs[pos]);        container.addView(iv);        return iv;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        //super.destroyItem(container, position, object);        container.removeView((View) object);    }
2、监听ViewPager事件动态更改圆圈的状态

    @Override    public void onPageSelected(int position) {        int pos = position % imgs.length;        title.setText(mImageDes[pos]);//更改下面文字信息        circleLayout.getChildAt(pos).setEnabled(true);//为当前小圆圈设置可用,因为在selector选择器监听的是否可用        circleLayout.getChildAt(prePosition).setEnabled(false);//将上一个小圆圈设置不可用        prePosition = pos;//最后要将当前的位置设置给之前的位置    }
3、让ViewPager的图片自动滚动

这里使用Handler不断发送消息来实现自动轮播的效果

handler.sendEmptyMessageDelayed(0, 2000);
    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            int currentItem = vp.getCurrentItem();            vp.setCurrentItem(++currentItem);            handler.sendEmptyMessageDelayed(0, 2000);        }    };
4、最后需要监听触摸事件(当用户触摸时候不自动播放,离开时自动播放)

    @Override    public boolean onTouch(View v, MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                handler.removeCallbacksAndMessages(null);// 清除所有消息和Runnable对象                break;            case MotionEvent.ACTION_UP:                handler.sendEmptyMessageDelayed(0, 2000);                break;        }        return super.onTouchEvent(event);//让ViewPager原生触摸执行    }

一、Github开源库实现轮播效果:

地址:https://github.com/daimajia/AndroidImageSlider/wiki

接下来简单介绍下,感兴趣的可以去学习,continue


1、在AndroidStudio需要build.gradle配置

dependencies {    compile "com.android.support:support-v4:+"    compile 'com.squareup.picasso:picasso:2.3.2'    compile 'com.nineoldandroids:library:2.4.0'    compile 'com.daimajia.slider:library:1.1.5@aar'}

2、如果你的轮播图需要在网上获取

<!-- if you want to load images from the internet --><uses-permission android:name="android.permission.INTERNET" /> <!-- if you want to load images from a file OR from the internet --><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
3、接下来添加SlideLayout控件

<com.daimajia.slider.library.SliderLayout        android:id="@+id/slider"        android:layout_width="match_parent"        android:layout_height="200dp"/>
为控件添加轮播图

for (int i = 0; i < 4; i++) {            TextSliderView textSliderView = new TextSliderView(this);            textSliderView                    .description(desc[i])//为每个添加的描述信息                    .image(urls[i]);//图片的地址            sliderShow.addSlider(textSliderView);//将TextSlideView添加到SliderLayout里面        }
4、添加指示器和动画

<com.daimajia.slider.library.Indicators.PagerIndicator        android:id="@+id/custom_indicator"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"        android:layout_gravity="center"        custom:selected_color="#555555"        custom:unselected_color="#55555555"        custom:shape="oval"        custom:selected_width="8dp"        custom:selected_height="8dp"        custom:unselected_width="4dp"        custom:unselected_height="4dp"        />
PagerIndicator indicator = (PagerIndicator) findViewById(R.id.custom_indicator);        sliderShow.setCustomIndicator(indicator);//为控件添加指示器,这里github提供了不同的指示器        sliderShow.setCustomAnimation(new DescriptionAnimation());//设置动画
当然在github还提供各种各样的指示器,感兴趣的可以去试试。ok,这样轮播效果就搞定了,so easy!!

0 0