android学习-1-图片轮显及异步加载缓存

原创 2014年04月14日 22:38:43
   最近在做一个手机订餐软件,其中在推荐界面就需要一个图片轮显的,遂自己封装了一个控件,现将其分享给大家,第一次分享,有什么问题大家可以指出来,大家相互学习。
介绍:
  图片的轮显我在网上也找了很多的资料,实现的方式也有很多中,我选择的是ViewPager来实现。缓存图片用的开源的
Android-Universal-Image-Loader,废话不多说上代码。
代码:
先看ViewPager中的item对应的xml文件:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
<!-- 显示的图片 -->
    <ImageView
        android:id="@+id/paper_item_imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitXY" />
<!-- 加载图片时的ProgressBar -->
    <ProgressBar
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>


下面看ViewPager对应的xml文件:
<FrameLayout 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:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/guidePages"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    <!-- 用于显示下面的圆点 -->
    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="5dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>

</FrameLayout>

接下来看封装的控件代码:
package com.sh.test;

import java.util.ArrayList;

import com.example.test.R;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.assist.ImageLoadingListener;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Bundle;
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.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

public class Main extends FrameLayout {

	
	private ViewPager viewPager;
	/**
	 * 图片路径
	 */
	private ArrayList<String> pageImgUrlList;
	/**
	 * 包裹小圆点的LinearLayout
	 */
	private ViewGroup group;
	private LayoutInflater inflater;
	private Context context;
	/**
	 * 存放圆点
	 */
	private ImageView[] imageViews = null;
	/**
	 * 自定义的ViewPager数据适配器
	 */
	private PagerAdapter pagerAdapter;
	/**
	 * 图片缓存设置
	 */
	private DisplayImageOptions options;
	/**
	 * 用于图片异步加载
	 */
	private ImageLoader imageLoader;
	/**
	 * 当前显示第几张图片
	 */
	private int cur_index=0;
	/**
	 * 用于控制自动切换图片
	 */
	private Handler handler;
	/**
	 * @Title:
	 * @Description: TODO(这里用一句话描述这个方法的作用)
	 * @最后修改人:石浩
	 * @最后修改时间:2014-4-13 下午12:25:09
	 * @param context
	 *            对方法的参数进行描述
	 */
	public Main(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		this.context = context;
		inflater = LayoutInflater.from(context);
		inflater.inflate(R.layout.pager_layout, this, true);
		init();
	}

	public Main(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		this.context = context;
		inflater = LayoutInflater.from(context);
		inflater.inflate(R.layout.pager_layout, this, true);
		init();
	}

	/**    
	  * @Title: 
	  * @Description: TODO(传入图片的地址) 
	  * @最后修改人:石浩
	  * @最后修改时间:2014-4-14 下午9:47:21
	  * @param pageImgUrl 图片地址
	  */
	public void setPageImgUrlList(ArrayList<String> pageImgUrl) {
		pageImgUrlList.clear();
		pageImgUrlList = pageImgUrl;
		pagerAdapter.notifyDataSetChanged();
		addCircle();
	}

