Android 利用ViewPager+GridView实现首页导航栏布局分页效果

概述最近我尝试使用ViewPager+GridView实现的，看起来一切正常，废话不多说，具体代码如下：

最近我尝试使用VIEwPager+GrIDVIEw实现的，看起来一切正常，废话不多说，具体代码如下：

如图是效果图

 

首先分析下思路

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中 代码如下

package com.item.jIEjIE;import java.util.ArrayList;import java.util.List;import com.item.jIEjIE.adapter.MyGrIDVIEwAdpter;import com.item.jIEjIE.adapter.MyVIEwPagerAdapter;import androID.app.Activity;import androID.os.Bundle;import androID.support.v4.vIEw.VIEwPager;import androID.vIEw.VIEw;import androID.Widget.AdapterVIEw;import androID.Widget.AdapterVIEw.OnItemClickListener;import androID.Widget.GrIDVIEw;import androID.Widget.ImageVIEw;import androID.Widget.linearLayout;import androID.Widget.Toast;/** * 实现仿美团首页导航栏布局分页效果  * @author administrator * */public class MyActivity extends Activity {  private VIEwPager vIEwPager;  private linearLayout group;//圆点指示器  private ImageVIEw[] ivPoints;//小圆点图片的集合  private int totalPage; //总的页数  private int mPageSize = 8; //每页显示的最大的数量  private List<ProdctBean> ListDatas;//总的数据源  private List<VIEw> vIEwPagerList;//GrIDVIEw作为一个VIEw对象添加到VIEwPager集合中  //private int currentPage;//当前页    private String[] proname = {"名称0","名称1","名称2","名称3","名称4","名称5","名称6","名称7","名称8","名称9","名称10","名称11","名称12","名称13","名称14","名称15","名称16","名称17","名称18","名称19"};  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    // Todo auto-generated method stub    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_my);    //初始化控件    initVIEw();    //添加业务逻辑    initData();  }    private voID initVIEw() {    // Todo auto-generated method stub    vIEwPager = (VIEwPager)findVIEwByID(R.ID.vIEwpager);    group = (linearLayout)findVIEwByID(R.ID.points);    ListDatas = new ArrayList<ProdctBean>();    for(int i =0 ; i < proname.length; i++){      ListDatas.add(new ProdctBean(proname[i],R.drawable.iv_driving));    }  }  private voID initData() {    // Todo auto-generated method stub    //总的页数向上取整    totalPage = (int) Math.ceil(ListDatas.size() * 1.0 / mPageSize);    vIEwPagerList = new ArrayList<VIEw>();    for(int i = 0; i < totalPage; i++){      //每个页面都是inflate出一个新实例      final GrIDVIEw grIDVIEw = (GrIDVIEw)VIEw.inflate(this,R.layout.item_grIDvIEw,null);      grIDVIEw.setAdapter(new MyGrIDVIEwAdpter(this,ListDatas,i,mPageSize));      //添加item点击监听      grIDVIEw.setonItemClickListener(new OnItemClickListener() {        @OverrIDe        public voID onItemClick(AdapterVIEw<?> arg0,VIEw arg1,int position,long arg3) {          // Todo auto-generated method stub          Object obj = grIDVIEw.getItemAtposition(position);          if(obj != null && obj instanceof ProdctBean){            System.out.println(obj);            Toast.makeText(MyActivity.this,((ProdctBean)obj).getname(),Toast.LENGTH_SHORT).show();          }        }      });      //每一个GrIDVIEw作为一个VIEw对象添加到VIEwPager集合中            vIEwPagerList.add(grIDVIEw);    }    //设置VIEwPager适配器    vIEwPager.setAdapter(new MyVIEwPagerAdapter(vIEwPagerList));        //添加小圆点    ivPoints = new ImageVIEw[totalPage];    for(int i = 0; i < totalPage; i++){      //循坏加入点点图片组      ivPoints[i] = new ImageVIEw(this);      if(i==0){        ivPoints[i].setimageResource(R.drawable.page_focuese);      }else {        ivPoints[i].setimageResource(R.drawable.page_unfocused);      }      ivPoints[i].setpadding(8,8,8);      group.addVIEw(ivPoints[i]);    }    //设置VIEwPager的滑动监听，主要是设置点点的背景颜色的改变    vIEwPager.setonPagechangelistener(new VIEwPager.SimpleOnPagechangelistener(){      @OverrIDe      public voID onPageSelected(int position) {        // Todo auto-generated method stub        //currentPage = position;        for(int i=0 ; i < totalPage; i++){          if(i == position){            ivPoints[i].setimageResource(R.drawable.page_focuese);          }else {            ivPoints[i].setimageResource(R.drawable.page_unfocused);          }        }      }    });  }}

6.VIEwPage的适配器代码

package com.item.jIEjIE.adapter;import java.util.List;import androID.support.v4.vIEw.PagerAdapter;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;/** * VIEwPage的适配器 * @author administrator * */public class MyVIEwPagerAdapter extends PagerAdapter{    private List<VIEw> vIEwList;//VIEw就二十GrIDVIEw      public MyVIEwPagerAdapter(List<VIEw> vIEwList) {    this.vIEwList = vIEwList;  }  @OverrIDe  public int getCount() {    // Todo auto-generated method stub    return vIEwList!=null ? vIEwList.size() : 0;  }  @OverrIDe  public boolean isVIEwFromObject(VIEw arg0,Object arg1) {    // Todo auto-generated method stub    return arg0 == arg1;  }  /**   * 将当前的VIEw添加到VIEwGroup容器中   * 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的VIEwPage上   */  @OverrIDe  public Object instantiateItem(VIEwGroup container,int position) {    // Todo auto-generated method stub    container.addVIEw(vIEwList.get(position));    return vIEwList.get(position);  }    @OverrIDe  public voID destroyItem(VIEwGroup container,Object object) {    // Todo auto-generated method stub     container.removeVIEw((VIEw) object);  }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android 利用ViewPager+GridView实现首页导航栏布局分页效果全部内容，希望文章能够帮你解决Android 利用ViewPager+GridView实现首页导航栏布局分页效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。