Android 高级UI设计笔记06:仿微信图片选择器(转载)

仿微信图片选择器:

一、项目整体分析:

1. Android加载图片的3个目标:

(1)尽可能的去避免内存溢出。

  a. 根据图片的显示大小去压缩图片

  b. 使用缓存对我们图片进行管理(LruCache)

(2)用户操作UI控件必须充分的流畅。

  a. getView里面尽可能不去做耗时的操作(异步加载 + 回调显示)

(3)用户预期显示的图片尽可能的快(图片的加载策略的选择,一般选择是LIFO)。

  a. LIFO

2. 定义一个Imageloader完成上面1中的3个目标:

Imageloader

getView()

{

    url   -> Bitmap

    url   -> LruCache 查找

                           ->找到返回

         ->找不到 url -> Task -> TaskQueue且发送一个通知去提醒后台轮询线程。

}

 •Task ->run() {根据url加载图片:

                  1. 获得图片显示的大小

                  2. 使用Options对图片进行压缩

                  3. 加载图片且放入LruCache

           }

   后台轮询线程

    TaskQueue ->Task ->将Task交给线程池去执行(执行run方法)

      一般情况下:(我们没有采用,效率低)

     new  Thread() {

                    run() {

                             while(true) {}

                     }

      }.start();

     这里这种场景,采用Handler + looper + Message:

    

3. 项目最终的效果:

(1)默认显示图片最多的文件夹图片,以及底部显示图片总数量。如下图:

Android 高级UI设计笔记06:仿微信图片选择器(转载)

(2)点击底部,弹出popupWindow,popupWindow包含所有含有图片的文件夹,以及显示每个文件夹中图片数量。如下图:

      (注:此时Activity变暗)

Android 高级UI设计笔记06:仿微信图片选择器(转载)

(3)选择任何文件夹,进入该文件夹图片显示,可以点击选择图片,当然了,点击已选择的图片则会取消选择。如下图:

    (注:选中图片变暗)

Android 高级UI设计笔记06:仿微信图片选择器(转载)

Android 高级UI设计笔记06:仿微信图片选择器(转载)

二、代码实践 - 图片缓存、获取、展示

1.  打开Eclipse,新建一个Android工程,命名为"Imageloader",如下:

Android 高级UI设计笔记06:仿微信图片选择器(转载)

2. 新建一个包"com.himi.imageloader.util",编写一个图片加载工具类,如下:

Android 高级UI设计笔记06:仿微信图片选择器(转载)

ImageLoader.java,如下:

 package com.himi.imageloader.util;

 import java.lang.reflect.Field;