	/**    
	  * @Title: 
	  * @Description: TODO(初始化相关的东西) 
	  * @最后修改人:石浩
	  * @最后修改时间:2014-4-14 下午9:48:19 对方法的参数进行描述
	  */
	public void init() {
		viewPager = (ViewPager) findViewById(R.id.guidePages);
		group = (ViewGroup) findViewById(R.id.viewGroup);
		pageImgUrlList = new ArrayList<String>();
		//初始化图片加载器,需要在application中配置
		imageLoader = ImageLoader.getInstance();
		options = new DisplayImageOptions.Builder()
				.showStubImage(R.drawable.no1)
				// 设置图片在下载期间显示的图片
				.showImageForEmptyUri(R.drawable.ic_launcher)
				// 设置图片Uri为空或是错误的时候显示的图片
				.showImageOnFail(R.drawable.ic_launcher)
				// 设置图片加载/解码过程中错误时候显示的图片
				.cacheOnDisc()
				// 设置下载的图片是否缓存在SD卡中
				.cacheInMemory()
				.imageScaleType(ImageScaleType.EXACTLY_STRETCHED)// 设置图片以如何的编码方式显示
				.bitmapConfig(Bitmap.Config.RGB_565)// 设置图片的解码类型
				.resetViewBeforeLoading()// 设置图片在下载前是否重置,复位
				.displayer(new RoundedBitmapDisplayer(20))// 是否设置为圆角,弧度为多少
				.displayer(new FadeInBitmapDisplayer(100))// 是否图片加载好后渐入的动画时间
				.build();// 构建完成

		pagerAdapter = new ImagePagerAdapter();
		viewPager.setAdapter(pagerAdapter);
		viewPager.setOnPageChangeListener(new GuidePageChangeListener());
		//控制显示哪一个图片
		handler=new Handler(){
			@Override
			public void handleMessage(Message msg) {
				viewPager.setCurrentItem(msg.arg1);
			}
		};
		//用一个单独的线程来控制图片切换
		new Thread(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				
				while (true) {
					if (pageImgUrlList!=null&&pageImgUrlList.size()>0) {
						if (cur_index>=pageImgUrlList.size()) {
							cur_index=0;
						}
						Message msg=new Message();
						msg.arg1=cur_index++;
						try {
							Thread.sleep(3000);
						} catch (InterruptedException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
						handler.sendMessage(msg);
					}
				}
				
			}
		}).start();
	}

	
	
	/**    
	  * @Title: 
	  * @Description: TODO(根据传进来的图片地址数,生成一下圆点) 
	  * @最后修改人:石浩
	  * @最后修改时间:2014-4-14 下午9:52:10 对方法的参数进行描述
	  */
	public void addCircle() {
		if (imageViews != null) {
			imageViews = null;
		}
		imageViews = new ImageView[pageImgUrlList.size()];
		ImageView imageView;
		group.removeAllViews();
		for (int i = 0; i < pageImgUrlList.size(); i++) {
			LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams(
					LinearLayout.LayoutParams.WRAP_CONTENT,
					LinearLayout.LayoutParams.WRAP_CONTENT);
			// 设置每个小圆点距离左边的间距
			margin.setMargins(10, 0, 0, 0);
			imageView = new ImageView(context);
			// 设置每个小圆点的宽高
			imageView.setLayoutParams(new LayoutParams(15, 15));
			imageViews[i] = imageView;
			if (i == 0) {
				// 默认选中第一张图片
				imageViews[i]
						.setBackgroundResource(R.drawable.page_indicator_focused);
			} else {
				// 其他图片都设置未选中状态
				imageViews[i]
						.setBackgroundResource(R.drawable.page_indicator_unfocused);
			}
			Log.i("111", "addview");
			group.addView(imageViews[i], margin);
		}
	}

	// 指引页面数据适配器
	private class ImagePagerAdapter extends PagerAdapter {

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			((ViewPager) container).removeView((View) object);
		}

		@Override
		public void finishUpdate(View container) {
		}

		@Override
		public int getCount() {
			return pageImgUrlList.size();
		}

		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			View imageLayout = inflater.inflate(R.layout.paper_item_layout,
					view, false);
			final ProgressBar progressBar=(ProgressBar)imageLayout.findViewById(R.id.loading);
			ImageView imageView = (ImageView) imageLayout
					.findViewById(R.id.paper_item_imageView1);
			// imageView.setBackgroundResource(R.drawable.no1);
			imageLoader.displayImage(pageImgUrlList.get(position), imageView,
					options, new ImageLoadingListener() {

						@Override
						public void onLoadingStarted(String imageUri, View view) {
							// TODO Auto-generated method stub
							
							progressBar.setVisibility(VISIBLE);
						}

						@Override
						public void onLoadingFailed(String imageUri, View view,
								FailReason failReason) {
							// TODO Auto-generated method stub
							Log.i("111", "onLoadingFailed:"+failReason.toString());
							progressBar.setVisibility(GONE);
						}

						@Override
						public void onLoadingComplete(String imageUri,
								View view, Bitmap loadedImage) {
							// TODO Auto-generated method stub
							Log.i("111", "onLoadingComplete");
							progressBar.setVisibility(GONE);
						}

						@Override
						public void onLoadingCancelled(String imageUri,
								View view) {
							// TODO Auto-generated method stub
							Log.i("111", "onLoadingCancelled");
							progressBar.setVisibility(GONE);
						}
					});
			((ViewPager) view).addView(imageLayout, 0);
			return imageLayout;
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view.equals(object);
		}

		@Override
		public void restoreState(Parcelable state, ClassLoader loader) {
		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View container) {
		}
	}

	// 指引页面更改事件监听器
	class GuidePageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub

		}

		@Override
		public void onPageSelected(int arg0) {
			// 遍历数组让当前选中图片下的小圆点设置颜色
			for (int i = 0; i < imageViews.length; i++) {
				imageViews[arg0]
						.setBackgroundResource(R.drawable.page_indicator_focused);

				if (arg0 != i) {
					imageViews[i]
							.setBackgroundResource(R.drawable.page_indicator_unfocused);
				}
			}
		}
	}
}

