Android GridView 一行显示数据（包括图片和文本），解决的办法是计算数据占该行的宽度是多少

最近在做图片的浏览功能，开始是使用Gallery做，但是，达不到我想要的效果，关于使用Gallery显示缩略图的缺点和优点，不在详述了。以下是一个完整的Demo代码，注意我的模拟器是640*960。

1. package com.treasure.ui;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.widget.GridView;
5. import android.widget.LinearLayout;
6. import android.widget.LinearLayout.LayoutParams;
7. import com.treasure.adapter.Album1Adapter;
8. import com.treasure.utils.DisplayUtil;
9. public class TestGallery extends Activity
10. {
11. private Album1Adapter albumAdapter;
12. private GridView albumGallery;
13. private int[] resIds = new int[]
14. {R.drawable.a, R.drawable.b, R.drawable.c,
15. R.drawable.d, R.drawable.e, R.drawable.f,
16. R.drawable.g, R.drawable.h, R.drawable.i,
17. R.drawable.j, R.drawable.k, R.drawable.l,
18. R.drawable.m};
19. private String[] titles = new String[]
20. {"a", "b", "c", "d", "e", "f", "g", "h", "i",
21. "j", "k", "l", "m"};
22. @Override
23. public void onCreate(Bundle savedInstanceState)
24. {
25. super.onCreate(savedInstanceState);
26. setContentView(R.layout.display_image);
27. albumAdapter = new Album1Adapter(this, resIds, titles);
28. albumGallery = (GridView)findViewById(R.id.album_gallery);
29. albumGallery.setAdapter(albumAdapter);
30. albumGallery.setNumColumns(resIds.length);
31. // 计算一行显示图片需要的宽度
32. LinearLayout layout = (LinearLayout)findViewById(R.id.linear_id);
33. android.view.ViewGroup.LayoutParams params = layout.getLayoutParams();
34. // 注意：根据自己程序使用什么为单位进行设置，我使用的是dp，所以需要将dp转换成px，这样才能得到实现的宽度
35. // 如果你不转换单位的话，它默认的是px的
36. // 95 * (resIds.length + 1)
37. // 其中95表示的是android:columnWidth="95dp"
38. // (resIds.length + 1)表示的是获得相册的个数加1
39. params.width = DisplayUtil.dip2px(this, 95 * (resIds.length + 1));
40. params.height = LayoutParams.WRAP_CONTENT;
41. layout.setLayoutParams(params);
42. albumGallery.setSelection(0);
43. }
44. }

1. package com.treasure.utils;
2. import android.content.Context;
3. /**
4. * 转换手机分辨率的类
5. * @author Treasure
6. *
7. */
8. public class DisplayUtil
9. {
10. /**
11. * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
12. */
13. public static int dip2px(Context context, float dpValue)
14. {
15. final float scale = context.getResources().getDisplayMetrics().density;
16. return (int) (dpValue * scale + 0.5f);
17. }
18. /**
19. * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
20. */
21. public static int px2dip(Context context, float pxValue)
22. {
23. final float scale = context.getResources().getDisplayMetrics().density;
24. return (int) (pxValue / scale + 0.5f);
25. }
26. }