import java.util.LinkedList;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.Semaphore; import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapFactory.Options;
import android.os.Handler;
import android.os.Looper;
import android.os.Message;
import android.util.DisplayMetrics;
import android.util.LruCache;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView; /**
* 图片加载类
* 这个类使用单例模式
* @author hebao
*
*/
public class ImageLoader {
private static ImageLoader mInstance;
/**
* 图片缓存的核心对象
* 管理我们所有图片加载的所需的内存
*/
private LruCache<String, Bitmap> mLruCache;
/**
* 线程池
* 执行一些我们加载图片的任务
*/
private ExecutorService mThreadPool;
/**
* 线程池中默认线程数
*/
private static final int DEAFULT_THREAD_COUNT = 1; /**
* 队列的调度方式
*/
private Type mType = Type.LIFO;
/**
* 任务队列
* 任务队列提供给线程池取任务的
*/
private LinkedList<Runnable> mTaskQueue;
/**
* 后台轮询线程
*/
private Thread mPoolThread;
/**
* 后台轮询线程的handler
*/
private Handler mPoolThreadHandler;
/**
* UI线程的handler
* 用于:更新ImageView
*/
private Handler mUIHandler;
/**
* mPoolThreadHandler的信号量,防止使用mPoolThreadHandler的时候其本身没有初始化完毕,报空指针异常
*/
private Semaphore mSemaphorePoolThreadHandler = new Semaphore(0);
/**
* 任务线程信号量,保证线程池真正做到LIFO
*/
private Semaphore mSemaphoreThreadPool; /**
*
* 调度方式
*FIFO:先入先出
*LIFO:后入先出
*/ public enum Type {
FIFO,LIFO;
} private ImageLoader(int threadCount, Type type) {
init(threadCount, type);
} /**
* 初始化操作
* @param threadCount
* @param type
*/
private void init(int threadCount, Type type) {
//后台轮询线程初始化
mPoolThread = new Thread() {
@Override
public void run() {
Looper.prepare();
mPoolThreadHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
//线程池取出一个任务进行执行
mThreadPool.execute(getTask());
try {
mSemaphoreThreadPool.acquire();
} catch (InterruptedException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
}
};
//释放一个信号量
mSemaphorePoolThreadHandler.release();
//Looper不断进行轮询
Looper.loop();
};
};
mPoolThread.start(); //获取我们应用的最大可用内存
int maxMemory = (int) Runtime.getRuntime().maxMemory();
int cacheMemory = maxMemory / 8;
//图片缓存初始化
mLruCache = new LruCache<String, Bitmap>(cacheMemory) {
/**
* 测量每一个Bitmap图片的大小
*/
@Override
protected int sizeOf(String key, Bitmap value) {
// 每一个Bitmap图片的大小 = 每一行字节数 * 高度
return value.getRowBytes() * value.getHeight();
}
}; //创建线程池
mThreadPool = Executors.newFixedThreadPool(threadCount);
mTaskQueue = new LinkedList<Runnable>();
mType = type; //初始化信号量
mSemaphoreThreadPool = new Semaphore(threadCount);
} /**
* 从任务队列中取出一个方法
* @return
*/
private Runnable getTask() {
if(mType == Type.FIFO) {
return mTaskQueue.removeFirst();
}else if(mType == Type.LIFO) {
return mTaskQueue.removeLast();
}
return null;
} public static ImageLoader getInstance() {
if(mInstance == null) {
synchronized (ImageLoader.class) {
if(mInstance == null) {
mInstance = new ImageLoader(DEAFULT_THREAD_COUNT, Type.LIFO);
}
} }
return mInstance;
} public static ImageLoader getInstance(int threadCount, Type type) {
if(mInstance == null) {
synchronized (ImageLoader.class) {
if(mInstance == null) {
mInstance = new ImageLoader(threadCount, type);
}
} }
return mInstance;
} /**
* 根据path为ImageView是设置图片
* @param path
* @param imageView
*/
public void loadImage(final String path, final ImageView imageView ) {
imageView.setTag(path);//设置Tag主要是为了校验,防止图片的混乱
if(mUIHandler == null) {
mUIHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
//获取得到图片,为imageview回调设置图片
ImgBeanHolder holder = (ImgBeanHolder) msg.obj;
Bitmap bm = holder.bitmap;
ImageView imageview = holder.imageView;
String path = holder.path;
/**
* 将path和getTag存储路径进行比较
* 如果不比较,就会出现我们滑动到第二张图片,但是显示的还是第一张的图片
* 这里我们绑定imageview和path就是为了防止这种情况
*/
if(imageview.getTag().toString().equals(path)) {
imageview.setImageBitmap(bm);
} };
};
}
//根据path在缓存中获取bitmap
Bitmap bm = getBitmapFromLruCache(path);
if(bm != null) {
refreashBitmap(path, imageView, bm);
} else {//内存中没有图片,加载图片到内存
addTasks(new Runnable() {
public void run() {
/**加载图片
* 图片的压缩
*/
//1. 获得图片需要显示的大小
ImageSize imageSize = getImageViewSize(imageView);
//2. 压缩图片
Bitmap bm = decodeSampleBitmapFromPath(path,imageSize.width,imageSize.height);
//3. 把图片加载到缓存 (一定要记得)
addBitmapToLruCache(path,bm);
refreashBitmap(path, imageView, bm);
//每次线程任务加载完图片,之后释放一个信号量,即:信号量-1,此时就会寻找下一个任务(根据FIFO/LIFO不同的策略取出任务)
mSemaphoreThreadPool.release();
} });
}
} public void refreashBitmap(final String path,
final ImageView imageView, Bitmap bm) {
Message message = Message.obtain();
ImgBeanHolder holder = new ImgBeanHolder();
holder.bitmap = bm;
holder.path = path;
holder.imageView = imageView; message.obj = holder;
mUIHandler.sendMessage(message);
} /**
* 将图片加入缓存LruCache
* @param path
* @param bm
*/
private void addBitmapToLruCache(String path, Bitmap bm) {
if(getBitmapFromLruCache(path) == null) {
if(bm != null) {
mLruCache.put(path, bm);
}
} } /**
* 根据图片需要显示的宽和高,对图片进行压缩
* @param path
* @param width
* @param height
* @return
*/
private Bitmap decodeSampleBitmapFromPath(String path,
int width, int height) {
//获取图片的宽和高,但是不把图片加载到内存中
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds =true;//不把图片加载到内存中
BitmapFactory.decodeFile(path, options); options.inSampleSize = caculateInSampleSize(options,width, height);//计算获取压缩比
//使用获取到的inSampleSize再次解析图片
options.inJustDecodeBounds =false;//加载图片到内存
Bitmap bitmap = BitmapFactory.decodeFile(path, options); return bitmap;
} /**
*根据需求的宽和高,以及图片实际的宽和高,计算inSampleSize
* @param options
* @param width
* @param height
* @return inSampleSize 压缩比
*/
private int caculateInSampleSize(Options options, int reqWidth, int reqHeight) {
int width = options.outWidth;
int height = options.outHeight; int inSampleSize = 1;
if(width>reqWidth || height > reqHeight) {
int widthRadio = Math.round(width*1.0f / reqWidth);
int heightRadio = Math.round(height*1.0f / reqHeight); inSampleSize = Math.max(widthRadio, heightRadio);
} return inSampleSize;
} /**
* 根据ImageView获取适当的压缩的宽和高
* @param imageView
* @return
*/
protected ImageSize getImageViewSize(ImageView imageView) {
ImageSize imageSize = new ImageSize();
DisplayMetrics displayMetrics = imageView.getContext().getResources().getDisplayMetrics();
LayoutParams lp = imageView.getLayoutParams(); int width = imageView.getWidth();//获取imageview的实际宽度
if(width<=0) {
width = lp.width;//获取imageview在layout中声明的宽度
}
if(width<=0) {
width = getImageViewFieldValue(imageView, "mMaxWidth");//利用反射,检测获得最大值
}
if(width<=0) {
width = displayMetrics.widthPixels;
} int height = imageView.getHeight();//获取imageview的实际高度
if(height<=0) {
height = lp.height;//获取imageview在layout中声明的高度
}
if(height<=0) {
height = getImageViewFieldValue(imageView, "mMaxHeight");//利用反射,检测获得最大值
}
if(height<=0) {
height = displayMetrics.heightPixels;
} imageSize.width = width;
imageSize.height = height;
return imageSize;
}; /**
*
* 通过反射获取imageview的某个属性值
* @param object
* @param fieldName
* @return
* 由于方法getMaxHeight是API16以上的才能使用,这里我们用反射使用这个方法
*/
private static int getImageViewFieldValue(Object object, String fieldName) {
int value=0;
try {
Field field = ImageView.class.getDeclaredField(fieldName);
field.setAccessible(true); int fieldValue = field.getInt(object);
if (fieldValue > 0 && fieldValue < Integer.MAX_VALUE) {
value = fieldValue;
}
} catch (Exception e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
return value;
} /**
* 添加任务到任务队列,交给线程池执行
* @param runnable
*/
@SuppressLint("NewApi")
private synchronized void addTasks(Runnable runnable) {//synchronized同步代码,防止多个线程进来出现死锁
mTaskQueue.add(runnable);
//if(mPoolThreadHandler == null) wait();
//确保我们在使用mPoolThreadHandler之前,我们初始化完毕mPoolThreadHandler(不为空),这里引入信号量
try {
if(mPoolThreadHandler == null) {
mSemaphorePoolThreadHandler.acquire();
}
} catch (InterruptedException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
mPoolThreadHandler.sendEmptyMessage(0x110); } /**
* 根据path在缓存中获取bitmap
* @param key
* @return
*/
private Bitmap getBitmapFromLruCache(String key) {
// TODO 自动生成的方法存根
return mLruCache.get(key);
} /**
* 压缩图片之后的宽和高
* @author Administrator
*
*/
private class ImageSize {
int width;
int height;
} private class ImgBeanHolder {
Bitmap bitmap;
ImageView imageView;
String path;
} }

三、代码实践 - UI、UI适配器

1. 布局文件设计,首先我们从美工那边获得布局设计需要的图片,如下:

Android 高级UI设计笔记06:仿微信图片选择器(转载)

来到activity_main.xml,如下:

 <RelativeLayout 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"
tools:context="com.himi.imageloader.MainActivity" > <!--
android:numColumns="3" 设置显示的列数
android:stretchMode="columnWidth" 缩放与列宽大小同步
android:cacheColorHint="@android:color/transparent" 自定义GridView拖动背景色
android:listSelector="@android:color/transparent" 选中item,item显示透明
--> <GridView
android:id="@+id/id_gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="@android:color/transparent"
android:horizontalSpacing="3dp"
android:listSelector="@android:color/transparent"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="3dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#ee000000"
android:clipChildren="true"
android:id="@+id/id_bottom_ly"
>
<TextView
android:id="@+id/id_dir_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:paddingLeft="10dp"
android:text="所有图片"
android:textColor="@android:color/white"
/>
<TextView
android:id="@+id/id_dir_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="10dp"
android:text="100张"
android:textColor="@android:color/white"
/> </RelativeLayout> </RelativeLayout>

显示布局效果如下:

Android 高级UI设计笔记06:仿微信图片选择器(转载)

来到item_gridview.xml,如下:

 <RelativeLayout 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"
tools:context="com.himi.imageloader.MainActivity" > <!-- android:scaleType="centerCrop" 防止图片变形 --> <ImageView
android:id="@+id/id_item_image"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="@drawable/pictures_no" /> <ImageButton
android:id="@+id/id_item_select"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
android:background="@null"
android:src="@drawable/picture_unselected"
/> </RelativeLayout>

布局效果如下:

Android 高级UI设计笔记06:仿微信图片选择器(转载)

2. 这里我们首先对手机中图片进行扫描,拿到图片数量最多的,直接显示在GridView上;并且扫描结束,得到一个所有包含图片的文件夹信息的集合。为了便于存储手机中所有文件夹信息,我们单独创建一个Bean实体类,命名为"FolderBean",新建包com.himi.imageloader.bean,将这个类放在里面,如下:

 package com.himi.imageloader.bean;

 /**
* FolderBean :图片的文件夹信息类
*
* 注意:
* 用来存储当前文件夹的路径,当前文件夹包含多少张图片,以及第一张图片路径用于做文件夹的图标;
* 注:文件夹的名称,我们在set文件夹的路径的时候,自动提取,仔细看下setDir这个方法.
*
* @author hebao
*
*/ public class FolderBean {
/**
* 图片的文件夹路径
*/
private String dir; /**
* 第一张图片的路径
*/
private String firstImgPath; /**
* 文件夹的名称
*/
private String name; /**
* 图片的数量
*/
private int count; public String getDir() {
return dir;
} public void setDir(String dir) {
this.dir = dir;
int lastIndexOf = this.dir.lastIndexOf("/");
this.name = this.dir.substring(lastIndexOf);
} public String getFirstImgPath() {
return firstImgPath;
} public void setFirstImgPath(String firstImgPath) {
this.firstImgPath = firstImgPath;
} public String getName() {
return name;
} public int getCount() {
return count;
} public void setCount(int count) {
this.count = count;
} }

 3. 接下来自然要说到扫描手机图片的代码,在MainActivity中,如下:

     @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initDatas();
initEvent();
} private void initView() {
mGridView = (GridView) findViewById(R.id.id_gridView);
mBottomLy = (RelativeLayout) findViewById(R.id.id_bottom_ly);
mDirName = (TextView) findViewById(R.id.id_dir_name);
mDirCount = (TextView) findViewById(R.id.id_dir_count); } /**
* 利用ContentProvider扫描手机中的图片,此方法在运行在子线程中 完成图片的扫描,最终获得jpg最多的那个文件夹
*/
private void initDatas() { if (!Environment.getExternalStorageState().equals(
Environment.MEDIA_MOUNTED)) {
Toast.makeText(this, "当前存储卡不可用", Toast.LENGTH_SHORT).show();
return;
}
/**
* 显示进度条
*/
mProgressDialog = ProgressDialog.show(this, null, "正在加载……");
/**
* 扫描手机中所有的图片,很明显这是一个耗时的操作,所以我们不能在UI线程中,采用子线程.
* 扫描得到的文件夹及其图片信息 在 List<FolderBean> mFolderBeans存储.
*/
new Thread() {
public void run() {
Uri mImgUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
ContentResolver cr = MainActivity.this.getContentResolver();
//只查询jpeg和png的图片
Cursor cursor = cr.query(mImgUri, null,
MediaStore.Images.Media.MIME_TYPE + "? or"
+ MediaStore.Images.Media.MIME_TYPE + "?",
new String[] { "image/jpeg", "image/png", },
MediaStore.Images.Media.DATE_MODIFIED); /**
* 存放已经遍历的文件夹路径,防止重复遍历
*/
Set<String> mDirPaths = new HashSet<String>();
/**
* 遍历手机图片
*/
while (cursor.moveToNext()) {
// 获取图片的路径
String path = cursor.getString(cursor
.getColumnIndex(MediaStore.Images.Media.DATA));
// 获取该图片的父路径名
File parentFile = new File(path).getParentFile();
if (parentFile == null) {
continue;
}
String dirPath = parentFile.getAbsolutePath(); FolderBean folderBean = null;
// 利用一个HashSet防止多次扫描同一个文件夹(不加这个判断,图片多起来还是相当恐怖的~~)
if (mDirPaths.contains(dirPath)) {
continue;
} else {
mDirPaths.add(dirPath);
// 初始化imageFloder
folderBean = new FolderBean(); //图片的文件夹路径
folderBean.setDir(dirPath);
//第一张图片的路径
folderBean.setFirstImgPath(path);
}
//有些图片比较诡异~~;无法显示,这里加判断,防止空指针异常
if (parentFile.list() == null) {
continue;
} int picSize = parentFile.list(new FilenameFilter() { public boolean accept(File dir, String filename) {
if (filename.endsWith(".jpg")
|| filename.endsWith(".jpeg")
|| filename.endsWith(".png")) {
return true;
}
return false;
}
}).length;
//图片的数量
folderBean.setCount(picSize);
mFolderBeans.add(folderBean);
/**
* 如果此时扫描到图片文件夹中图片数量最多,则赋值给mMaxCount,mCurrentDir
*/
if (picSize > mMaxCount) {
mMaxCount = picSize;
mCurrentDir = parentFile;
} }
//关闭游标
cursor.close();
// 通知handler扫描图片完成
mHandler.sendEmptyMessage(DATA_LOADED); };
}.start(); }