接下来看如何来使用:
package com.sh.test;

import java.util.ArrayList;

import com.example.test.R;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	private Main main;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		main=(Main)findViewById(R.id.main1);
		ArrayList<String> arrayList= new ArrayList<String>();
//		for (int i = 0; i < 5; i++) {
//			arrayList.add(i, "123456");
//		}
		arrayList.add(0, "http://p2.image.hiapk.com/uploads/allimg/140128/23-14012QG455-51.jpg");
		arrayList.add(1, "http://p2.image.hiapk.com/uploads/allimg/140128/23-14012QG454.jpg");
		arrayList.add(2, "http://p1.image.hiapk.com/uploads/allimg/140128/23-14012QG454-50.jpg");
		arrayList.add(3, "http://p5.image.hiapk.com/uploads/allimg/140128/23-14012QG454-51.jpg");
		arrayList.add(4, "http://pic1.desk.chinaz.com/file/201210/2/weimeixiaomikpsj2_p.jpg");
		arrayList.add(5, "http://ubmcmm.baidustatic.com/media/v1/0f0002sfQ1sNCG8_z1hzRf.gif");
		arrayList.add(6, "http://www.kole8.com/handset_desktop/desk_file-11/15/35/2012/4/201241913135814.jpg");
		arrayList.add(7, "http://p5.image.hiapk.com/uploads/allimg/120710/1113034162-1.jpg");
		arrayList.add(8, "http://p4.image.hiapk.com/uploads/allimg/140320/9-140320195532.jpg");
		arrayList.add(9, "http://p4.image.hiapk.com/uploads/allimg/140210/23-140210141J2-50.jpg");
		arrayList.add(10, "http://p1.image.hiapk.com/uploads/allimg/140128/23-14012QG456-50.jpg");
		main.setPageImgUrlList(arrayList);
	}

}

下面还有一个图片缓存比较重要的,大家可以自行谷哥、度娘Android-Universal-Image-Loader。它使用时必须在application中进行全局设置。
下面是代码:
/**
 * @ClassName: MyApplication
 * @Description: TODO(这里用一句话描述这个类的作用)
 * @author: 石浩
 * @date: 2014-4-14 下午1:55:29
 * @最后修改人:石浩
 * @最后修改时间:2014-4-14 下午1:55:29
 * 
 * 
 */
public class MyApplication extends Application {

	@Override
	public void onCreate() {
		super.onCreate();
		initImageLoader(getApplicationContext());
	}

	public static void initImageLoader(Context context) {

		File cacheDir = StorageUtils.getOwnCacheDirectory(context,
				"/mnt/sdcard/imageloader/Cache");
		ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
				context)
				.threadPriority(Thread.NORM_PRIORITY - 2)
				.threadPoolSize(5)
				// 线程池内加载的数量
				.discCache(new UnlimitedDiscCache(cacheDir))
				// 缓存路径
				.discCacheFileCount(500)
				// 缓存的文件数量
				.denyCacheImageMultipleSizesInMemory()
				.discCacheFileNameGenerator(new Md5FileNameGenerator())
				// 将保存的时候的URI名称用MD5 加密
				.tasksProcessingOrder(QueueProcessingType.LIFO)
				.imageDownloader(
						new BaseImageDownloader(context, 5 * 1000, 30 * 1000)) // connectTimeout
																				// (5
																				// s),
																				// readTimeout
																				// (30
																				// s)超时时间
				.enableLogging().build();
		// Initialize ImageLoader with configuration.
		ImageLoader.getInstance().init(config);
	}
}

激动人心的时刻到来了下面看运行截图:


最简单的JS图片轮显-实现代码

Jquery版 function img_z(id1,id2,id3){ var speed=15//速度数值越大速度越慢 var AAA=$(id1); var BBB=$(id2)...
  • qq_36617521
  • qq_36617521
  • 2016年11月19日 10:08
  • 801

(源码分析)Glide(图片异步加载缓存库)的方法介绍

本系列带将一步步带领大家揭开Glide的神秘面纱 文章来源:http://blog.csdn.net/u011733020。 Glide 在开源中国上的介绍Glide 的详细介绍:请点这里Glide ...
  • u011733020
  • u011733020
  • 2016年08月30日 13:12
  • 3447

浅谈Android中的异步加载之ListView中图片的缓存及优化三

隔了很久没写博客,现在必须快速脉动回来。今天我还是接着上一个多线程中的异步加载系列中的最后一个使用异步加载实现ListView中的图片缓存及其优化。具体来说这次是一个综合Demo.但是个人觉得里面还算...
  • u013064109
  • u013064109
  • 2016年06月25日 02:56
  • 6519

广告轮显的代码

            var focus_width=380;          var focus_height=130;          var text_height=0;         ...
  • fjgysai
  • fjgysai
  • 2007年10月12日 17:09
  • 974

Android-GridView 实例(异步加载,LruCache缓存,图片请求,图片压缩)

1.回顾    上篇 学习了,关于 异步任务的知识; 2.重点    (1)GridView Adapter实现    (2)LruCache 缓存实现    (3)异步加载 Thread ...
  • LABLENET
  • LABLENET
  • 2015年09月08日 23:51
  • 1426

JavaScrip图片轮显

CSS代码:#transdiv {    position:relative;    margin:0px auto;    overflow:hidden;    border:1px solid ...
  • skykings520
  • skykings520
  • 2009年12月30日 10:11
  • 202

图片轮显脚本

var sBaseStr="filter : progid:DXImageTransform.Microsoft.GradientWipe ( ";var oParentDiv,oTextDiv;va...
  • mjh11310
  • mjh11310
  • 2007年05月18日 09:32
  • 475

图片无缝轮显

 /" target="_blank">http://www.it365cn.com"> logo_1.gif" border="0">src="ima...
  • flamelp
  • flamelp
  • 2006年06月22日 12:54
  • 906

自写Js+CSS轮显效果

JS图片轮显切换 *{ margin:0; padding:0} #wapper{ position:relative;height:280px; width:316px; overflow:...
  • qq_35546160
  • qq_35546160
  • 2016年07月11日 11:29
  • 245

定时器轮显图片

图: /cc/core/softphone/image/progressbar_0.png' style='width:89px;height:25px;' />     轮显功能函数:   ...
  • u010159229
  • u010159229
  • 2015年08月26日 16:33
  • 21
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android学习-1-图片轮显及异步加载缓存
举报原因:
原因补充:

(最多只允许输入30个字)