首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

兑现仿百度图片查看功能

2012-08-29 
实现仿百度图片查看功能?我们知道,进入百度图片后,输入一个关键字后,首先看到的是很多缩略图,当我们点击某

实现仿百度图片查看功能

?

我们知道,进入百度图片后,输入一个关键字后,首先看到的是很多缩略图,当我们点击某张缩略图时,我们就可以进入到大图显示页面,在

大图显示页面,中包含了一个图片画廊,同时当前大图为刚刚我们点击的那张图片。现在我们看看在Android中如何实现类似的效果:

首先,我们需要有一个控件来显示缩略图,这里没有什么比GridView更加合适了。

配置文件如下:

?

对于GridView中每一项是一张缩略图,我们需要继承BaseAdapter,实现自己的一个GridImageAdapter,代码:

?

package com.liner.manager;import java.util.List;import com.liner.manager.adapter.GridImageAdapter;import android.app.Activity;import android.graphics.Bitmap;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.Gallery;import android.widget.ImageButton;import android.widget.AdapterView.OnItemClickListener;public class GalleryActivity extends Activity{private ImageButton currentImage;private Gallery gallery;private int[] thumbIds;private int currentPos;private Bitmap currentBitmap;private List<Bitmap> bitmapCache;public void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.gallery);currentImage = (ImageButton)this.findViewById(R.id.image_current);gallery = (Gallery)this.findViewById(R.id.image_gallery);gallery.setOnItemClickListener(galleryItemClickListener);init();}private OnItemClickListener galleryItemClickListener = new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> p, View v, int position,long id) {// 点击事件showCurrentImage(position);}};private void init(){thumbIds = this.getIntent().getIntArrayExtra("thumbIds");currentPos = this.getIntent().getIntExtra("currentPos",0);//galleryIds = this.getThumbnailIds(currentPos); //当前的gallery里的图片信息bitmapCache = BitmapUtils.queryThumbnailListByIds(this, thumbIds);GridImageAdapter adapter = new GridImageAdapter(this.getApplication(), bitmapCache);gallery.setAdapter(adapter);gallery.setSelection(currentPos);showCurrentImage(currentPos);}private void showCurrentImage(int position){if(currentBitmap != null){currentBitmap.recycle();}currentBitmap = BitmapUtils.queryImageByThumbnailId(GalleryActivity.this, thumbIds[position]);if(currentBitmap != null){currentImage.setImageBitmap(currentBitmap);}else{//什么都不做}//releaseBitmaps();}/** * 将Gallery当前可见的显示之前的3张,后3张缓存起来,其余的释放掉,这样是为了放置内存不够用 * 之所以前三张后三张,是为了Gallery可以滑动的更加顺畅 */private void releaseBitmaps(){int start = gallery.getFirstVisiblePosition()-3; //缓存的起始位置int end = gallery.getLastVisiblePosition()+3; //缓存的结束位置Bitmap delBitmap;for(int i=0; i<start; i++){delBitmap = bitmapCache.get(i);if(delBitmap != null){bitmapCache.remove(i);delBitmap.recycle();}}for(int i=end+1; i<bitmapCache.size(); i++){delBitmap = bitmapCache.get(i);if(delBitmap != null){bitmapCache.remove(i);delBitmap.recycle();}}}/** * 获取当前位置的前三个Id和后三个Id * @param position * @return */private Integer[] getThumbnailIds(int position){Integer[] ids = new Integer[]{0,0,0,0,0,0,0};int currPos = 0;//关于这里的处理,比较复杂for(int i=3; i>0; i--){if(position - i >= 0){currPos = 3-i;ids[currPos] = thumbIds[position-i];}}ids[++currPos] = thumbIds[position]; //当前Id//currGallerySelection = currPos;//这样右边剩下的位置数就是7-currPos-1for(int i=1; i<=6-currPos;i++){if(position+i < thumbIds.length){ids[currPos+i] = thumbIds[position+i];}}return ids;}}

?

然后,我们就可以在Activity中通过查询MediaStore的多媒体图片库来查询所有的图片的缩略图,缩略图所在的位置是:

MediaStore.Images.Thumbnails。Activity代码如下:

?

package com.liner.manager;import java.util.ArrayList;import java.util.List;import com.liner.manager.adapter.GridImageAdapter;import android.app.Activity;import android.content.Intent;import android.database.Cursor;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.net.Uri;import android.os.Bundle;import android.provider.MediaStore;import android.view.View;import android.widget.Adapter;import android.widget.AdapterView;import android.widget.GridView;import android.widget.Toast;public class MainActivity extends Activity { private GridView photoView;private GridImageAdapter imageAdapter;private Cursor cursor; private int[] thumbIds; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); photoView = (GridView)this.findViewById(R.id.view_photos); photoView.setOnItemClickListener(photoClickListener); //showImages(); showThumbnails(); } private void showThumbnails(){ cursor = BitmapUtils.queryThumbnails(this); if(cursor.moveToFirst()){ List<Bitmap> bitmaps = new ArrayList<Bitmap>(); thumbIds = new int[cursor.getCount()]; for(int i=0; i<cursor.getCount();i++){ cursor.moveToPosition(i); String currPath = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.DATA)); thumbIds[i] = cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails._ID)); Bitmap b = BitmapUtils.decodeBitmap(currPath,100,100); bitmaps.add(b); } imageAdapter = new GridImageAdapter(this.getApplication(), bitmaps); photoView.setAdapter(imageAdapter); } } private AdapterView.OnItemClickListener photoClickListener = new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> p, View v, int position,long id) {//点击某张缩略图时,转到图片显示界面Intent intent = new Intent();intent.setClass(MainActivity.this, GalleryActivity.class);intent.putExtra("thumbIds", thumbIds);intent.putExtra("currentPos", position);startActivity(intent);}};}

?

注意到,我们记录了,所有缩略图对应的id号,和当前的用户选择的位置,然后通过Intent传递到第二个展示界面。第二个界面的布局文件如下:我们用了一个Gallery和一个ImageButton来实现

?

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"><Galleryandroid:id="@+id/image_gallery" android:layout_width="fill_parent" android:layout_height="100dp" /><ImageButtonandroid:id="@+id/image_current" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:layout_marginTop="10dp" /></LinearLayout>

?

然后,对应的Activity如下:

?

package com.liner.manager;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.database.Cursor;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.provider.MediaStore;import android.util.Log;public final class BitmapUtils {public static Bitmap decodeBitmap(String path, int displayWidth, int displayHeight){BitmapFactory.Options op = new BitmapFactory.Options();op.inJustDecodeBounds = true;Bitmap bmp = BitmapFactory.decodeFile(path, op); //获取尺寸信息//获取比例大小int wRatio = (int)Math.ceil(op.outWidth/(float)displayWidth);int hRatio = (int)Math.ceil(op.outHeight/(float)displayHeight);//如果超出指定大小,则缩小相应的比例if(wRatio > 1 && hRatio > 1){if(wRatio > hRatio){op.inSampleSize = wRatio;}else{op.inSampleSize = hRatio;}}op.inJustDecodeBounds = false;bmp = BitmapFactory.decodeFile(path, op);return Bitmap.createScaledBitmap(bmp, displayWidth, displayHeight, true);}/** * 采用复杂计算来决定缩放 * @param path * @param maxImageSize * @return */public static Bitmap decodeBitmap(String path, int maxImageSize){BitmapFactory.Options op = new BitmapFactory.Options();op.inJustDecodeBounds = true;Bitmap bmp = BitmapFactory.decodeFile(path, op); //获取尺寸信息int scale = 1;if(op.outWidth > maxImageSize || op.outHeight > maxImageSize){scale = (int)Math.pow(2, (int)Math.round(Math.log(maxImageSize/(double)Math.max(op.outWidth, op.outHeight))/Math.log(0.5)));}op.inJustDecodeBounds = false;op.inSampleSize = scale;bmp = BitmapFactory.decodeFile(path, op);return bmp;}public static Cursor queryThumbnails(Activity context){String[] columns = new String[]{ MediaStore.Images.Thumbnails.DATA, MediaStore.Images.Thumbnails._ID, MediaStore.Images.Thumbnails.IMAGE_ID }; return context.managedQuery(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, columns, null, null, MediaStore.Images.Thumbnails.DEFAULT_SORT_ORDER);}public static Cursor queryThumbnails(Activity context, String selection, String[] selectionArgs){String[] columns = new String[]{ MediaStore.Images.Thumbnails.DATA, MediaStore.Images.Thumbnails._ID, MediaStore.Images.Thumbnails.IMAGE_ID }; return context.managedQuery(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, columns, selection, selectionArgs, MediaStore.Images.Thumbnails.DEFAULT_SORT_ORDER);}public static Bitmap queryThumbnailById(Activity context, int thumbId){String selection = MediaStore.Images.Thumbnails._ID + " = ?";String[] selectionArgs = new String[]{thumbId+""};Cursor cursor =BitmapUtils.queryThumbnails(context,selection,selectionArgs);if(cursor.moveToFirst()){String path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.DATA));cursor.close();return BitmapUtils.decodeBitmap(path, 100, 100);}else{cursor.close();return null;}}public static Bitmap[] queryThumbnailsByIds(Activity context, Integer[] thumbIds){Bitmap[] bitmaps = new Bitmap[thumbIds.length];for(int i=0; i<bitmaps.length; i++){bitmaps[i] = BitmapUtils.queryThumbnailById(context, thumbIds[i]);}return bitmaps;}/** * 获取全部 * @param context * @return */public static List<Bitmap> queryThumbnailList(Activity context){List<Bitmap> bitmaps = new ArrayList<Bitmap>();Cursor cursor = BitmapUtils.queryThumbnails(context);for(int i=0; i<cursor.getCount(); i++){cursor.moveToPosition(i);String path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.DATA));Bitmap b = BitmapUtils.decodeBitmap(path, 100, 100);bitmaps.add(b);}cursor.close();return bitmaps;}public static List<Bitmap> queryThumbnailListByIds(Activity context, int[] thumbIds){List<Bitmap> bitmaps = new ArrayList<Bitmap>();for(int i=0; i<thumbIds.length; i++){Bitmap b = BitmapUtils.queryThumbnailById(context, thumbIds[i]);bitmaps.add(b);}return bitmaps;}public static Cursor queryImages(Activity context){String[] columns = new String[]{MediaStore.Images.Media._ID,MediaStore.Images.Media.DATA,MediaStore.Images.Media.DISPLAY_NAME};return context.managedQuery(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, null, null, MediaStore.Images.Media.DEFAULT_SORT_ORDER);}public static Cursor queryImages(Activity context, String selection, String[] selectionArgs){String[] columns = new String[]{MediaStore.Images.Media._ID,MediaStore.Images.Media.DATA,MediaStore.Images.Media.DISPLAY_NAME};return context.managedQuery(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, selection, selectionArgs, MediaStore.Images.Media.DEFAULT_SORT_ORDER);}public static Bitmap queryImageById(Activity context, int imageId){String selection = MediaStore.Images.Media._ID + "=?";String[] selectionArgs = new String[]{imageId + ""};Cursor cursor = BitmapUtils.queryImages(context, selection, selectionArgs);if(cursor.moveToFirst()){String path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA));cursor.close();//return BitmapUtils.decodeBitmap(path, 260, 260);return BitmapUtils.decodeBitmap(path, 220); //看看和上面这种方式的差别,看了,差不多}else{cursor.close();return null;}}/** * 根据缩略图的Id获取对应的大图 * @param context * @param thumbId * @return */public static Bitmap queryImageByThumbnailId(Activity context, Integer thumbId){String selection = MediaStore.Images.Thumbnails._ID + " = ?";String[] selectionArgs = new String[]{thumbId+""};Cursor cursor = BitmapUtils.queryThumbnails(context, selection, selectionArgs);if(cursor.moveToFirst()){int imageId = cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.IMAGE_ID));cursor.close();return BitmapUtils.queryImageById(context, imageId);}else{cursor.close();return null;}}}

?

这样就实现了,类似百度图片浏览的效果。

热点排行