initView就不看了,都是些findViewById;

initDatas主要就是扫描图片的代码,我们开启了一个Thread进行扫描,扫描完成以后,我们得到了图片最多文件夹路径(mCurrentDir),手机中图片数量(totalCount);以及所有包含图片文件夹信息(mFolderBeans)

然后在MainActivity,我们通过handler发送消息,在handleMessage里面:

()创建GridView的适配器,为我们的GridView设置适配器,显示图片;

()有了mFolderBeans,就可以创建我们的popupWindow了;

 private Handler mHandler = new Handler() {

         public void handleMessage(android.os.Message msg) {
if (msg.what == DATA_LOADED) {
mProgressDialog.dismiss();
// 绑定数据到GridView
data2View();
// 初始化PopupWindow
initDirPopupWindow();
}
}
};

可以看到分别干了上述的两件事:

()在MainActivity中,data2View如下:

data2View就是我们当前Activity上所有的View设置数据了。

 /**
* 为View绑定数据
*/
private void data2View() {
if (mCurrentDir == null) {
Toast.makeText(this, "未扫描到任何图片", Toast.LENGTH_SHORT).show();
return;
} mImgs = Arrays.asList(mCurrentDir.list()); /**
* 可以看到文件夹的路径和图片的路径分开保存,极大的减少了内存的消耗;
*/
mImgAdapter = new ImageAdapter(this, mImgs,
mCurrentDir.getAbsolutePath());
mGridView.setAdapter(mImgAdapter); mDirCount.setText(mMaxCount + "");
mDirName.setText(mCurrentDir.getName()); };

