Android using Viewpager+gridview to achieve the first page navigation bar layout paging effect _android

Recently I tried to use Viewpager+gridview to achieve, it seems that everything is normal, nonsense not to say, the specific code is as follows:

As shown in the picture is the effect diagram

First of all, analyze the idea

1. The first is how the layout: The whole is a Viewpager add the GridView as a view to the adapter of Viewpager, with dots below

 <?xml version= "1.0" encoding= "Utf-8"?> <relativelayout "xmlns:android="
  /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 Andro Id:id= "@+id/points" android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:lay Out_alignparentbottom= "true" android:layout_marginbottom= "10DP" android:gravity= "center" Android:orienta tion= "Horizontal"/> </RelativeLayout> </RelativeLayout> 

2. The next time as the Viewpager item layout file GridView, (if the outermost is relativelayout or line layout, etc., will convert the exception)

<?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. Is the GridView adapter of the compilation, mainly attention to the number if a total of all=10 data, the most max=8 per page, the first page is the number of max=8, the second one on 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 Load Data adapter * @author Administrator * * */public class Mygridviewadpter extends baseadapter{private Co
  ntext context; Private list<prodctbean> lists;//data source private int mindex; The number of pages marked, the first few pages, starting from 0 private int mpargersize;//The maximum quantity public Mygridviewadpter per page (context, List<pro
    dctbean> lists, int mindex, int mpargersize) {this.context = context;
    this.lists = lists;
    This.mindex = Mindex;
  This.mpargersize = mpargersize; /** * First determine if the data and size are displayed full page lists.size () > (Mindex + 1) *mpagersize * If satisfied, this page will display the maximum number of lists * if not enough to display the maximum number per page, then The remaining few will show several * * @Override public intGetCount () {//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 a stub return Lists.get (Arg0 +
  Mindex * mpargersize); @Override public long Getitemid (int arg0) {//TODO auto-generated Method stub return arg0 + Mindex * mparg
  Ersize;  @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 (); }//re-OK position because the data source is always the one that is loaded, the final int pos = position + Mindex * mpargersize;//assumption Mpagesiez//hypothesis Mpag on the GridView on each page Ersize=8, if you clicked the second position item (position=1) on the second page (i.e. mindex=1), the actual position of the item is pos=9 Holder.tv_name.setText (POS)
    . GetName () + "");
    Holder.iv_nul.setImageResource (Lists.get (POS). GETURL ()); Add Item Monitor//Convertview.setonclicklistener (new View.onclicklistener () {///@Override//Public Voi D OnClick (View arg0) {////TODO auto-generated Method Stub//Toast.maketext (context, "you clicked" + Lists.get P
OS). GetName (), Toast.length_short). Show ();
    //      }
//    });
  return convertview;
    Static class viewholder{private TextView tv_name;
  Private ImageView Iv_nul;

 }
}

4.GridView Click event there are 2 ways to handle the adapter using the layout of the Click event, and the second is Object obj = gridview.getitematposition (position);

5. The main program adds the GridView as view to the Viewpager code as follows

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; /** * Implementation of the United States Group home navigation bar Layout page effect * @author Administrator * * * */public class MyActivity extends activity {private Viewpager VI
  Ewpager; Private LinearLayout group;//dot indicator private imageview[] ivpoints;//small dot picture collection private int totalpage; Total number of pages private int mpagesize = 8; The maximum number of displays per page private list<prodctbean> listdatas;//total data source private list<view> viewpagerlist;// The GridView is added to the Viewpager collection as a View object//private int currentpage;//The current page private string[] Proname ={"Name 0", "Name 1", "Name 2", "Name 3", "Name 4", "Name 5", "Name 6", "Name 7", "Name 8", "Name 9", "Name 10", "Name 11", "Name 12", "Name 13", "Name 14", "Name 15", "Name 16"
  "," name 17 "," Name 18 "," Name 19 "}; @Override protected void OnCreate (Bundle savedinstancestate) {//TODO auto-generated method stub super.oncreate
    (savedinstancestate);
    Setcontentview (r.layout.activity_my);
    Initialize control Initview ();
  Add business logic initdata (); private void Initview () {//TODO auto-generated method Stub Viewpager = (Viewpager) Findviewbyid (R.ID.VIEWP
    Ager);
    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)); The total number of pages of the private void InitData () {//TODO auto-generated Method Stub//is rounded up totalpage = (int) Math.ceil (li
    Stdatas.size () * 1.0/mpagesize);
    Viewpagerlist = new arraylist<view> ();
for (int i = 0; i < totalpage; i++) {      Each page is inflate out a new instance of the final gridview GridView = (GridView) view.inflate (this, r.layout.item_gridview, null);
      Gridview.setadapter (This, Listdatas, I, Mpagesize) (new Mygridviewadpter); Add Item click to listen Gridview.setonitemclicklistener (new Onitemclicklistener () {@Override public void Onit Emclick (adapterview<?> arg0, View arg1, int position, long Arg3) {//TODO auto-generated Meth
          od 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 ();
      }
        }
      });
    Each gridview is added to the Viewpager collection as a View object Viewpagerlist.add (GridView);
    
    //Set Viewpager adapter Viewpager.setadapter (new Myviewpageradapter (viewpagerlist));
    Add small dot ivpoints = new Imageview[totalpage]; for (int i = 0; i < totalpage;
      i++) {///follow bad add dot dot picture Group 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]); //Set Viewpager sliding monitoring, mainly to set the background color of the point of Change Viewpager.setonpagechangelistener (new Viewpager.simpleonpagechangelistener () {@Override public void onpageselected (int position) {//TODO auto-generated method stub//CU
        Rrentpage = position; for (int i=0 i < totalpage i++) {if (i = = position) {Ivpoints[i].setimageresource (R.drawable.pag
          E_focuese);
          }else {ivpoints[i].setimageresource (r.drawable.page_unfocused);
  }
        }
      }
    });

 }
}

6.ViewPage Adapter Code

Package com.item.jiejie.adapter;

Import java.util.List;
Import Android.support.v4.view.PagerAdapter;
Import Android.view.View;

Import Android.view.ViewGroup; /** * ViewPage Adapter * @author Administrator */public class Myviewpageradapter extends pageradapter{private Lis T<view> Viewlist;//view on 20 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 a stub retu
  RN arg0 = = arg1; /** * Adds current view to the ViewGroup container * This method, return an object that indicates which object the Pageradapter adapter chooses to place on the current ViewPage * * @Override P Ublic Object Instantiateitem (viewgroup container, int position) {//TODO auto-generated method stub Container.add
    View (Viewlist.get (position)); return Viewlist.get (position);
  @Override public void Destroyitem (ViewGroup container, int position, object) {//TODO Auto-generat
  Ed Method Stub Container.removeview ((View) object);

 }
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.