Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android多媒體學習十一:實現仿百度圖片查看功能

Android多媒體學習十一:實現仿百度圖片查看功能

編輯:Android開發實例

我們知道,進入百度圖片後,輸入一個關鍵字後,首先看到的是很多縮略圖,當我們點擊某張縮略圖時,我們就可以進入到大圖顯示頁面,在

大圖顯示頁面,中包含了一個圖片畫廊,同時當前大圖為剛剛我們點擊的那張圖片。現在我們看看在Android中如何實現類似的效果:

首先,我們需要有一個控件來顯示縮略圖,這裡沒有什麼比GridView更加合適了。

配置文件如下:

 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:orientation="vertical" 
  4.     android:layout_width="fill_parent" 
  5.     android:layout_height="fill_parent" 
  6.     >  
  7.     <GridView  
  8.         android:id="@+id/view_photos"   
  9.         android:layout_width="fill_parent"   
  10.         android:layout_height="fill_parent"   
  11.         android:layout_marginTop="10dp"   
  12.         android:columnWidth="100dp"   
  13.         android:numColumns="auto_fit"   
  14.         android:horizontalSpacing="5dp"   
  15.         android:verticalSpacing="5dp"   
  16.         android:listSelector="@drawable/frame_select" />  
  17. </LinearLayout> 

