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;  9 import android.support.v4.view.ViewPager; 10 import android.view.View; 11 import android.widget.AdapterView; 12 import android.widget.AdapterView.OnItemClickListener; 13 import android.widget.GridView; 14 import android.widget.ImageView; 15 import android.widget.LinearLayout; 16 import android.widget.Toast; 17  18 /** 19  * 實現仿美團首頁導覽列布局分頁效果  20  * @author Administrator 21  * 22  */ 23 public class MyActivity extends Activity { 24     private ViewPager viewPager; 25     private LinearLayout group;//圓點指標 26     private ImageView[] ivPoints;//小圓點圖片的集合 27     private int totalPage; //總的頁數 28     private int mPageSize = 8; //每頁顯示的最大的數量 29     private List<ProdctBean> listDatas;//總的資料來源 30     private List<View> viewPagerList;//GridView作為一個View對象添加到ViewPager集合中 31     //private int currentPage;//當前頁 32      33     private String[] proName = {"名稱0","名稱1","名稱2","名稱3","名稱4","名稱5", 34             "名稱6","名稱7","名稱8","名稱9","名稱10","名稱11","名稱12","名稱13", 35             "名稱14","名稱15","名稱16","名稱17","名稱18","名稱19"}; 36     @Override 37     protected void onCreate(Bundle savedInstanceState) { 38         // TODO Auto-generated method stub 39         super.onCreate(savedInstanceState); 40         setContentView(R.layout.activity_my); 41         //初始化控制項 42         initView(); 43         //添加商務邏輯 44         initData(); 45     } 46      47     private void initView() { 48         // TODO Auto-generated method stub 49         viewPager = (ViewPager)findViewById(R.id.viewpager); 50         group = (LinearLayout)findViewById(R.id.points); 51         listDatas = new ArrayList<ProdctBean>(); 52         for(int i =0 ; i < proName.length; i++){ 53             listDatas.add(new ProdctBean(proName[i], R.drawable.iv_driving)); 54         } 55     } 56     private void initData() { 57         // TODO Auto-generated method stub 58         //總的頁數向上取整 59         totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize); 60         viewPagerList = new ArrayList<View>(); 61         for(int i = 0; i < totalPage; i++){ 62             //每個頁面都是inflate出一個新執行個體 63             final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null); 64             gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize)); 65             //添加item點擊監聽 66             gridView.setOnItemClickListener(new OnItemClickListener() { 67  68                 @Override 69                 public void onItemClick(AdapterView<?> arg0, View arg1, 70                         int position, long arg3) { 71                     // TODO Auto-generated method stub 72                     Object obj = gridView.getItemAtPosition(position); 73                     if(obj != null && obj instanceof ProdctBean){ 74                         System.out.println(obj); 75                         Toast.makeText(MyActivity.this, ((ProdctBean)obj).getName(), Toast.LENGTH_SHORT).show(); 76                     } 77                 } 78             }); 79             //每一個GridView作為一個View對象添加到ViewPager集合中             80             viewPagerList.add(gridView); 81         } 82         //設定ViewPager適配器 83         viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList)); 84          85         //添加小圓點 86         ivPoints = new ImageView[totalPage]; 87         for(int i = 0; i < totalPage; i++){ 88             //循壞加入點點圖片組 89             ivPoints[i] = new ImageView(this); 90             if(i==0){ 91                 ivPoints[i].setImageResource(R.drawable.page_focuese); 92             }else { 93                 ivPoints[i].setImageResource(R.drawable.page_unfocused); 94             } 95             ivPoints[i].setPadding(8, 8, 8, 8); 96             group.addView(ivPoints[i]); 97         } 98         //設定ViewPager的滑動監聽，主要是設定點點的背景顏色的改變 99         viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){100             @Override101             public void onPageSelected(int position) {102                 // TODO Auto-generated method stub103                 //currentPage = position;104                 for(int i=0 ; i < totalPage; i++){105                     if(i == position){106                         ivPoints[i].setImageResource(R.drawable.page_focuese);107                     }else {108                         ivPoints[i].setImageResource(R.drawable.page_unfocused);109                     }110                 }111             }112         });113     }114 }

6.ViewPage的適配器代碼

 1 package com.item.jiejie.adapter; 2  3 import java.util.List; 4  5 import android.support.v4.view.PagerAdapter; 6 import android.view.View; 7 import android.view.ViewGroup; 8  9 /**10  * ViewPage的適配器11  * @author Administrator12  *13  */14 public class MyViewPagerAdapter extends PagerAdapter{15     16     private List<View> viewList;//View就二十GridView17     18     19     public MyViewPagerAdapter(List<View> viewList) {20         this.viewList = viewList;21     }22 23     @Override24     public int getCount() {25         // TODO Auto-generated method stub26         return viewList!=null ? viewList.size() : 0;27     }28 29     @Override30     public boolean isViewFromObject(View arg0, Object arg1) {31         // TODO Auto-generated method stub32         return arg0 == arg1;33     }34     /**35      * 將當前的View添加到ViewGroup容器中36      * 這個方法，return一個對象，這個對象表明了PagerAdapter適配器選擇哪個對象放在當前的ViewPage上37      */38     @Override39     public Object instantiateItem(ViewGroup container, int position) {40         // TODO Auto-generated method stub41         container.addView(viewList.get(position));42         return viewList.get(position);43     }44     45     @Override46     public void destroyItem(ViewGroup container, int position, Object object) {47         // TODO Auto-generated method stub48          container.removeView((View) object);49     }50 }