Android中如何实现多行、水平滚动的分页的Gridview？

功能要求：

(1)比如每页显示2X2，总共2XN，每个item显示图片+文字（点击有链接）。

如果单行水平滚动，可以用Horizontalscrollview实现。

如果是多行水平滚动，则结合Gridview（一般是垂直滚动的）和Horizontalscrollview实现。

(2)水平滚动翻页，下面有显示当前页的icon。

1.      实现自定义的HorizontalScrollView（HorizontalScrollView.java）：

因为要翻页时需要传当前页给调用者，所以fling函数中自己实现而不要调用父类的fling。

1. public class DrawerHScrollView extends HorizontalScrollView {
2. private static final String TAG = "DrawerHScrollView";
3. private IDrawerPresenter drawerPresenter = null;
4. private int currentPage = 0;
5. private int totalPages = 1;
6. private static Hashtable<Integer, Integer> positionLeftTopOfPages = new Hashtable();
7. public DrawerHScrollView(Context context) {
8. super(context);
9. }
10. public DrawerHScrollView(Context context, AttributeSet attrs) {
11. super(context, attrs);
12. }
13. public DrawerHScrollView(Context context, AttributeSet attrs, int defStyle) {
14. super(context, attrs, defStyle);
15. }
16. public void cleanup(){
17. currentPage = 0;
18. totalPages = 1;
19. drawerPresenter = null;
20. if(positionLeftTopOfPages != null){
21. positionLeftTopOfPages.clear();
22. }
23. }
24. public void setParameters(int totalPages, int currentPage, int scrollDisX) {
25. Log.d(TAG, "~~~~~setParameters totalPages:"+totalPages +",currentPage:"+ currentPage +",scrollDisX:"+scrollDisX);
26. this.totalPages = totalPages;
27. this.currentPage = currentPage;
28. positionLeftTopOfPages.clear();
29. for (int i = 0;i<totalPages;i++){
30. int posx = (scrollDisX) * i;
31. positionLeftTopOfPages.put(i, posx);
32. Log.d(TAG, "~~~~~setParameters i:"+i +",posx:"+posx);
33. }
34. smoothScrollTo(0, 0);
35. }
36. public void setPresenter(IDrawerPresenter drawerPresenter ) {
37. this.drawerPresenter = drawerPresenter;
38. }
39. @Override
40. public void fling(int velocityX) {
41. Log.v(TAG, "-->fling velocityX:"+velocityX);
42. boolean change_flag = false;
43. if (velocityX > 0 && (currentPage < totalPages - 1)){
44. currentPage++;
45. change_flag = true;
46. } else if (velocityX < 0 && (currentPage > 0)){
47. currentPage--;
48. change_flag = true;
49. }
50. if (change_flag){
51. int postionTo = (Integer)positionLeftTopOfPages.get(new Integer(currentPage)).intValue();
52. Log.v(TAG, "------smoothScrollTo posx:"+postionTo);
53. smoothScrollTo(postionTo, 0);
54. drawerPresenter.dispatchEvent(totalPages, currentPage);
55. }
56. //super.fling(velocityX);
57. }
58. }

2.      布局文件Activity_main.xml:

1. <com.example.multilinegridview.DrawerHScrollView
2. android:id="@+id/hscrollview"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:layout_margin="10dp"
6. android:scrollbars="none"
7. android:layout_below="@id/layout_drawer_top"
8. android:layout_above="@id/layout_pagenumber"
9. android:background="#CCCCCC" >
10. <LinearLayout
11. android:layout_width="fill_parent"
12. android:layout_height="wrap_content"
13. android:orientation="horizontal" >
14. <GridView
15. android:id="@+id/gridView"
16. android:layout_width="fill_parent"
17. android:layout_height="wrap_content" />
18. </LinearLayout>
19. </com.example.multilinegridview.DrawerHScrollView>

3.      IDrawerPresenter接口（IDrawerPresenter.java）：

1. public interface IDrawerPresenter {
2. IDrawerPresenter getInstance();
3. void dispatchEvent(int totalPages, int currentPage);
4. }

4.      DrawerItem

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:id="@+id/layout_item"
3. android:orientation="vertical"
4. android:layout_width="match_parent"
5. android:layout_height="wrap_content"
6. android:gravity="center"
7. android:layout_gravity="center"
8. android:background="#FFFFFF">
9. <ImageView
10. android:id="@+id/ivIcon"
11. android:layout_width="wrap_content"
12. android:layout_height="wrap_content"
13. android:src="@drawable/ic_launcher"  />
14. <TextView
15. android:id="@+id/tvTitle"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:text="优惠券1"
19. android:textColor="#000000"
20. android:textStyle="bold"/>
21. </LinearLayout>

5.      MainActivity.java

(1)实现IDrawerPresenter接口，在HorizontalScrollView里通过IDrawerPresenter接口来返回当前页，从而更新pageindicator。

1. @Override
2. public IDrawerPresenter getInstance() {
3. return this;
4. }
5. @Override
6. public void dispatchEvent(int totalPages, int currentPage) {
7. Log.v(TAG, "~~~~dispatchEvent currentPage:" + currentPage);
8. Message msg = Message.obtain();
9. msg.what = MSG_DRAWER_UPDATE_PAGE_LAYOUT;
10. msg.arg1 = totalPages;
11. msg.arg2 = currentPage;
12. handler.sendMessage(msg);
13. }