對於GridView中每一項是一張縮略圖,我們需要繼承BaseAdapter,實現自己的一個GridImageAdapter,代碼:

 

  1. package com.liner.manager;  
  2. import java.util.List;  
  3. import com.liner.manager.adapter.GridImageAdapter;  
  4. import android.app.Activity;  
  5. import android.graphics.Bitmap;  
  6. import android.os.Bundle;  
  7. import android.view.View;  
  8. import android.widget.AdapterView;  
  9. import android.widget.Gallery;  
  10. import android.widget.ImageButton;  
  11. import android.widget.AdapterView.OnItemClickListener;  
  12. public class GalleryActivity extends Activity{  
  13.       
  14.     private ImageButton currentImage;  
  15.     private Gallery gallery;  
  16.       
  17.     private int[] thumbIds;  
  18.     private int currentPos;  
  19.       
  20.     private Bitmap currentBitmap;  
  21.       
  22.     private List<Bitmap> bitmapCache;  
  23.       
  24.     public void onCreate(Bundle savedInstanceState){  
  25.         super.onCreate(savedInstanceState);  
  26.         setContentView(R.layout.gallery);  
  27.           
  28.         currentImage = (ImageButton)this.findViewById(R.id.image_current);  
  29.         gallery = (Gallery)this.findViewById(R.id.image_gallery);  
  30.         gallery.setOnItemClickListener(galleryItemClickListener);  
  31.         init();  
  32.     }  
  33.       
  34.     private OnItemClickListener galleryItemClickListener = new OnItemClickListener() {  
  35.         @Override 
  36.         public void onItemClick(AdapterView<?> p, View v, int position,  
  37.                 long id) {  
  38.             // 點擊事件  
  39.             showCurrentImage(position);  
  40.         }  
  41.     };  
  42.       
  43.     private void init(){  
  44.         thumbIds = this.getIntent().getIntArrayExtra("thumbIds");  
  45.         currentPos = this.getIntent().getIntExtra("currentPos",0);  
  46.         //galleryIds = this.getThumbnailIds(currentPos); //當前的gallery裡的圖片信息  
  47.         bitmapCache = BitmapUtils.queryThumbnailListByIds(this, thumbIds);  
  48.         GridImageAdapter adapter = new GridImageAdapter(this.getApplication(), bitmapCache);  
  49.         gallery.setAdapter(adapter);  
  50.         gallery.setSelection(currentPos);  
  51.           
  52.         showCurrentImage(currentPos);  
  53.           
  54.     }  
  55.       
  56.     private void showCurrentImage(int position){  
  57.           
  58.         if(currentBitmap != null){  
  59.             currentBitmap.recycle();  
  60.         }  
  61.           
  62.         currentBitmap = BitmapUtils.queryImageByThumbnailId(GalleryActivity.this, thumbIds[position]);  
  63.         if(currentBitmap != null){  
  64.             currentImage.setImageBitmap(currentBitmap);  
  65.         }else{  
  66.             //什麼都不做  
  67.         }  
  68.           
  69.         //releaseBitmaps();       
  70.     }  
  71.       
  72.     /**  
  73.      * 將Gallery當前可見的顯示之前的3張,後3張緩存起來,其余的釋放掉,這樣是為了放置內存不夠用  
  74.      * 之所以前三張後三張,是為了Gallery可以滑動的更加順暢  
  75.      */ 
  76.     private void releaseBitmaps(){  
  77.         int start = gallery.getFirstVisiblePosition()-3; //緩存的起始位置  
  78.         int end = gallery.getLastVisiblePosition()+3; //緩存的結束位置  
  79.           
  80.         Bitmap delBitmap;  
  81.         for(int i=0; i<start; i++){  
  82.             delBitmap = bitmapCache.get(i);  
  83.             if(delBitmap != null){  
  84.                 bitmapCache.remove(i);  
  85.                 delBitmap.recycle();  
  86.             }  
  87.         }  
  88.         for(int i=end+1; i<bitmapCache.size(); i++){  
  89.             delBitmap = bitmapCache.get(i);  
  90.             if(delBitmap != null){  
  91.                 bitmapCache.remove(i);  
  92.                 delBitmap.recycle();  
  93.             }  
  94.         }  
  95.     }  
  96.       
  97.     /**  
  98.      * 獲取當前位置的前三個Id和後三個Id  
  99.      * @param position  
  100.      * @return  
  101.      */ 
  102.     private Integer[] getThumbnailIds(int position){  
  103.         Integer[] ids = new Integer[]{0,0,0,0,0,0,0};  
  104.         int currPos = 0;  
  105.         //關於這裡的處理,比較復雜  
  106.         for(int i=3; i>0; i--){  
  107.             if(position - i >= 0){  
  108.                 currPos = 3-i;  
  109.                 ids[currPos] = thumbIds[position-i];  
  110.             }  
  111.         }  
  112.         ids[++currPos] = thumbIds[position]; //當前Id  
  113.         //currGallerySelection = currPos;  
  114.         //這樣右邊剩下的位置數就是7-currPos-1  
  115.         for(int i=1; i<=6-currPos;i++){  
  116.             if(position+i < thumbIds.length){  
  117.                 ids[currPos+i] = thumbIds[position+i];  
  118.             }  
  119.         }  
  120.           
  121.         return ids;  
  122.     }     
  123. }  

然後,我們就可以在Activity中通過查詢MediaStore的多媒體圖片庫來查詢所有的圖片的縮略圖,縮略圖所在的位置是:

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

 

  1. package com.liner.manager;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4. import com.liner.manager.adapter.GridImageAdapter;  
  5. import android.app.Activity;  
  6. import android.content.Intent;  
  7. import android.database.Cursor;  
  8. import android.graphics.Bitmap;  
  9. import android.graphics.BitmapFactory;  
  10. import android.net.Uri;  
  11. import android.os.Bundle;  
  12. import android.provider.MediaStore;  
  13. import android.view.View;  
  14. import android.widget.Adapter;  
  15. import android.widget.AdapterView;  
  16. import android.widget.GridView;  
  17. import android.widget.Toast;  
  18. public class MainActivity extends Activity {    
  19.     private GridView photoView;  
  20.     private GridImageAdapter imageAdapter;  
  21.       
  22.     private Cursor cursor;   
  23.     private int[] thumbIds;  
  24.       
  25.     @Override 
  26.     public void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.main);  
  29.           
  30.         photoView = (GridView)this.findViewById(R.id.view_photos);  
  31.         photoView.setOnItemClickListener(photoClickListener);  
  32.           
  33.         //showImages();  
  34.         showThumbnails();  
  35.     }  
  36.       
  37.       
  38.     private void showThumbnails(){  
  39.           
  40.         cursor = BitmapUtils.queryThumbnails(this);  
  41.         if(cursor.moveToFirst()){  
  42.             List<Bitmap> bitmaps = new ArrayList<Bitmap>();  
  43.             thumbIds = new int[cursor.getCount()];  
  44.             for(int i=0; i<cursor.getCount();i++){  
  45.                 cursor.moveToPosition(i);  
  46.                 String currPath = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.DATA));  
  47.                 thumbIds[i] = cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails._ID));  
  48.                 Bitmap b = BitmapUtils.decodeBitmap(currPath,100,100);  
  49.                 bitmaps.add(b);  
  50.             }  
  51.             imageAdapter = new GridImageAdapter(this.getApplication(), bitmaps);  
  52.             photoView.setAdapter(imageAdapter);  
  53.         }  
  54.     }  
  55.       
  56.     private AdapterView.OnItemClickListener photoClickListener = new AdapterView.OnItemClickListener() {  
  57.         @Override 
  58.         public void onItemClick(AdapterView<?> p, View v, int position,  
  59.                 long id) {  
  60.             //點擊某張縮略圖時,轉到圖片顯示界面           
  61.             Intent intent = new Intent();  
  62.             intent.setClass(MainActivity.this, GalleryActivity.class);  
  63.             intent.putExtra("thumbIds", thumbIds);  
  64.             intent.putExtra("currentPos", position);  
  65.             startActivity(intent);  
  66.         }  
  67.     };  
  68.       

注意到,我們記錄了,所有縮略圖對應的id號,和當前的用戶選擇的位置,然後通過Intent傳遞到第二個展示界面。第二個界面的布局文件如下:我們用了一個Gallery和一個ImageButton來實現

 

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <LinearLayout 
  3.   xmlns:android="http://schemas.android.com/apk/res/android" 
  4.   android:layout_width="fill_parent" 
  5.   android:layout_height="fill_parent" 
  6.   android:orientation="vertical"> 
  7.     <Gallery 
  8.         android:id="@+id/image_gallery"   
  9.         android:layout_width="fill_parent"   
  10.         android:layout_height="100dp"   
  11.         /> 
  12.     <ImageButton 
  13.         android:id="@+id/image_current"   
  14.         android:layout_width="fill_parent"   
  15.         android:layout_height="fill_parent"   
  16.         android:padding="10dp"   
  17.         android:layout_marginTop="10dp"   
  18.         /> 
  19. </LinearLayout> 

然後,對應的Activity如下:

 

  1. package com.liner.manager;  
  2. import java.util.List;  
  3. import com.liner.manager.adapter.GridImageAdapter;  
  4. import android.app.Activity;  
  5. import android.graphics.Bitmap;  
  6. import android.os.Bundle;  
  7. import android.view.View;  
  8. import android.widget.AdapterView;  
  9. import android.widget.Gallery;  
  10. import android.widget.ImageButton;  
  11. import android.widget.AdapterView.OnItemClickListener;  
  12. public class GalleryActivity extends Activity{  
  13.       
  14.     private ImageButton currentImage;  
  15.     private Gallery gallery;  
  16.       
  17.     private int[] thumbIds;  
  18.     private int currentPos;  
  19.       
  20.     private Bitmap currentBitmap;  
  21.       
  22.     private List<Bitmap> bitmapCache;  
  23.       
  24.     public void onCreate(Bundle savedInstanceState){  
  25.         super.onCreate(savedInstanceState);  
  26.         setContentView(R.layout.gallery);  
  27.           
  28.         currentImage = (ImageButton)this.findViewById(R.id.image_current);  
  29.         gallery = (Gallery)this.findViewById(R.id.image_gallery);  
  30.         gallery.setOnItemClickListener(galleryItemClickListener);  
  31.         init();  
  32.     }  
  33.       
  34.     private OnItemClickListener galleryItemClickListener = new OnItemClickListener() {  
  35.         @Override 
  36.         public void onItemClick(AdapterView<?> p, View v, int position,  
  37.                 long id) {  
  38.             // 點擊事件  
  39.             showCurrentImage(position);  
  40.         }  
  41.     };  
  42.       
  43.     private void init(){  
  44.         thumbIds = this.getIntent().getIntArrayExtra("thumbIds");  
  45.         currentPos = this.getIntent().getIntExtra("currentPos",0);  
  46.         //galleryIds = this.getThumbnailIds(currentPos); //當前的gallery裡的圖片信息  
  47.         bitmapCache = BitmapUtils.queryThumbnailListByIds(this, thumbIds);  
  48.         GridImageAdapter adapter = new GridImageAdapter(this.getApplication(), bitmapCache);  
  49.         gallery.setAdapter(adapter);  
  50.         gallery.setSelection(currentPos);  
  51.           
  52.         showCurrentImage(currentPos);  
  53.           
  54.     }  
  55.       
  56.     private void showCurrentImage(int position){  
  57.           
  58.         if(currentBitmap != null){  
  59.             currentBitmap.recycle();  
  60.         }  
  61.           
  62.         currentBitmap = BitmapUtils.queryImageByThumbnailId(GalleryActivity.this, thumbIds[position]);  
  63.         if(currentBitmap != null){  
  64.             currentImage.setImageBitmap(currentBitmap);  
  65.         }else{  
  66.             //什麼都不做  
  67.         }  
  68.           
  69.         //releaseBitmaps();       
  70.     }  
  71.       
  72. }  

可以看到,當用戶點擊Gallery中某一項時,觸發onItemClick事件,在其中,我們通過根據該縮略圖對應的Image_ID來從MediaStore.Images.Media中查詢該縮略圖對應的大圖。並在ImageButton中顯示。

這裡當圖片很多時,可能會出現內存溢出,為了避免這種情況,可以更加Gallery的特點,使用緩存。保存當前可見的縮略圖的前三個到後三個。其余的全部recycle。當用戶點擊Gallery的時候,在判斷當前的位置,如果大於或小於某個值時,則重新更新緩存。這樣保證內存中的縮略圖的個數總是6+Gallery.getLastVisiblePosition-Gallery.getFirstVisiblePosition個。其實這就是浮動緩存窗口,一個固定大小窗口在整個坐標(全部縮略圖)上游動。這裡沒有實現,以後待續。

同時,你可能已經注意到,程序中使用到了一個BitmapUtils類,這個類是封裝了一系列對查詢圖片,並將其解析為Bitmap的類。

代碼如下:

 

  1. package com.liner.manager;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4. import android.app.Activity;  
  5. import android.database.Cursor;  
  6. import android.graphics.Bitmap;  
  7. import android.graphics.BitmapFactory;  
  8. import android.provider.MediaStore;  
  9. import android.util.Log;  
  10. public final class BitmapUtils {  
  11.       
  12.       
  13.       
  14.     public static Bitmap decodeBitmap(String path, int displayWidth, int displayHeight){  
  15.         BitmapFactory.Options op = new BitmapFactory.Options();  
  16.         op.inJustDecodeBounds = true;  
  17.         Bitmap bmp = BitmapFactory.decodeFile(path, op); //獲取尺寸信息  
  18.         //獲取比例大小  
  19.         int wRatio = (int)Math.ceil(op.outWidth/(float)displayWidth);  
  20.         int hRatio = (int)Math.ceil(op.outHeight/(float)displayHeight);  
  21.         //如果超出指定大小,則縮小相應的比例  
  22.         if(wRatio > 1 && hRatio > 1){  
  23.             if(wRatio > hRatio){  
  24.                 op.inSampleSize = wRatio;  
  25.             }else{  
  26.                 op.inSampleSize = hRatio;  
  27.             }  
  28.         }  
  29.         op.inJustDecodeBounds = false;  
  30.         bmp = BitmapFactory.decodeFile(path, op);  
  31.         return Bitmap.createScaledBitmap(bmp, displayWidth, displayHeight, true);  
  32.     }  
  33.       
  34.     /**  
  35.      * 采用復雜計算來決定縮放  
  36.      * @param path  
  37.      * @param maxImageSize  
  38.      * @return  
  39.      */ 
  40.     public static Bitmap decodeBitmap(String path, int maxImageSize){  
  41.         BitmapFactory.Options op = new BitmapFactory.Options();  
  42.         op.inJustDecodeBounds = true;  
  43.         Bitmap bmp = BitmapFactory.decodeFile(path, op); //獲取尺寸信息  
  44.         int scale = 1;  
  45.         if(op.outWidth > maxImageSize || op.outHeight > maxImageSize){  
  46.             scale = (int)Math.pow(2, (int)Math.round(Math.log(maxImageSize/(double)Math.max(op.outWidth, op.outHeight))/Math.log(0.5)));  
  47.         }  
  48.         op.inJustDecodeBounds = false;  
  49.         op.inSampleSize = scale;  
  50.         bmp = BitmapFactory.decodeFile(path, op);  
  51.         return bmp;       
  52.     }  
  53.       
  54.       
  55.     public static Cursor queryThumbnails(Activity context){  
  56.         String[] columns = new String[]{  
  57.                 MediaStore.Images.Thumbnails.DATA,  
  58.                 MediaStore.Images.Thumbnails._ID,  
  59.                 MediaStore.Images.Thumbnails.IMAGE_ID  
  60.         };  
  61.         return context.managedQuery(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, columns, null, null, MediaStore.Images.Thumbnails.DEFAULT_SORT_ORDER);  
  62.     }  
  63.       
  64.     public static Cursor queryThumbnails(Activity context, String selection, String[] selectionArgs){  
  65.         String[] columns = new String[]{  
  66.                 MediaStore.Images.Thumbnails.DATA,  
  67.                 MediaStore.Images.Thumbnails._ID,  
  68.                 MediaStore.Images.Thumbnails.IMAGE_ID  
  69.         };  
  70.         return context.managedQuery(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, columns, selection, selectionArgs, MediaStore.Images.Thumbnails.DEFAULT_SORT_ORDER);       
  71.     }  
  72.       
  73.     public static Bitmap queryThumbnailById(Activity context, int thumbId){  
  74.         String selection = MediaStore.Images.Thumbnails._ID + " = ?";  
  75.         String[] selectionArgs = new String[]{  
  76.             thumbId+""    
  77.         };  
  78.         Cursor cursor = BitmapUtils.queryThumbnails(context,selection,selectionArgs);  
  79.           
  80.         if(cursor.moveToFirst()){  
  81.             String path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.DATA));  
  82.             cursor.close();  
  83.             return BitmapUtils.decodeBitmap(path, 100, 100);  
  84.         }else{  
  85.             cursor.close();  
  86.             return null;  
  87.         }  
  88.     }  
  89.       
  90.     public static Bitmap[] queryThumbnailsByIds(Activity context, Integer[] thumbIds){  
  91.         Bitmap[] bitmaps = new Bitmap[thumbIds.length];  
  92.         for(int i=0; i<bitmaps.length; i++){  
  93.             bitmaps[i] = BitmapUtils.queryThumbnailById(context, thumbIds[i]);  
  94.         }  
  95.           
  96.         return bitmaps;  
  97.     }  
  98.       
  99.     /**  
  100.      * 獲取全部  
  101.      * @param context  
  102.      * @return  
  103.      */ 
  104.     public static List<Bitmap> queryThumbnailList(Activity context){  
  105.         List<Bitmap> bitmaps = new ArrayList<Bitmap>();  
  106.         Cursor cursor = BitmapUtils.queryThumbnails(context);  
  107.         for(int i=0; i<cursor.getCount(); i++){  
  108.             cursor.moveToPosition(i);  
  109.             String path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.DATA));  
  110.             Bitmap b = BitmapUtils.decodeBitmap(path, 100, 100);  
  111.             bitmaps.add(b);  
  112.         }  
  113.         cursor.close();  
  114.         return bitmaps;  
  115.     }  
  116.       
  117.     public static List<Bitmap> queryThumbnailListByIds(Activity context, int[] thumbIds){  
  118.         List<Bitmap> bitmaps = new ArrayList<Bitmap>();  
  119.         for(int i=0; i<thumbIds.length; i++){  
  120.             Bitmap b = BitmapUtils.queryThumbnailById(context, thumbIds[i]);  
  121.             bitmaps.add(b);  
  122.         }  
  123.           
  124.         return bitmaps;  
  125.     }     
  126.       
  127.     public static Cursor queryImages(Activity context){  
  128.         String[] columns = new String[]{  
  129.                 MediaStore.Images.Media._ID,  
  130.                 MediaStore.Images.Media.DATA,  
  131.                 MediaStore.Images.Media.DISPLAY_NAME  
  132.         };  
  133.         return context.managedQuery(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, null, null, MediaStore.Images.Media.DEFAULT_SORT_ORDER);  
  134.     }  
  135.       
  136.     public static Cursor queryImages(Activity context, String selection, String[] selectionArgs){  
  137.         String[] columns = new String[]{  
  138.                 MediaStore.Images.Media._ID,  
  139.                 MediaStore.Images.Media.DATA,  
  140.                 MediaStore.Images.Media.DISPLAY_NAME  
  141.         };  
  142.         return context.managedQuery(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, selection, selectionArgs, MediaStore.Images.Media.DEFAULT_SORT_ORDER);         
  143.     }  
  144.       
  145.     public static Bitmap queryImageById(Activity context, int imageId){  
  146.         String selection = MediaStore.Images.Media._ID + "=?";  
  147.         String[] selectionArgs = new String[]{  
  148.                 imageId + "" 
  149.         };  
  150.         Cursor cursor = BitmapUtils.queryImages(context, selection, selectionArgs);  
  151.         if(cursor.moveToFirst()){  
  152.             String path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA));  
  153.             cursor.close();  
  154.             //return BitmapUtils.decodeBitmap(path, 260, 260);  
  155.             return BitmapUtils.decodeBitmap(path, 220); //看看和上面這種方式的差別,看了,差不多  
  156.         }else{  
  157.             cursor.close();  
  158.             return null;  
  159.         }  
  160.     }  
  161.       
  162.     /**  
  163.      * 根據縮略圖的Id獲取對應的大圖  
  164.      * @param context  
  165.      * @param thumbId  
  166.      * @return  
  167.      */ 
  168.     public static Bitmap queryImageByThumbnailId(Activity context, Integer thumbId){  
  169.           
  170.         String selection = MediaStore.Images.Thumbnails._ID + " = ?";  
  171.         String[] selectionArgs = new String[]{  
  172.             thumbId+""    
  173.         };  
  174.         Cursor cursor = BitmapUtils.queryThumbnails(context, selection, selectionArgs);  
  175.           
  176.         if(cursor.moveToFirst()){  
  177.             int imageId = cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Images.Thumbnails.IMAGE_ID));  
  178.             cursor.close();  
  179.             return BitmapUtils.queryImageById(context, imageId);              
  180.         }else{  
  181.             cursor.close();  
  182.             return null;  
  183.         }  
  184.     }  
  185. }  

這樣就實現了,類似百度圖片浏覽的效果。效果圖如下:

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved