网络加载图片及轮播

最新推荐文章于 2021-12-24 20:37:07 发布

xuegang87

最新推荐文章于 2021-12-24 20:37:07 发布

阅读量911

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/u010906868/article/details/38724897

版权

随笔专栏收录该内容

2 篇文章 0 订阅

订阅专栏

现在这个功能已经很常见了，前一段时间项目中用到了，就想懒省事去网上找一个用，但是找了半天发现都不合适，没有办法只能自己来写一个了。好了废话讲完了现在切入正题，图片的轮播可以很好的展示自己的商品而且不用客户人为的滑动当然，手动一样是可以的。废话不多说了看代码。

既然用到ViewPager那么自然少不了的就是适配器，因为我们基本上没有做什么操作而且这个适配器比较简单所以先来写这个适配器，名字就叫MyPagerAdapter吧赖名好养活

转载请注明出处 http://blog.csdn.net/u010906868/article/details/38724897

public class MyPagerAdapter extends PagerAdapter {

	private List<ImageView> views;
	
	public MyPagerAdapter(List<ImageView> views){
		this.views=views;
	}
	
	@Override
	public int getCount() {
		return views.size();
	}
	//为了防止OOM
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		((ViewPager)container).removeView(views.get(position));
	}
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0==arg1;
	}
	
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		((ViewPager)container).addView(views.get(position));
		return views.get(position);
	}
}

怎么样简单吧没有任何特殊的处理。好了现在适配器就写好了，接下来我们来看以一下主的activity怎么写首先我们来看一下xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="115dp" >
        <android.support.v4.view.ViewPager
            android:id="@+id/myViewPager"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <LinearLayout 
            android:id="@+id/viewgroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="10dp"
            android:orientation="horizontal"
            />
    </RelativeLayout>

</LinearLayout>

文件中包含那一个viewpager和一个线性布局，这个线性的布局就是用来存放我们的小圆点的，最后就是主要的逻辑了。

我们是利用第三方的软件去加载图片的，你也可以自己写一个方法去网络加载图片，只不过是我们的项目中就是用的第三的软件 Universal_image_loader 这个软件还不错，不知道的看以去度娘这个很多的，既然要用人家那必须的先给与，那首先就是初始化initLoaderPic()，有兴趣的可以去接着点还有很多方法但是没有必要全部去写出来，根据自己项目中的需求去做，初始化好了以后那就要去请求图片了，必须先要有地址，我是照了几张图片地址放在这里，
然后去循环，用ImageLoader.getInstance().displayImage(urls[i], imageView);把每张图片都放入到一个imageview我这个人比较懒直接去new了一个view这里也可以去写一个布局然后将图片放到设定好的布局中，然后在放入imageview集合中去。根据图片去设定显示小圆点的数量，然后去开一个工作线程不断的去循环。

package com.example.myviewpagerloader;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.atomic.AtomicInteger;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;

import com.example.myviewpagerloader.adapter.MyPagerAdapter;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

public class MainActivity extends Activity {
	/**
	 * 存放图片的viewpager
	 * */
	private ViewPager myViewPager;
	/**
	 * viewpager的adapter
	 * */
	private MyPagerAdapter mAdapter;
	/**
	 * 存放imageview的集合
	 * */
	private List<ImageView> imageViews;
	private ImageView imageView;
	/**
	 * 在java中i++和++i都是线程不安安全的所以用AtomicInteger
	 * */
	private AtomicInteger mAtomicInteger=new AtomicInteger(0);
	/**
	 * 在图片上显示的小圆点
	 * */
	private LinearLayout viewGroup;
	/**
	 * 小圆点集合
	 * */
	private ImageView []groupViews;
	private ImageView groupView;
	
	private String[] urls = {
			"http://img3.imgtn.bdimg.com/it/u=1860704232,1469845107&fm=23&gp=0.jpg",
			"http://img0.imgtn.bdimg.com/it/u=3904680124,2574744294&fm=23&gp=0.jpg",
			"http://www.3761.com/uploads/allimg/c121015/13502QN360440-25A16.jpg",
			"http://pic12.nipic.com/20110211/1672496_110725381101_2.jpg",
			"http://img0.imgtn.bdimg.com/it/u=3101953750,132964490&fm=23&gp=0.jpg",
	};