()看到上面(1)还用到了一个Adapter(for GridView),我们自定义一个适配器ImageAdapter继承自BaseAdapter,它和MainActivity所处一个包下,如下

 package com.himi.imageloader;

 import java.util.HashSet;
import java.util.List;
import java.util.Set; import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageButton;
import android.widget.ImageView; import com.himi.imageloader.util.ImageLoader;
import com.himi.imageloader.util.ImageLoader.Type; public class ImageAdapter extends BaseAdapter {
/**
* 用户选择的图片,存储为图片的完整路径
*/
private static Set<String> mSelectedImg = new HashSet<String>();
/**
* 文件夹路径
*/
private String mDirPath;
private List<String> mImgPaths;
private LayoutInflater mInflater;
//分开存储文件目录,和文件名。节省内存
public ImageAdapter(Context context, List<String> mDatas, String dirPath) {
this.mDirPath = dirPath;
this.mImgPaths = mDatas;
mInflater = LayoutInflater.from(context);
} public int getCount() {
return mImgPaths.size();
} public Object getItem(int position) {
return mImgPaths.get(position);
} public long getItemId(int position) {
return position;
} public View getView(final int position, View convertView, ViewGroup parent) {
final ViewHolder viewHolder;
if(convertView == null) {
convertView = mInflater.inflate(R.layout.item_gridview, parent,false); viewHolder = new ViewHolder();
viewHolder.mImg = (ImageView) convertView.findViewById(R.id.id_item_image);
viewHolder.mSelect = (ImageButton) convertView.findViewById(R.id.id_item_select);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
} /**
* 重置状态,如果不重置第一次选中,第二次还会复用之前的,这样就会产生错乱
*/
viewHolder.mImg.setImageResource(R.drawable.pictures_no);
viewHolder.mSelect.setImageResource(R.drawable.picture_unselected);
viewHolder.mImg.setColorFilter(null); ImageLoader.getInstance(3, Type.LIFO).loadImage(mDirPath+"/"+mImgPaths.get(position),
viewHolder.mImg);
final String filePath = mDirPath+"/"+mImgPaths.get(position); // 设置ImageView的点击事件
viewHolder.mImg.setOnClickListener(new OnClickListener() {
// 选择,则将图片变暗,反之则反之
public void onClick(View v) {
//已经被选择
if(mSelectedImg.contains(filePath)) {
mSelectedImg.remove(filePath);
//改变Item状态,没有必要刷新显示
viewHolder.mImg.setColorFilter(null);
viewHolder.mSelect.setImageResource(R.drawable.picture_unselected);
}else {//未被选择
mSelectedImg.add(filePath);
//改变Item状态,没有必要刷新显示
viewHolder.mImg.setColorFilter(Color.parseColor("#77000000"));
viewHolder.mSelect.setImageResource(R.drawable.pictures_selected);
}
//notifyDataSetChanged();不能使用,会出现闪屏 }
}); /**
* 已经选择过的图片,显示出选择过的效果
*/
if(mSelectedImg.contains(filePath)) {
viewHolder.mImg.setColorFilter(Color.parseColor("#77000000"));
viewHolder.mSelect.setImageResource(R.drawable.pictures_selected);
} return convertView;
} private class ViewHolder {
ImageView mImg;
ImageButton mSelect;
} }

图片策略我们使用的是LIFO后进先出。

到此我们的第一个Activity的所有的任务就完成了~~~

四、展现文件夹的PopupWindow

在我们要实现,点击底部的布局弹出我们的文件夹选择框,并且我们弹出框后面的Activity要变暗;

不急着贴代码,我们先考虑下PopupWindow怎么用最好,我们的PopupWindow需要设置布局文件,需要初始化View,需要初始化事件,还需要和Activity交互~~

那么肯定的,我们使用独立的类,这个类和Activity很相似,在里面initView(),initEvent()之类的。

1.  自定义PopupWindow,命名为"ListImageDirPopupWindow ",如下:

 package com.himi.imageloader;

 import java.util.List;

 import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView; import com.himi.imageloader.bean.FolderBean;
import com.himi.imageloader.util.ImageLoader; /**
* 自定义的PopupWindow
* 作用:展现文件夹信息
* @author hebao
*
*/
public class ListImageDirPopupWindow extends PopupWindow {
private int mWidth;
private int mHeight;
private View mConvertView;
private ListView mListView; private List<FolderBean> mDatas; /**
* 文件夹选中的监听器(接口)
* @author hebao
*
*/
public interface OnDirSelectedListener {
void onSelected(FolderBean folderBean);
}
public OnDirSelectedListener mListener;
public void setOnDirSelectedListener (OnDirSelectedListener mListener) {
this.mListener = mListener;
} public ListImageDirPopupWindow(Context context, List<FolderBean> datas) {
calWidthAndHeight(context); mConvertView = LayoutInflater.from(context).inflate(R.layout.popup_main, null);
setContentView(mConvertView); setWidth(mWidth);
setHeight(mHeight); //设置可触摸
setFocusable(true);
setTouchable(true);
setOutsideTouchable(true);
setBackgroundDrawable(new BitmapDrawable()); setTouchInterceptor(new OnTouchListener() { public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_OUTSIDE){
dismiss();
return true;
}
return false;
}
}); initViews(context);
initEvent(); } private void initViews(Context context) {
mListView = (ListView) mConvertView.findViewById(R.id.id_list_dir);
mListView.setAdapter(new ListDirAdapter(context, mDatas));
} /**
* 设置监听事件
*/
private void initEvent() {
mListView.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
if(mListener != null) {
mListener.onSelected(mDatas.get(position));
} } }); } /**
* 计算popupWindow的宽度和高度
* @param context
*/
private void calWidthAndHeight(Context context) {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
//Andorid.util 包下的DisplayMetrics 类提供了一种关于显示的通用信息,如显示大小,分辨率和字体。
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics); mWidth = outMetrics.widthPixels;
mHeight = (int) (outMetrics.heightPixels * 0.7);
} private class ListDirAdapter extends ArrayAdapter<FolderBean> {
private LayoutInflater mInflater;
private List<FolderBean> mDatas; public ListDirAdapter(Context context,
List<FolderBean> objects) {
super(context, 0, objects);
mInflater = LayoutInflater.from(context);
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if(convertView == null) {
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.item_popup_main, parent, false); holder.mImg = (ImageView) convertView.findViewById(R.id.id_id_dir_item_image);
holder.mDirName = (TextView) convertView.findViewById(R.id.id_dir_item_name);
holder.mDirCount = (TextView) convertView.findViewById(R.id.id_dir_item_count); convertView.setTag(holder);
} else {
holder =(ViewHolder) convertView.getTag();
}
FolderBean bean =getItem(position);
//重置
holder.mImg.setImageResource(R.drawable.pictures_no); //回调加载图片
ImageLoader.getInstance().loadImage(bean.getFirstImgPath(), holder.mImg);
holder.mDirCount.setText(bean.getCount()+"");
holder.mDirName.setText(bean.getName());
return convertView;
} private class ViewHolder {
ImageView mImg;
TextView mDirName;
TextView mDirCount;
}
} }

