Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/20481185),请尊重他人的辛勤劳动成果,谢谢!
大家好!过完年回来到现在差不多一个月没写文章了,一是觉得不知道写哪些方面的文章,没有好的题材来写,二是因为自己的一些私事给耽误了,所以过完年的第一篇文章到现在才发表出来,2014年我还是会继续在CSDN上面更新我的博客,欢迎大家关注一下,今天这篇文章主要的是介绍下开源库StickyGridHeaders的使用,StickyGridHeaders是一个自定义GridView带sections和headers的Android库,sections就是GridView item之间的分隔,headers就是固定在GridView顶部的标题,类似一些Android手机联系人的效果,StickyGridHeaders的介绍在https://github.com/TonicArtos/StickyGridHeaders,与此对应也有一个相同效果的自定义ListView带sections和headers的开源库https://github.com/emilsjolander/StickyListHeaders,大家有兴趣的可以去看下,我这里介绍的是StickyGridHeaders的使用,我在Android应用方面看到使用StickyGridHeaders的不是很多,而是在Iphone上看到相册采用的是这种效果,于是我就使用StickyGridHeaders来仿照Iphone按照日期分隔显示本地图片
我们先新建一个Android项目StickyHeaderGridView,去https://github.com/TonicArtos/StickyGridHeaders下载开源库,为了方便浏览源码我直接将源码拷到我的工程中了
com.tonicartos.widget.stickygridheaders这个包就是我放StickyGridHeaders开源库的源码,com.example.stickyheadergridview这个包是我实现此功能的代码,类看起来还蛮多的,下面我就一一来介绍了
GridItem用来封装StickyGridHeadersGridView 每个Item的数据,里面有本地图片的路径,图片加入手机系统的时间和headerId
package com.example.stickyheadergridview; /** * @blog http://blog.csdn.net/xiaanming * * @author xiaanming * */ public class GridItem { /** * 图片的路径 */ private String path; /** * 图片加入手机中的时间,只取了年月日 */ private String time; /** * 每个Item对应的HeaderId */ private int headerId; public GridItem(String path, String time) { super(); this.path = path; this.time = time; } public String getPath() { return path; } public void setPath(String path) { this.path = path; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } public int getHeaderId() { return headerId; } public void setHeaderId(int headerId) { this.headerId = headerId; } }
图片的路径path和图片加入的时间time 我们直接可以通过ContentProvider获取,但是headerId需要我们根据逻辑来生成。
package com.example.stickyheadergridview; import android.content.ContentResolver; import android.content.Context; import android.content.Intent; import android.database.Cursor; import android.net.Uri; import android.os.Environment; import android.os.Handler; import android.os.Message; import android.provider.MediaStore; /** * 图片扫描器 * * @author xiaanming * */ public class ImageScanner { private Context mContext; public ImageScanner(Context context){ this.mContext = context; } /** * 利用ContentProvider扫描手机中的图片,将扫描的Cursor回调到ScanCompleteCallBack * 接口的scanComplete方法中,此方法在运行在子线程中 */ public void scanImages(final ScanCompleteCallBack callback) { final Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); callback.scanComplete((Cursor)msg.obj); } }; new Thread(new Runnable() { @Override public void run() { //先发送广播扫描下整个sd卡 mContext.sendBroadcast(new Intent( Intent.ACTION_MEDIA_MOUNTED, Uri.parse("file://" + Environment.getExternalStorageDirectory()))); Uri mImageUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI; ContentResolver mContentResolver = mContext.getContentResolver(); Cursor mCursor = mContentResolver.query(mImageUri, null, null, null, MediaStore.Images.Media.DATE_ADDED); //利用Handler通知调用线程 Message msg = mHandler.obtainMessage(); msg.obj = mCursor; mHandler.sendMessage(msg); } }).start(); } /** * 扫描完成之后的回调接口 * */ public static interface ScanCompleteCallBack{ public void scanComplete(Cursor cursor); } }
ImageScanner是一个图片的扫描器类,该类使用ContentProvider扫描手机中的图片,我们通过调用scanImages()方法就能对手机中的图片进行扫描,将扫描的Cursor回调到ScanCompleteCallBack 接口的scanComplete方法中,由于考虑到扫描图片属于耗时操作,所以该操作运行在子线程中,在我们扫描图片之前我们需要先发送广播来扫描外部媒体库,为什么要这么做呢,假如我们新增加一张图片到sd卡,图片确实已经添加了进去,但是我们此时的媒体库还没有同步更新,若不同步媒体库我们就看不到新增加的图片,当然我们可以通过重新启动系统来更新媒体库,但是这样不可取,所以我们直接发送广播就可以同步媒体库了。
package com.example.stickyheadergridview; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Point; import android.os.Handler; import android.os.Message; import android.support.v4.util.LruCache; import android.util.Log; /** * 本地图片加载器,采用的是异步解析本地图片,单例模式利用getInstance()获取NativeImageLoader实例 * 调用loadNativeImage()方法加载本地图片,此类可作为一个加载本地图片的工具类 * * @blog http://blog.csdn.net/xiaanming * * @author xiaanming * */ public class NativeImageLoader { private static final String TAG = NativeImageLoader.class.getSimpleName(); private static NativeImageLoader mInstance = new NativeImageLoader(); private static LruCache<String, Bitmap> mMemoryCache; private ExecutorService mImageThreadPool = Executors.newFixedThreadPool(1); private NativeImageLoader(){ //获取应用程序的最大内存 final int maxMemory = (int) (Runtime.getRuntime().maxMemory()); //用最大内存的1/8来存储图片 final int cacheSize = maxMemory / 8; mMemoryCache = new LruCache<String, Bitmap>(cacheSize) { //获取每张图片的bytes @Override protected int sizeOf(String key, Bitmap bitmap) { return bitmap.getRowBytes() * bitmap.getHeight(); } }; } /** * 通过此方法来获取NativeImageLoader的实例 * @return */ public static NativeImageLoader getInstance(){ return mInstance; } /** * 加载本地图片,对图片不进行裁剪 * @param path * @param mCallBack * @return */ public Bitmap loadNativeImage(final String path, final NativeImageCallBack mCallBack){ return this.loadNativeImage(path, null, mCallBack); } /** * 此方法来加载本地图片,这里的mPoint是用来封装ImageView的宽和高,我们会根据ImageView控件的大小来裁剪Bitmap * 如果你不想裁剪图片,调用loadNativeImage(final String path, final NativeImageCallBack mCallBack)来加载 * @param path * @param mPoint * @param mCallBack * @return */ public Bitmap loadNativeImage(final String path, final Point mPoint, final NativeImageCallBack mCallBack){ //先获取内存中的Bitmap Bitmap bitmap = getBitmapFromMemCache(path); final Handler mHander = new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); mCallBack.onImageLoader((Bitmap)msg.obj, path); } }; //若该Bitmap不在内存缓存中,则启用线程去加载本地的图片,并将Bitmap加入到mMemoryCache中 if(bitmap == null){ mImageThreadPool.execute(new Runnable() { @Override public void run() { //先获取图片的缩略图 Bitmap mBitmap = decodeThumbBitmapForFile(path, mPoint == null ? 0: mPoint.x, mPoint == null ? 0: mPoint.y); Message msg = mHander.obtainMessage(); msg.obj = mBitmap; mHander.sendMessage(msg); //将图片加入到内存缓存 addBitmapToMemoryCache(path, mBitmap); } }); } return bitmap; } /** * 往内存缓存中添加Bitmap * * @param key * @param bitmap */ private void addBitmapToMemoryCache(String key, Bitmap bitmap) { if (getBitmapFromMemCache(key) == null && bitmap != null) { mMemoryCache.put(key, bitmap); } } /** * 根据key来获取内存中的图片 * @param key * @return */ private Bitmap getBitmapFromMemCache(String key) { Bitmap bitmap = mMemoryCache.get(key); if(bitmap != null){ Log.i(TAG, "get image for LRUCache , path = " + key); } return bitmap; } /** * 清除LruCache中的bitmap */ public void trimMemCache(){ mMemoryCache.evictAll(); } /** * 根据View(主要是ImageView)的宽和高来获取图片的缩略图 * @param path * @param viewWidth * @param viewHeight * @return */ private Bitmap decodeThumbBitmapForFile(String path, int viewWidth, int viewHeight){ BitmapFactory.Options options = new BitmapFactory.Options(); //设置为true,表示解析Bitmap对象,该对象不占内存 options.inJustDecodeBounds = true; BitmapFactory.decodeFile(path, options); //设置缩放比例 options.inSampleSize = computeScale(options, viewWidth, viewHeight); //设置为false,解析Bitmap对象加入到内存中 options.inJustDecodeBounds = false; Log.e(TAG, "get Iamge form file, path = " + path); return BitmapFactory.decodeFile(path, options); } /** * 根据View(主要是ImageView)的宽和高来计算Bitmap缩放比例。默认不缩放 * @param options * @param width * @param height */ private int computeScale(BitmapFactory.Options options, int viewWidth, int viewHeight){ int inSampleSize = 1; if(viewWidth == 0 || viewWidth == 0){ return inSampleSize; } int bitmapWidth = options.outWidth; int bitmapHeight = options.outHeight; //假如Bitmap的宽度或高度大于我们设定图片的View的宽高,则计算缩放比例 if(bitmapWidth > viewWidth || bitmapHeight > viewWidth){ int widthScale = Math.round((float) bitmapWidth / (float) viewWidth); int heightScale = Math.round((float) bitmapHeight / (float) viewWidth); //为了保证图片不缩放变形,我们取宽高比例最小的那个 inSampleSize = widthScale < heightScale ? widthScale : heightScale; } return inSampleSize; } /** * 加载本地图片的回调接口 * * @author xiaanming * */ public interface NativeImageCallBack{ /** * 当子线程加载完了本地的图片,将Bitmap和图片路径回调在此方法中 * @param bitmap * @param path */ public void onImageLoader(Bitmap bitmap, String path); } }
NativeImageLoader该类是一个单例类,提供了本地图片加载,内存缓存,裁剪等逻辑,该类在加载本地图片的时候采用的是异步加载的方式,对于大图片的加载也是比较耗时的,所以采用子线程的方式去加载,对于图片的缓存机制使用的是LruCache,我们使用手机分配给应用程序内存的1/8用来缓存图片,给图片缓存的内存不宜太大,太大也可能会发生OOM,该类是用我之前写的文章Android 使用ContentProvider扫描手机中的图片,仿微信显示本地图片效果,在这里我就不做过多的介绍,有兴趣的可以去看看那篇文章,不过这里新增了一个方法trimMemCache(),,用来清空LruCache使用的内存
我们看主界面的布局代码,里面只有一个自定义的StickyGridHeadersGridView控件
<?xml version="1.0" encoding="utf-8"?> <com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/asset_grid" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" android:columnWidth="90dip" android:horizontalSpacing="3dip" android:numColumns="auto_fit" android:verticalSpacing="3dip" />
在看主界面的代码之前我们先看StickyGridAdapter的代码
package com.example.stickyheadergridview; import java.util.List; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Point; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageView; import android.widget.TextView; import com.example.stickyheadergridview.MyImageView.OnMeasureListener; import com.example.stickyheadergridview.NativeImageLoader.NativeImageCallBack; import com.tonicartos.widget.stickygridheaders.StickyGridHeadersSimpleAdapter; /** * StickyHeaderGridView的适配器,除了要继承BaseAdapter之外还需要 * 实现StickyGridHeadersSimpleAdapter接口 * * @blog http://blog.csdn.net/xiaanming * * @author xiaanming * */ public class StickyGridAdapter extends BaseAdapter implements StickyGridHeadersSimpleAdapter { private List<GridItem> hasHeaderIdList; private LayoutInflater mInflater; private GridView mGridView; private Point mPoint = new Point(0, 0);//用来封装ImageView的宽和高的对象 public StickyGridAdapter(Context context, List<GridItem> hasHeaderIdList, GridView mGridView) { mInflater = LayoutInflater.from(context); this.mGridView = mGridView; this.hasHeaderIdList = hasHeaderIdList; } @Override public int getCount() { return hasHeaderIdList.size(); } @Override public Object getItem(int position) { return hasHeaderIdList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder mViewHolder; if (convertView == null) { mViewHolder = new ViewHolder(); convertView = mInflater.inflate(R.layout.grid_item, parent, false); mViewHolder.mImageView = (MyImageView) convertView .findViewById(R.id.grid_item); convertView.setTag(mViewHolder); //用来监听ImageView的宽和高 mViewHolder.mImageView.setOnMeasureListener(new OnMeasureListener() { @Override public void onMeasureSize(int width, int height) { mPoint.set(width, height); } }); } else { mViewHolder = (ViewHolder) convertView.getTag(); } String path = hasHeaderIdList.get(position).getPath(); mViewHolder.mImageView.setTag(path); Bitmap bitmap = NativeImageLoader.getInstance().loadNativeImage(path, mPoint, new NativeImageCallBack() { @Override public void onImageLoader(Bitmap bitmap, String path) { ImageView mImageView = (ImageView) mGridView .findViewWithTag(path); if (bitmap != null && mImageView != null) { mImageView.setImageBitmap(bitmap); } } }); if (bitmap != null) { mViewHolder.mImageView.setImageBitmap(bitmap); } else { mViewHolder.mImageView.setImageResource(R.drawable.friends_sends_pictures_no); } return convertView; } @Override public View getHeaderView(int position, View convertView, ViewGroup parent) { HeaderViewHolder mHeaderHolder; if (convertView == null) { mHeaderHolder = new HeaderViewHolder(); convertView = mInflater.inflate(R.layout.header, parent, false); mHeaderHolder.mTextView = (TextView) convertView .findViewById(R.id.header); convertView.setTag(mHeaderHolder); } else { mHeaderHolder = (HeaderViewHolder) convertView.getTag(); } mHeaderHolder.mTextView.setText(hasHeaderIdList.get(position).getTime()); return convertView; } /** * 获取HeaderId, 只要HeaderId不相等就添加一个Header */ @Override public long getHeaderId(int position) { return hasHeaderIdList.get(position).getHeaderId(); } public static class ViewHolder { public MyImageView mImageView; } public static class HeaderViewHolder { public TextView mTextView; } }
除了要继承BaseAdapter之外还需要实现StickyGridHeadersSimpleAdapter接口,继承BaseAdapter需要实现getCount(),getItem(int position), getItemId(int position),getView(int position, View convertView, ViewGroup parent)这四个方法,这几个方法的实现跟我们平常实现的方式一样,主要是看一下getView()方法,我们将每个item的图片路径设置Tag到该ImageView上面,然后利用NativeImageLoader来加载本地图片,在这里使用的ImageView依然是自定义的MyImageView,该自定义ImageView主要实现当MyImageView测量完毕之后,就会将测量的宽和高回调到onMeasureSize()中,然后我们可以根据MyImageView的大小来裁剪图片
另外我们需要实现StickyGridHeadersSimpleAdapter接口的getHeaderId(int position)和getHeaderView(int position, View convertView, ViewGroup parent),getHeaderId(int position)方法返回每个Item的headerId,getHeaderView()方法是生成sections和headers的,如果某个item的headerId跟他下一个item的HeaderId不同,则会调用getHeaderView方法生成一个sections用来区分不同的组,还会根据firstVisibleItem的headerId来生成一个位于顶部的headers,所以如何生成每个Item的headerId才是关键,生成headerId的方法在MainActivity中
package com.example.stickyheadergridview; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.ListIterator; import java.util.Map; import java.util.TimeZone; import android.app.Activity; import android.app.ProgressDialog; import android.database.Cursor; import android.os.Bundle; import android.provider.MediaStore; import android.widget.GridView; import com.example.stickyheadergridview.ImageScanner.ScanCompleteCallBack; public class MainActivity extends Activity { private ProgressDialog mProgressDialog; /** * 图片扫描器 */ private ImageScanner mScanner; private GridView mGridView; /** * 没有HeaderId的List */ private List<GridItem> nonHeaderIdList = new ArrayList<GridItem>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mGridView = (GridView) findViewById(R.id.asset_grid); mScanner = new ImageScanner(this); mScanner.scanImages(new ScanCompleteCallBack() { { mProgressDialog = ProgressDialog.show(MainActivity.this, null, "正在加载..."); } @Override public void scanComplete(Cursor cursor) { // 关闭进度条 mProgressDialog.dismiss(); if(cursor == null){ return; } while (cursor.moveToNext()) { // 获取图片的路径 String path = cursor.getString(cursor .getColumnIndex(MediaStore.Images.Media.DATA)); //获取图片的添加到系统的毫秒数 long times = cursor.getLong(cursor .getColumnIndex(MediaStore.Images.Media.DATE_ADDED)); GridItem mGridItem = new GridItem(path, paserTimeToYMD(times, "yyyy年MM月dd日")); nonHeaderIdList.add(mGridItem); } cursor.close(); //给GridView的item的数据生成HeaderId List<GridItem> hasHeaderIdList = generateHeaderId(nonHeaderIdList); //排序 Collections.sort(hasHeaderIdList, new YMDComparator()); mGridView.setAdapter(new StickyGridAdapter(MainActivity.this, hasHeaderIdList, mGridView)); } }); } /** * 对GridView的Item生成HeaderId, 根据图片的添加时间的年、月、日来生成HeaderId * 年、月、日相等HeaderId就相同 * @param nonHeaderIdList * @return */ private List<GridItem> generateHeaderId(List<GridItem> nonHeaderIdList) { Map<String, Integer> mHeaderIdMap = new HashMap<String, Integer>(); int mHeaderId = 1; List<GridItem> hasHeaderIdList; for(ListIterator<GridItem> it = nonHeaderIdList.listIterator(); it.hasNext();){ GridItem mGridItem = it.next(); String ymd = mGridItem.getTime(); if(!mHeaderIdMap.containsKey(ymd)){ mGridItem.setHeaderId(mHeaderId); mHeaderIdMap.put(ymd, mHeaderId); mHeaderId ++; }else{ mGridItem.setHeaderId(mHeaderIdMap.get(ymd)); } } hasHeaderIdList = nonHeaderIdList; return hasHeaderIdList; } @Override protected void onDestroy() { super.onDestroy(); //退出页面清除LRUCache中的Bitmap占用的内存 NativeImageLoader.getInstance().trimMemCache(); } /** * 将毫秒数装换成pattern这个格式,我这里是转换成年月日 * @param time * @param pattern * @return */ public static String paserTimeToYMD(long time, String pattern ) { System.setProperty("user.timezone", "Asia/Shanghai"); TimeZone tz = TimeZone.getTimeZone("Asia/Shanghai"); TimeZone.setDefault(tz); SimpleDateFormat format = new SimpleDateFormat(pattern); return format.format(new Date(time * 1000L)); } }
主界面的代码主要是组装StickyGridHeadersGridView的数据,我们将扫描出来的图片的路径,时间的毫秒数解析成年月日的格式封装到GridItem中,然后将GridItem加入到List中,此时每个Item还没有生成headerId,我们需要调用generateHeaderId(),该方法主要是将同一天加入的系统的图片生成相同的HeaderId,这样子同一天加入的图片就在一个组中,当然你要改成同一个月的图片在一起,修改paserTimeToYMD()方法的第二个参数就行了,当Activity finish之后,我们利用NativeImageLoader.getInstance().trimMemCache()释放内存,当然我们还需要对GridView的数据进行排序,比如说headerId相同的item不连续,headerId相同的item就会生成多个sections(即多个分组),所以我们要利用YMDComparator使得在同一天加入的图片在一起,YMDComparator的代码如下
package com.example.stickyheadergridview; import java.util.Comparator; public class YMDComparator implements Comparator<GridItem> { @Override public int compare(GridItem o1, GridItem o2) { return o1.getTime().compareTo(o2.getTime()); } }
当然这篇文章不使用YMDComparator也是可以的,因为我在利用ContentProvider获取图片的时候,就是根据加入系统的时间排序的,排序只是针对一般的数据来说的。
接下来我们运行下程序看看效果如何
今天的文章就到这里结束了,感谢大家的观看,上面还有一个类和一些资源文件没有贴出来,大家有兴趣研究下就直接下载项目源码,记住采用LruCache缓存图片的时候,cacheSize不要设置得过大,不然产生OOM的概率就更大些,我利用上面的程序测试显示600多张图片来回滑动,没有产生OOM,有问题不明白的同学可以在下面留言!