	private Handler mHandler=new Handler(){
		public void handleMessage(android.os.Message msg) {
			myViewPager.setCurrentItem(msg.what);
		};
	};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		initLoaderPic();
	}

	/**
	 * 初始化imageloader
	 * */
	private void initLoaderPic() {
		DisplayImageOptions mImageOptions = new DisplayImageOptions.Builder()
				.showImageOnLoading(R.drawable.ic_launcher) // 设置加载过程中显示的图片
				.showImageForEmptyUri(R.drawable.ic_launcher)// 设置图片的链接地址为空的时候的加载的图片
				.showImageOnFail(R.drawable.ic_launcher) // 设置图片加载失败的时候的图片
				.cacheInMemory(true) // 设置是否加入缓存
				.cacheOnDisc(true) // 设置是否缓存到sd卡上去
				.bitmapConfig(Bitmap.Config.RGB_565) // 设置图片的解码类型，默认是ARGB_8888
				.imageScaleType(ImageScaleType.IN_SAMPLE_INT)// 设置图片以如何的编码方式显示（图像将被二次采用的整倍数）
				.build();

		ImageLoaderConfiguration mConfiguration = new ImageLoaderConfiguration.Builder(MainActivity.this)
		        .threadPriority(Thread.NORM_PRIORITY) // 设置线程池的数量
				.denyCacheImageMultipleSizesInMemory() // 不同大小图片只有一个缓存，默认是多个
				.memoryCacheSize(4 * 1024 * 1024) // 设置缓存的大小
				.tasksProcessingOrder(QueueProcessingType.LIFO)// 设置图片下载和显示的工作对列顺序
				.defaultDisplayImageOptions(mImageOptions)
				.build();

		ImageLoader.getInstance().init(mConfiguration);
		addView();
	}

	private void initView() {
		myViewPager = (ViewPager) findViewById(R.id.myViewPager);
		myViewPager.setOnPageChangeListener(new PagerListener());
		viewGroup=(LinearLayout)findViewById(R.id.viewgroup);
	}

	/**
	 * 获取图片并加入到集合中去
	 * */
	private void addView() {
		imageViews=new ArrayList<ImageView>();
		//如果你想要一个效果但是又不想在代码中实现，那么就可以去定义一个布局去加载。
		for(int i=0;i<urls.length;i++){
			 imageView=new ImageView(MainActivity.this);
			 imageView.setScaleType(ScaleType.FIT_XY);
			 ImageLoader.getInstance().displayImage(urls[i], imageView);
			 imageViews.add(imageView);
	  }
		//获取图片以后的才去设定小圆点的个数
		initCirclePoint();
		mAdapter=new MyPagerAdapter(imageViews);
		myViewPager.setAdapter(mAdapter);
		//这里呢是启动异步工作线程去不断的对图片进行转换
		new Thread(new Runnable() {
			
			@Override
			public void run() {
				while(true){
					mHandler.sendEmptyMessage(mAtomicInteger.get());
					atomicOption();
				}
			}
		}).start();
	}
	/**
	 * 设置要显示的小圆点
	 * */
	private void initCirclePoint(){
		groupViews=new ImageView[imageViews.size()];
		for(int i=0;i<groupViews.length;i++){
			groupView=new ImageView(MainActivity.this);
			groupView.setLayoutParams(new LayoutParams(10, 10));
			groupViews[i]=groupView;
			//初始化默认选择第一张
			if(i==0){
				groupViews[i].setBackgroundResource(R.drawable.point_p);
			}else{
				groupViews[i].setBackgroundResource(R.drawable.point_n);
			}
			//将小圆点放入到布局中去
			viewGroup.addView(groupViews[i]);
		}
		
	}
	private void atomicOption(){
		mAtomicInteger.incrementAndGet();
		if(mAtomicInteger.get()>groupViews.length-1){
			mAtomicInteger.addAndGet(-groupViews.length);
		}
		try {
			Thread.sleep(2000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	 
	
	class PagerListener implements OnPageChangeListener{
 
		@Override
		public void onPageScrollStateChanged(int arg0) {//页面状态改变的时候触发
			
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {//页面滚动的时候触发
		}
		@Override
		public void onPageSelected(int arg0) {
			//获取当前页面
			mAtomicInteger.getAndSet(arg0);
			for(int i=0;i<groupViews.length;i++){
				if(arg0==i){
					groupViews[i].setBackgroundResource(R.drawable.point_p);
				}else{
					groupViews[i].setBackgroundResource(R.drawable.point_n);
				}
			}
		}
		
	}

}

其实我觉得上边的注解还算是比较全的吧。还有就是一般的需求就是点击图片要进入到一个web页，不然这个功能就失去了它的意义，你可以将图片也存在一个集合或者数组中和图片的顺序一一对应这样当点击图片的时候我们拿到图片的索引自然也就拿到了对应地址的索引只需将索引位置的地址取出，以后的操作就随你了。现在fragment这么火你有的项目好几界面都会用到图片的轮播不能每个界面都写一遍吧，可以将这个写到一个fragment中，那个界面用就去引用。完事项目中用到就当记录一下能帮到你们自然好，不能呢，也没关系。哈哈....

源码下载