好了,现在就是我们正在的popupWindow咯,布局文件夹主要是个ListView,所以在initViews里面,我们得设置它的适配器;当然了,这里的适配器依然用我们的ListDirAdapter。

 然后我们需要和Activity交互,当我们点击某个文件夹的时候,外层的Activity需要改变它GridView的数据源,展示我们点击文件夹的图片;

关于交互,我们从Activity的角度去看弹出框,Activity想知道什么,只想知道选择了别的文件夹来告诉我,所以我们创建一个接口OnDirSelectedListener ,对Activity设置回调;initEvent初始化事件,如果有人设置了回调,我们就调用。

2.  接下来到MainActivity,完成MainActivity和PopupWindow的交互,如下:

上面说道,当扫描图片完成,拿到包含图片的文件夹信息列表;这个列表就是我们popupWindow所需的数据,所以我们的popupWindow的初始化在handleMessage(上面贴了handler的代码)里面:

在handleMessage里面调用 initDirPopupWindow

 /**
* 初始化展示文件夹的popupWindw
*/
private void initDirPopupWindow() {
mDirPopupWindow = new ListImageDirPopupWindow(this, mFolderBeans); mDirPopupWindow.setOnDismissListener(new OnDismissListener() { public void onDismiss() {
lightOn(); }
}); /**
* 设置选择文件夹的回调
*/
mDirPopupWindow.setOnDirSelectedListener(new OnDirSelectedListener() { public void onSelected(FolderBean folderBean) {
mCurrentDir = new File(folderBean.getDir());
mImgs = Arrays.asList(mCurrentDir.list(new FilenameFilter() { public boolean accept(File dir, String filename) {
if (filename.endsWith(".jpg")
|| filename.endsWith(".jpeg")
|| filename.endsWith(".png")) {
return true;
}
return false;
}
})); mImgAdapter = new ImageAdapter(MainActivity.this, mImgs,
mCurrentDir.getAbsolutePath());
mGridView.setAdapter(mImgAdapter); mDirCount.setText(mImgs.size() + "");
mDirName.setText(folderBean.getName()); mDirPopupWindow.dismiss();
}
}); } /**
* 内容区域变亮
*/ protected void lightOn() {
WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.alpha = 1.0f;
getWindow().setAttributes(lp);
} /**
* 内容区域变暗
*/
protected void lightOff() {
WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.alpha = .3f;
getWindow().setAttributes(lp); }

