ViewPager+GridView实现首页导航栏布局分页效果，viewpagergridview

ViewPager+GridView实现首页导航栏布局分页效果，viewpagergridview

如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果

Demo下载地址：http://download.csdn.net/detail/qq_29774291/9665889

首先分析下思路

1.首先是怎么布局：整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中，下方是圆点

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#CDCDCD" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#fff" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:id="@+id/points"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:gravity="center"
            android:orientation="horizontal" />
    </RelativeLayout>

</RelativeLayout>

2.接下来时作为ViewPager的item布局文件GridView，（如果最外层是RelativeLayout或线型布局等，会转换异常）

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="4">

</GridView>

3.是GridView适配器的编写，主要是注意数量如果一共有all=10条数据，每页最多max=8条的话，第一个页面就是个数是max=8，第二个就2个all-max

package com.item.jiejie.adapter;

import java.util.List;

import com.item.jiejie.ProdctBean;
import com.item.jiejie.R;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
 * GridView加载数据的适配器
 * @author Administrator
 *
 */
public class MyGridViewAdpter extends BaseAdapter{
    
    private Context context;
    private List<ProdctBean> lists;//数据源
    private int mIndex; // 页数下标，标示第几页，从0开始
    private int mPargerSize;// 每页显示的最大的数量
    
    
    
    public MyGridViewAdpter(Context context, List<ProdctBean> lists,
            int mIndex, int mPargerSize) {
        this.context = context;
        this.lists = lists;
        this.mIndex = mIndex;
        this.mPargerSize = mPargerSize;
    }

    /**
     * 先判断数据及的大小是否显示满本页lists.size() > (mIndex + 1)*mPagerSize
     * 如果满足，则此页就显示最大数量lists的个数
     * 如果不够显示每页的最大数量，那么剩下几个就显示几个
     */
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return lists.size() > (mIndex + 1) * mPargerSize ? 
                mPargerSize : (lists.size() - mIndex*mPargerSize);
    }

    @Override
    public ProdctBean getItem(int arg0) {
        // TODO Auto-generated method stub
        return lists.get(arg0 + mIndex * mPargerSize);
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return arg0 + mIndex * mPargerSize;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder holder = null;
        if(convertView == null){
            holder = new ViewHolder();
            convertView = View.inflate(context, R.layout.item_view, null);
            holder.tv_name = (TextView)convertView.findViewById(R.id.item_name);
            holder.iv_nul = (ImageView)convertView.findViewById(R.id.item_image);
            convertView.setTag(holder);
        }else {
            holder = (ViewHolder)convertView.getTag();
        }
        //重新确定position因为拿到的总是数据源，数据源是分页加载到每页的GridView上的
        final int pos = position + mIndex * mPargerSize;//假设mPageSiez
        //假设mPagerSize=8，假如点击的是第二页（即mIndex=1）上的第二个位置item(position=1),那么这个item的实际位置就是pos=9
        holder.tv_name.setText(lists.get(pos).getName() + "");
        holder.iv_nul.setImageResource(lists.get(pos).getUrl());
        //添加item监听
//        convertView.setOnClickListener(new View.OnClickListener() {
//            
//            @Override
//            public void onClick(View arg0) {
//                // TODO Auto-generated method stub
//                Toast.makeText(context, "您点击了"  + lists.get(pos).getName(), Toast.LENGTH_SHORT).show();
//            }
//        });
        return convertView;
    }
    static class ViewHolder{
        private TextView tv_name;
        private ImageView iv_nul;
    }
}

4.GridView的点击事件这里提供2种方法一种是在适配器用布局的点击事件来处理；第二种是Object obj = gridView.getItemAtPosition(position);来处理。

5.主程序将GridView作为View添加到ViewPager中 代码如下

  1 package com.item.jiejie;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 import com.item.jiejie.adapter.MyGridViewAdpter;
  6 import com.item.jiejie.adapter.MyViewPagerAdapter;
  7 import android.app.Activity;
  8 import android.os.Bundle;