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

来源：互联网发布：windows kit 8.1 编辑：程序博客网时间：2024/04/28 21:21

直奔主题：

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

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

先上个效果图：

项目代码结构截图：

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

[html] view plaincopy
<?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：

[html] view plaincopy
<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>  

自定义View 代码：

[java] view plaincopy
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.jar  
    private 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();  //此处调用，可能viewpager还是空，不妥？
        }  
          
    }  
    /** 
     * 开始轮播图切换 
     */  
    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:// 手指press状态，只在手势的时候有这个状态，直接setcurrentitem不会有这个状态
                isAutoPlay = false;  
                break;  
            case 2:// up状态，已经滑动完毕，手势和setcurrentitem都有这个状态  
                isAutoPlay = true;  
                break;  
            case 0:// up后，惯性滑动完毕，手势和setcurrentitem都有这个状态  
                // 当前为最后一张，则切换到第一张  
//如果不是手势滑，在定时器里已经有取模操作，
                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> {  
  
        @Override  
        protected 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;  
            }  
        }  
  
        @Override  
        protected 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代码：

[java] view plaincopy
package com.example.slideshowdemo;  
  
import android.app.Activity;  
import android.os.Bundle;  
  
public class MainActivity extends Activity {  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
    }  
  
}  

下面附上使用到的图片素材：

热点图1：

热点图2：

效果默认图片：（建议做一个灰色的不含有具体内容的默认加载图片，这里做demo就随便找了一个）

真正无限循环的viewpager参考：http://blog.csdn.net/lamp_zy/article/details/52442623

0 1