您的位置:首页 > 移动开发 > Android开发

Android多媒体学习十一:实现仿百度图片查看功能

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

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



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



配置文件如下:



[xhtml] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<GridView

android:id="@+id/view_photos"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_marginTop="10dp"

android:columnWidth="100dp"

android:numColumns="auto_fit"

android:horizontalSpacing="5dp"

android:verticalSpacing="5dp"

android:listSelector="@drawable/frame_select" />

</LinearLayout>



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



[java] view
plaincopy

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() {

@Override

public 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-1

for(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代码如下:



[java] view
plaincopy

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() {

@Override

public 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来实现



[xhtml] view
plaincopy

<?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">

<Gallery

android:id="@+id/image_gallery"

android:layout_width="fill_parent"

android:layout_height="100dp"

/>

<ImageButton

android:id="@+id/image_current"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="10dp"

android:layout_marginTop="10dp"

/>

</LinearLayout>



然后,对应的Activity如下:



[java] view
plaincopy

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() {

@Override

public 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中某一项时,触发onItemClick事件,在其中,我们通过根据该缩略图对应的Image_ID来从MediaStore.Images.Media中查询该缩略图对应的大图。并在ImageButton中显示。



这里当图片很多时,可能会出现内存溢出,为了避免这种情况,可以更加Gallery的特点,使用缓存。保存当前可见的缩略图的前三个到后三个。其余的全部recycle。当用户点击Gallery的时候,在判断当前的位置,如果大于或小于某个值时,则重新更新缓存。这样保证内存中的缩略图的个数总是6+Gallery.getLastVisiblePosition-Gallery.getFirstVisiblePosition个。其实这就是浮动缓存窗口,一个固定大小窗口在整个坐标(全部缩略图)上游动。这里没有实现,以后待续。



同时,你可能已经注意到,程序中使用到了一个BitmapUtils类,这个类是封装了一系列对查询图片,并将其解析为Bitmap的类。



代码如下:



[java] view
plaincopy

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;

}

}

}



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







内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: