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{
14. private ImageButton currentImage;
15. private Gallery gallery;
17. private int[] thumbIds;
18. private int currentPos;
20. private Bitmap currentBitmap;
22. private List<Bitmap> bitmapCache;
24. public void onCreate(Bundle savedInstanceState){
25. super.onCreate(savedInstanceState);
26. setContentView(R.layout.gallery);
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. }
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. };
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);
52. showCurrentImage(currentPos);
54. }
56. private void showCurrentImage(int position){
58. if(currentBitmap != null){
59. currentBitmap.recycle();
60. }
62. currentBitmap = BitmapUtils.queryImageByThumbnailId(GalleryActivity.this, thumbIds[position]);
63. if(currentBitmap != null){
64. currentImage.setImageBitmap(currentBitmap);
65. }else{
66. //什麼都不做
67. }
69. //releaseBitmaps();
70. }
72. /**
73. * 將Gallery當前可見的顯示之前的3張，後3張緩存起來，其余的釋放掉，這樣是為了放置內存不夠用
74. * 之所以前三張後三張，是為了Gallery可以滑動的更加順暢
75. */
76. private void releaseBitmaps(){
77. int start = gallery.getFirstVisiblePosition()-3; //緩存的起始位置
78. int end = gallery.getLastVisiblePosition()+3; //緩存的結束位置
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. }
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. }
121. return ids;
122. }
123. }