直奔主题:
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>
自定义View 代码:
- 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代码:
- 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