(2)PageItemImageView和page indicator的更新

PageItemImageView显示normal的page indicator，之后再将当前页的图片换成selected。

1. protected class PageItemImageView extends ImageView {
2. public PageItemImageView(Context context) {
3. super(context);
4. Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
5. R.drawable.icon_page_normal);
6. this.setImageBitmap(bitmap);
7. }
8. public void updateDrawerPageLayout(int total_pages, int sel_page) {
9. Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page);
10. layout_pagenumber.removeAllViews();
11. if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){
12. Log.e(TAG, "total_pages or sel_page is outofrange.");
13. return;
14. }
15. for (int i = 0;i< total_pages;i++){
16. if (i != 0){
17. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
18. params.setMargins(5, 0, 0, 0);
19. layout_pagenumber.addView(new PageItemImageView(this), params);
20. } else {
21. layout_pagenumber.addView(new PageItemImageView(this));
22. }
23. }
24. PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page);
25. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected);
26. selItem.setImageBitmap(bitmap);

(3)DrawerListAdapter

1. private class DrawerListAdapter extends BaseAdapter {
2. private final String TAG = "MyListAdapter";
3. private LayoutInflater mInflater;
4. private LinearLayout layout_item;
5. private TextView tvTitle;
6. private ImageView ivIcon;
7. private final Context context;
8. private int colWid;
9. private int colHei;
10. public DrawerListAdapter(Context context, int colWid, int colHei) {
11. this.context = context;
12. this.colWid = colWid;
13. this.colHei = colHei;
14. mInflater = (LayoutInflater) context
15. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
16. }
17. public int getCount() {
18. return drawerItemList.size();
19. }
20. public Object getItem(int position) {
21. return drawerItemList.get(position);
22. }
23. public long getItemId(int position) {
24. return position;
25. }
26. public View getView(int position, View convertView, ViewGroup parent) {
27. DrawerItem item = drawerItemList.get(position);
28. if (convertView == null) {
29. convertView = mInflater.inflate(R.layout.drawer_item, null);
30. layout_item = (LinearLayout) convertView
31. .findViewById(R.id.layout_item);
32. ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
33. tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
34. if (colHei != 0 && colWid != 0) {
35. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
36. colWid, colHei - 30);
37. ivIcon.setLayoutParams(params);
38. }
39. convertView.setTag(layout_item);
40. } else {
41. layout_item = (LinearLayout) convertView.getTag();
42. }
43. ivIcon.setImageResource(R.drawable.ic_launcher);
44. tvTitle.setText(String.valueOf(position));
45. return convertView;
46. }
47. }

(4)DrawerItemClickListener:

实现OnItemClickListener。

(5) updateDrawerLayout

获得data的size后，可以算出列数来得到固定行。

intnumCols = (drawerItemList.size() - 1) / 2 + 1

再算出gridview的width。因每页可显示2列，最后一页可能右侧没有，为了翻页顺滑，可以给gridview增加一列空白。

intgridViewWid = numCols * colWid + (numCols + 1) * spaceing;

if(numCols % 2 == 1){

gridViewWid+= colWid + spaceing;

}

1. public void updateDrawerLayout() {
2. if ((drawerItemList == null) || (drawerItemList.size() == 0)) {
3. Log.d(TAG, "itemList is null or empty");
4. return;
5. }
6. if (!hasMeasured){
7. Log.d(TAG, "hasMeasured is false");
8. return;
9. }
10. int scrollWid = hscrollview.getWidth();
11. int scrollHei = hscrollview.getHeight();
12. if (scrollWid <= 0 || scrollHei <= 0){
13. Log.d(TAG, "scrollWid or scrollHei is less than 0");
14. return;
15. }
16. int spaceing = 10;
17. int colWid = (scrollWid - spaceing * 3) / 2;
18. int colHei = (scrollHei - spaceing * 3) / 2;
19. int numCols = (drawerItemList.size() - 1) / 2 + 1;
20. int gridViewWid = numCols * colWid + (numCols + 1) * spaceing;
21. // if numCols is odd (like 5), add blank space
22. if (numCols % 2 == 1){
23. gridViewWid += colWid + spaceing;
24. }
25. LayoutParams params = new LayoutParams(gridViewWid, scrollHei);
26. gridView.setLayoutParams(params);
27. gridView.setColumnWidth(colWid);
28. gridView.setHorizontalSpacing(spaceing);
29. gridView.setVerticalSpacing(spaceing);
30. gridView.setStretchMode(GridView.NO_STRETCH);
31. gridView.setNumColumns(numCols);
32. adapter = new DrawerListAdapter(this, colWid, colHei);
33. listener = new DrawerItemClickListener();
34. gridView.setAdapter(adapter);
35. gridView.setOnItemClickListener(listener);
36. int pageNum = (drawerItemList.size() - 1) / 4 + 1;
37. hscrollview.setParameters(pageNum, 0, scrollWid - spaceing);
38. updateDrawerPageLayout(pageNum, 0);
39. }

效果图：