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

功能要求：

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

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

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

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

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

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

public class DrawerHScrollView extends HorizontalScrollView {
    private static final String TAG = "DrawerHScrollView";
    
    private IDrawerPresenter drawerPresenter = null;
    private int currentPage = 0;
    private int totalPages = 1;
    private static Hashtable<Integer, Integer> positionLeftTopOfPages = new Hashtable();

    public DrawerHScrollView(Context context) {
        super(context);
    }

    public DrawerHScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DrawerHScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    
    public void cleanup(){
        currentPage = 0;
        totalPages = 1;
        drawerPresenter = null;
        if(positionLeftTopOfPages != null){
            positionLeftTopOfPages.clear();
        }
    }
    
    public void setParameters(int totalPages, int currentPage, int scrollDisX) {
        Log.d(TAG, "~~~~~setParameters totalPages:"+totalPages +",currentPage:"+ currentPage +",scrollDisX:"+scrollDisX);
        this.totalPages = totalPages;
        this.currentPage = currentPage;
        positionLeftTopOfPages.clear();
        for (int i = 0;i<totalPages;i++){
            int posx = (scrollDisX) * i;
            positionLeftTopOfPages.put(i, posx);
            Log.d(TAG, "~~~~~setParameters i:"+i +",posx:"+posx);
        }
        smoothScrollTo(0, 0);
    }
    
    public void setPresenter(IDrawerPresenter drawerPresenter ) {
        this.drawerPresenter = drawerPresenter;
    }
    
    @Override
    public void fling(int velocityX) {
        Log.v(TAG, "-->fling velocityX:"+velocityX);
        boolean change_flag = false;
        if (velocityX > 0 && (currentPage < totalPages - 1)){
            currentPage++;
            change_flag = true;
        } else if (velocityX < 0 && (currentPage > 0)){
            currentPage--;
            change_flag = true;
        }
        if (change_flag){
            int postionTo = (Integer)positionLeftTopOfPages.get(new Integer(currentPage)).intValue();
            Log.v(TAG, "------smoothScrollTo posx:"+postionTo);
            smoothScrollTo(postionTo, 0);
            drawerPresenter.dispatchEvent(totalPages, currentPage);
        }
        //super.fling(velocityX);
    }
}

2.      布局文件Activity_main.xml:

       <com.example.multilinegridview.DrawerHScrollView
            android:id="@+id/hscrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:scrollbars="none"
            android:layout_below="@id/layout_drawer_top"
            android:layout_above="@id/layout_pagenumber"
            android:background="#CCCCCC" >
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
                <GridView
                    android:id="@+id/gridView"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </com.example.multilinegridview.DrawerHScrollView>

3.      IDrawerPresenter接口（IDrawerPresenter.java）：

public interface IDrawerPresenter {
    IDrawerPresenter getInstance();
    void dispatchEvent(int totalPages, int currentPage);
}

4.      DrawerItem

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_item"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_gravity="center"
    android:background="#FFFFFF">
    <ImageView   
        android:id="@+id/ivIcon"  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"  />
    <TextView   
            android:id="@+id/tvTitle"  
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="优惠券1"
            android:textColor="#000000"
            android:textStyle="bold"/>
</LinearLayout> 

5.      MainActivity.java

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

     @Override
    public IDrawerPresenter getInstance() {
        return this;
    }

    @Override
    public void dispatchEvent(int totalPages, int currentPage) {
        Log.v(TAG, "~~~~dispatchEvent currentPage:" + currentPage);
        Message msg = Message.obtain();
        msg.what = MSG_DRAWER_UPDATE_PAGE_LAYOUT;
        msg.arg1 = totalPages;
        msg.arg2 = currentPage;
        handler.sendMessage(msg);
    }

(2)PageItemImageView和page indicator的更新

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

     protected class PageItemImageView extends ImageView {
        public PageItemImageView(Context context) {
            super(context);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                    R.drawable.icon_page_normal);
            this.setImageBitmap(bitmap);
        }
    }
     public void updateDrawerPageLayout(int total_pages, int sel_page) {
        Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page);
        layout_pagenumber.removeAllViews();
        if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){
            Log.e(TAG, "total_pages or sel_page is outofrange.");
            return;
        }
        for (int i = 0;i< total_pages;i++){
            if (i != 0){
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                params.setMargins(5, 0, 0, 0);
                layout_pagenumber.addView(new PageItemImageView(this), params);
            } else {
                layout_pagenumber.addView(new PageItemImageView(this));
            }
        }
        PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected);
        selItem.setImageBitmap(bitmap);
    }

(3)DrawerListAdapter

    private class DrawerListAdapter extends BaseAdapter {
        private final String TAG = "MyListAdapter";
        private LayoutInflater mInflater;
        private LinearLayout layout_item;
        private TextView tvTitle;
        private ImageView ivIcon;
        private final Context context;
        private int colWid;
        private int colHei;

        public DrawerListAdapter(Context context, int colWid, int colHei) {
            this.context = context;
            this.colWid = colWid;
            this.colHei = colHei;
            mInflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        public int getCount() {
            return drawerItemList.size();
        }

        public Object getItem(int position) {
            return drawerItemList.get(position);
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            DrawerItem item = drawerItemList.get(position);
            if (convertView == null) {
                convertView = mInflater.inflate(R.layout.drawer_item, null);
                layout_item = (LinearLayout) convertView
                        .findViewById(R.id.layout_item);
                ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
                tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
                if (colHei != 0 && colWid != 0) {
                    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                            colWid, colHei - 30);
                    ivIcon.setLayoutParams(params);
                }
                convertView.setTag(layout_item);
            } else {
                layout_item = (LinearLayout) convertView.getTag();
            }
            ivIcon.setImageResource(R.drawable.ic_launcher);
            tvTitle.setText(String.valueOf(position));
            return convertView;
        }
    }

(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;

                   }

    public void updateDrawerLayout() {
        if ((drawerItemList == null) || (drawerItemList.size() == 0)) {
            Log.d(TAG, "itemList is null or empty");
            return;
        }
        if (!hasMeasured){
            Log.d(TAG, "hasMeasured is false");
            return;
        }
        int scrollWid = hscrollview.getWidth();
        int scrollHei = hscrollview.getHeight();
        if (scrollWid <= 0 || scrollHei <= 0){
            Log.d(TAG, "scrollWid or scrollHei is less than 0");
            return;
        }
        
        int spaceing = 10;
        int colWid = (scrollWid - spaceing * 3) / 2;
        int colHei = (scrollHei - spaceing * 3) / 2;
        int numCols = (drawerItemList.size() - 1) / 2 + 1;
        int gridViewWid = numCols * colWid + (numCols + 1) * spaceing;
        // if numCols is odd (like 5), add blank space
        if (numCols % 2 == 1){
            gridViewWid += colWid + spaceing;
        }
        
        LayoutParams params = new LayoutParams(gridViewWid, scrollHei);
        gridView.setLayoutParams(params);
        gridView.setColumnWidth(colWid);
        gridView.setHorizontalSpacing(spaceing);
        gridView.setVerticalSpacing(spaceing);
        gridView.setStretchMode(GridView.NO_STRETCH);
        gridView.setNumColumns(numCols);

        adapter = new DrawerListAdapter(this, colWid, colHei);
        listener = new DrawerItemClickListener();
        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(listener);

        int pageNum = (drawerItemList.size() - 1) / 4 + 1;
        hscrollview.setParameters(pageNum, 0, scrollWid - spaceing);
        updateDrawerPageLayout(pageNum, 0);
    }

效果图：