安卓首页图片轮播效果(淘宝、京东首页广告效果)

1、主要原理就是利用定时任务器定时切换ViewPager的页面。

2、里面用了一个读取网络图片的插件，做客户端使用本地图片轮播的也很少。

自定义View 的布局文件layout_slideshow.xml：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <LinearLayout android:id="@+id/dotLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:padding="8dp"        android:gravity="right"        android:orientation="horizontal">        <View            android:id="@+id/v_dot1"            android:layout_width="8dp"            android:layout_height="8dp"            android:background="@drawable/dot_focus" />        <View            android:id="@+id/v_dot2"            android:layout_width="8dp"            android:layout_height="8dp"            android:layout_marginLeft="5dp"            android:background="@drawable/dot_blur" />    </LinearLayout></RelativeLayout>

主界面布局文件activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#FFFFFF"    tools:context="com.example.slideshowdemo.MainActivity"  >            <!-- 主题图片 -->    <com.example.slideshowdemo.customview.SlideShowView        android:id="@+id/slideshowView"        android:layout_width="fill_parent"        android:layout_height="180dp"        android:layout_centerHorizontal="true" />    </LinearLayout>

package com.example.slideshowdemo.customview;import java.util.ArrayList;import java.util.List;import java.util.concurrent.Executors;import java.util.concurrent.ScheduledExecutorService;import java.util.concurrent.TimeUnit;import android.content.Context;import android.graphics.drawable.Drawable;import android.os.AsyncTask;import android.os.Handler;import android.os.Message;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.LinearLayout;import com.example.slideshowdemo.R;import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;import com.nostra13.universalimageloader.core.assist.QueueProcessingType;/** * ViewPager实现的轮播图广告自定义视图，如京东首页的广告轮播图效果； * 既支持自动轮播页面也支持手势滑动切换页面 *  * */public class SlideShowView extends FrameLayout {// 使用universal-image-loader插件读取网络图片，需要工程导入universal-image-loader-1.8.6-with-sources.jarprivate ImageLoader imageLoader = ImageLoader.getInstance();    //轮播图图片数量    private final static int IMAGE_COUNT = 5;    //自动轮播的时间间隔    private final static int TIME_INTERVAL = 5;    //自动轮播启用开关    private final static boolean isAutoPlay = true;         //自定义轮播图的资源    private String[] imageUrls;    //放轮播图片的ImageView 的list    private List<ImageView> imageViewsList;    //放圆点的View的list    private List<View> dotViewsList;        private ViewPager viewPager;    //当前轮播页    private int currentItem  = 0;    //定时任务    private ScheduledExecutorService scheduledExecutorService;        private Context context;        //Handler    private Handler handler = new Handler(){        @Override        public void handleMessage(Message msg) {            // TODO Auto-generated method stub            super.handleMessage(msg);            viewPager.setCurrentItem(currentItem);        }            };        public SlideShowView(Context context) {        this(context,null);        // TODO Auto-generated constructor stub    }    public SlideShowView(Context context, AttributeSet attrs) {        this(context, attrs, 0);        // TODO Auto-generated constructor stub    }    public SlideShowView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        this.context = context;initImageLoader(context);        initData();        if(isAutoPlay){            startPlay();        }            }    /**     * 开始轮播图切换     */    private void startPlay(){        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS);    }    /**     * 停止轮播图切换     */    private void stopPlay(){        scheduledExecutorService.shutdown();    }    /**     * 初始化相关Data     */    private void initData(){        imageViewsList = new ArrayList<ImageView>();        dotViewsList = new ArrayList<View>();        // 一步任务获取图片        new GetListTask().execute("");    }    /**     * 初始化Views等UI     */    private void initUI(Context context){    if(imageUrls == null || imageUrls.length == 0)    return;            LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this, true);                LinearLayout dotLayout = (LinearLayout)findViewById(R.id.dotLayout);        dotLayout.removeAllViews();                // 热点个数与图片特殊相等        for (int i = 0; i < imageUrls.length; i++) {        ImageView view =  new ImageView(context);        view.setTag(imageUrls[i]);        if(i==0)//给一个默认图        view.setBackgroundResource(R.drawable.appmain_subject_1);        view.setScaleType(ScaleType.FIT_XY);        imageViewsList.add(view);                ImageView dotView =  new ImageView(context);        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);        params.leftMargin = 4;params.rightMargin = 4;dotLayout.addView(dotView, params);        dotViewsList.add(dotView);}                viewPager = (ViewPager) findViewById(R.id.viewPager);        viewPager.setFocusable(true);                viewPager.setAdapter(new MyPagerAdapter());        viewPager.setOnPageChangeListener(new MyPageChangeListener());    }        /**     * 填充ViewPager的页面适配器     *      */    private class MyPagerAdapter  extends PagerAdapter{        @Override        public void destroyItem(View container, int position, Object object) {            // TODO Auto-generated method stub            //((ViewPag.er)container).removeView((View)object);            ((ViewPager)container).removeView(imageViewsList.get(position));        }        @Override        public Object instantiateItem(View container, int position) {        ImageView imageView = imageViewsList.get(position);imageLoader.displayImage(imageView.getTag() + "", imageView);                    ((ViewPager)container).addView(imageViewsList.get(position));            return imageViewsList.get(position);        }        @Override        public int getCount() {            // TODO Auto-generated method stub            return imageViewsList.size();        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            // TODO Auto-generated method stub            return arg0 == arg1;        }        @Override        public void restoreState(Parcelable arg0, ClassLoader arg1) {            // TODO Auto-generated method stub        }        @Override        public Parcelable saveState() {            // TODO Auto-generated method stub            return null;        }        @Override        public void startUpdate(View arg0) {            // TODO Auto-generated method stub        }        @Override        public void finishUpdate(View arg0) {            // TODO Auto-generated method stub                    }            }    /**     * ViewPager的监听器     * 当ViewPager中页面的状态发生改变时调用     *      */    private class MyPageChangeListener implements OnPageChangeListener{        boolean isAutoPlay = false;        @Override        public void onPageScrollStateChanged(int arg0) {            // TODO Auto-generated method stub            switch (arg0) {            case 1:// 手势滑动，空闲中                isAutoPlay = false;                break;            case 2:// 界面切换中                isAutoPlay = true;                break;            case 0:// 滑动结束，即切换完毕或者加载完毕                // 当前为最后一张，此时从右向左滑，则切换到第一张                if (viewPager.getCurrentItem() == viewPager.getAdapter().getCount() - 1 && !isAutoPlay) {                    viewPager.setCurrentItem(0);                }                // 当前为第一张，此时从左向右滑，则切换到最后一张                else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {                    viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1);                }                break;        }        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {            // TODO Auto-generated method stub                    }        @Override        public void onPageSelected(int pos) {            // TODO Auto-generated method stub                        currentItem = pos;            for(int i=0;i < dotViewsList.size();i++){                if(i == pos){                    ((View)dotViewsList.get(pos)).setBackgroundResource(R.drawable.dot_focus);                }else {                    ((View)dotViewsList.get(i)).setBackgroundResource(R.drawable.dot_blur);                }            }        }            }        /**     *执行轮播图切换任务     *     */    private class SlideShowTask implements Runnable{        @Override        public void run() {            // TODO Auto-generated method stub            synchronized (viewPager) {                currentItem = (currentItem+1)%imageViewsList.size();                handler.obtainMessage().sendToTarget();            }        }            }        /**     * 销毁ImageView资源，回收内存     *      */    private void destoryBitmaps() {        for (int i = 0; i < IMAGE_COUNT; i++) {            ImageView imageView = imageViewsList.get(i);            Drawable drawable = imageView.getDrawable();            if (drawable != null) {                //解除drawable对view的引用                drawable.setCallback(null);            }        }    } /** * 异步任务,获取数据 *  */class GetListTask extends AsyncTask<String, Integer, Boolean> {@Overrideprotected Boolean doInBackground(String... params) {try {// 这里一般调用服务端接口获取一组轮播图片，下面是从百度找的几个图片imageUrls = new String[]{"http://image.zcool.com.cn/56/35/1303967876491.jpg","http://image.zcool.com.cn/59/54/m_1303967870670.jpg","http://image.zcool.com.cn/47/19/1280115949992.jpg","http://image.zcool.com.cn/59/11/m_1303967844788.jpg"};return true;} catch (Exception e) {e.printStackTrace();return false;}}@Overrideprotected void onPostExecute(Boolean result) {super.onPostExecute(result);if (result) {        initUI(context);}}}/** * ImageLoader 图片组件初始化 *  * @param context */public static void initImageLoader(Context context) {// This configuration tuning is custom. You can tune every option, you// may tune some of them,// or you can create default configuration by// ImageLoaderConfiguration.createDefault(this);// method.ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context).threadPriority(Thread.NORM_PRIORITY - 2).denyCacheImageMultipleSizesInMemory().discCacheFileNameGenerator(new Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO).writeDebugLogs() // Remove// for// release// app.build();// Initialize ImageLoader with configuration.ImageLoader.getInstance().init(config);}}

主界面Activity代码：

package com.example.slideshowdemo;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

完整工程代码下载地址：http://download.csdn.net/detail/catoop/8025409