我们初始化我们的popupWindow,设置了关闭对话框的回调,已经设置了选择不同文件夹的回调;
这里仅仅是初始化,下面看我们合适将其弹出的,其实整个Activity也就一个事件,点击弹出该对话框,所以看Activity的initEvent方法:

 /**
* 添加点击事件
*/
private void initEvent() {
mBottomLy.setOnClickListener(new OnClickListener() { public void onClick(View v) {
// 设置PopupWindow动画
mDirPopupWindow.setAnimationStyle(R.style.dir_popupwindow_anim); // 设置PopupWindow的出现
mDirPopupWindow.showAsDropDown(mBottomLy, 0, 0);
lightOff(); }
}); }

动画的文件就不贴了,大家自己看源码;

我们改变了GridView的适配器,以及底部的控件上的文件夹名称,文件数量等等;

好了,到此结束;整篇由于篇幅原因没有贴任何布局文件,大家自己通过源码查看;

五、总结:

1. Imageloader:

(1)Handler + Loop + Message(new Thread().start():这种方式效率低

(2) 图片的压缩

    获取图片应当显示的尺寸---> 使用options进行压缩

(3) 图片显示避免错乱

           setTag(url);

2. PopupWindow:

单独自定义一个PopupWindow继承自系统的PopupWindow。

然后处理自己的子View事件,把一些关键的回调接口和方法进行返回,让MainActivity进行设置

3. 注意:

ps:请真机测试,反正我的模拟器扫描不到图片~

ps:运行出现空指针的话,在getImages中添加判断,if(parentFile.list()==null)continue , 切记~~~具体位置,上面有说; 

源码下载:

 https://github.com/PocketBoy/hebao

上一篇:Android 高级UI设计笔记07:RecyclerView 的详解


下一篇:LINQ系列:Linq to Object集合操作符