Android 利用ViewPager+GridView实现首页导航栏布局分页效果
程序员文章站
2024-03-02 21:07:40
最近我尝试使用viewpager+gridview实现的,看起来一切正常,废话不多说,具体代码如下:
如图是效果图
首先分析下思路
1.首...
最近我尝试使用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, 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, int position, object object) { // todo auto-generated method stub container.removeview((view) object); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。