1. package com.treasure.adapter;
2. import java.util.ArrayList;
3. import com.treasure.ui.R;
4. import android.content.Context;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup;
8. import android.widget.BaseAdapter;
9. import android.widget.ImageView;
10. import android.widget.TextView;
11. /**
12. * 自定义相册的适配器类
13. * @author Treasure
14. *
15. */
16. public class Album1Adapter extends BaseAdapter
17. {
18. private int[] images;
19. private String[] titles;
20. private ArrayList<GalleryInfo> list;
21. private LayoutInflater inflater;
22. public Album1Adapter(Context context, int[] images, String[] titles)
23. {
24. this.images = images;
25. this.titles = titles;
26. list = new ArrayList<GalleryInfo>();
27. inflater = LayoutInflater.from(context);
28. for (int i = 0; i < images.length; i++)
29. {
30. GalleryInfo info = new GalleryInfo();
31. info.title = this.titles[i];
32. info.drawable = this.images[i];
33. if (i == 0)
34. {
35. info.isSelect = true;
36. }
37. else
38. {
39. info.isSelect = false;
40. }
41. list.add(info);
42. }
43. }
44. @Override
45. public int getCount()
46. {
47. return titles.length;
48. }
49. @Override
50. public Object getItem(int position)
51. {
52. return position;
53. }
54. @Override
55. public long getItemId(int position)
56. {
57. return position;
58. }
59. @Override
60. public View getView(int position, View convertView, ViewGroup parent)
61. {
62. ViewHolder holder;
63. if (convertView == null)
64. {
65. convertView = inflater.inflate(R.layout.album_gallery_item, null);
66. holder = new ViewHolder();
67. holder.photoFrameImg =
68. (ImageView)convertView.findViewById(R.id.photo_frame_column_02);
69. holder.imageImg =
70. (ImageView)convertView.findViewById(R.id.image_column_02);
71. holder.titleTxt =
72. (TextView)convertView.findViewById(R.id.photo_name_column_02);
73. convertView.setTag(holder);
74. }
75. else
76. {
77. holder = (ViewHolder)convertView.getTag();
78. }
79. holder.photoFrameImg.setImageResource(R.drawable.photo_frame);
80. holder.imageImg.setImageResource(list.get(position).drawable);
81. holder.titleTxt.setText(list.get(position).title);
82. if (list.get(position).isSelect)
83. {
84. holder.imageImg.setBackgroundResource(R.drawable.gallery_select);
85. }
86. else
87. {
88. holder.imageImg.setBackgroundDrawable(null);
89. }
90. return convertView;
91. }
92. public void changeStatus(int select)
93. {
94. for (int i = 0; i < list.size(); i++)
95. {
96. list.get(i).isSelect = false;
97. }
98. list.get(select).isSelect = true;
99. }
100. private class ViewHolder
101. {
102. ImageView photoFrameImg;
103. ImageView imageImg;
104. TextView titleTxt;
105. }
106. private class GalleryInfo
107. {
108. public String title;
109. public int drawable;
110. private boolean isSelect;
111. }
112. }

res/layout/album_gallery_item.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content">
5. <ImageView
6. android:id="@+id/photo_frame_column_02"
7. android:layout_width="86dp"
8. android:layout_height="90dp" />
9. <ImageView
10. android:id="@+id/image_column_02"
11. android:layout_width="65dp"
12. android:layout_height="60dp"
13. android:layout_marginLeft="11dp"
14. android:layout_marginTop="14dp"
15. android:scaleType="fitXY"/>
16. <TextView
17. android:id="@+id/photo_name_column_02"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:layout_below="@id/photo_frame_column_02"
21. android:layout_centerHorizontal="true"
22. android:paddingTop="2dp"
23. android:textColor="@color/white" />
24. </RelativeLayout>

res/layout/display_image.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical"
6. android:background="@color/white" >
7. <RelativeLayout android:layout_width="fill_parent"
8. android:layout_height="wrap_content">
9. <LinearLayout android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:orientation="vertical"
12. android:layout_marginTop="84dp"
13. android:layout_marginLeft="3dp">
14. <ImageView android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:src="@drawable/table_top" />
17. <ImageView android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:src="@drawable/table_under" />
20. </LinearLayout>
21. <HorizontalScrollView
22. android:id="@+id/galleryScroll"
23. android:layout_width="fill_parent"
24. android:layout_height="wrap_content"
25. android:scrollbars="none"
26. android:focusable="false"
27. >
28. <FrameLayout
29. android:layout_width="fill_parent"
30. android:layout_height="wrap_content"
31. android:focusable="false"
32. >
33. <LinearLayout
34. android:id="@+id/linear_id"
35. android:layout_width="1330dp"
36. android:layout_height="wrap_content"
37. android:orientation="horizontal"
38. android:focusable="false"
39. android:paddingLeft="12dp"
40. >
41. <GridView android:id="@+id/album_gallery"
42. android:layout_width="fill_parent"
43. android:gravity="center"
44. android:layout_height="wrap_content"
45. android:horizontalSpacing="1.0dp"
46. android:verticalSpacing="1.0dp"
47. android:stretchMode="spacingWidthUniform"
48. android:numColumns="auto_fit"
49. android:columnWidth="95dp"
50. android:focusable="false"
51. >
52. </GridView>
53. </LinearLayout>
54. </FrameLayout>
55. </HorizontalScrollView>
56. </RelativeLayout>
57. </LinearLayout>

效果图：

未滚动，如图所示：

滚动到中间，如图所示：

滚动到结尾，如图所示：