實現美團宮格導航ViewPager+GridView

本人新手，但是對安卓開發情有獨鍾

最近在開發一款社區的APP，之前客戶有定好需求，但是不知道後面爲什麼又改了，其中有一個就是要做想美團一樣的宮格導航，於是筆者昨晚弄出一個demo，主要用於學習。做出來效果還不錯。現在來秀一秀源碼。

佈局文件：

activity_main.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    	<android.support.v4.view.ViewPager
    	    android:id="@+id/vPager"
    	    android:layout_width="match_parent"
    	    android:layout_height="232dp"
    	    android:background="#ff0000" >
    	</android.support.v4.view.ViewPager>

    	<LinearLayout
    	    android:id="@+id/ll_dots"
    	    android:layout_width="match_parent"
    	    android:layout_height="20dp"
    	    android:layout_marginTop="200dp"
    	    android:gravity="center"
    	    android:orientation="horizontal" >
    	</LinearLayout>

</FrameLayout>

channel_gridview_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    
    <!-- ViewPager每頁GridView 的Item的佈局 -->
    <ImageView 
        android:id="@+id/iv_gv_item_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView 
        android:id="@+id/tv_gv_item_Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:ellipsize="end"/> 
          


</LinearLayout>

channel_viewpage_gridview.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    
   <!-- 每個頁面的GridView -->
   <GridView 
       android:id="@+id/vp_gv"
       android:layout_width="match_parent"
       android:layout_height="match_parent" 
       android:horizontalSpacing="10dp"
       android:verticalSpacing="10dp"
       android:gravity="center">
       
   </GridView>
   
        
</LinearLayout>

InfoBean.java：

package com.example.grid_pager;


import java.util.ArrayList;
import java.util.Collections;
import java.util.List;


import android.graphics.drawable.Drawable;
import android.view.View;

/**
 * 
 * @author Administrator
 * 這是用於顯示item的bean，朋友們可以根據自己的需求修改。
 * 
 *
 */
public class InfoBean implements Comparable<InfoBean>{

	private int id;  
    private String name;  
    private Drawable icon;  
    private String iconUrl;  
    private int iconID;  
    private String describtion;  
    private int type;  
    // 排序標記  
    private int order; 
    
    private onGridViewItemClickListener onClickListener; 
	
    
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Drawable getIcon() {
		return icon;
	}
	public void setIcon(Drawable icon) {
		this.icon = icon;
	}
	public String getIconUrl() {
		return iconUrl;
	}
	public void setIconUrl(String iconUrl) {
		this.iconUrl = iconUrl;
	}
	public int getIconID() {
		return iconID;
	}
	public void setIconID(int iconID) {
		this.iconID = iconID;
	}
	public String getDescribtion() {
		return describtion;
	}
	public void setDescribtion(String describtion) {
		this.describtion = describtion;
	}
	public int getType() {
		return type;
	}
	public void setType(int type) {
		this.type = type;
	}
	public int getOrder() {
		return order;
	}
	public void setOrder(int order) {
		this.order = order;
	}
	
	
	
	public InfoBean(String name, int iconID, int order) {
		super();
		this.name = name;
		this.iconID = iconID;
		this.order = order;
	}
	public InfoBean() {
		super();
	}
	
	
	@Override
	public int compareTo(InfoBean another) {
		if (another != null) {  
            if (this.getOrder() > another.getOrder()) {  
                return 1;  
            } else {  
                return -1;  
            }  
        } else {  
            return 0;  
        }  
	}  
	
	  public onGridViewItemClickListener getOnClickListener() {  
	        return onClickListener;  
	    }  
	    public void setOnClickListener(onGridViewItemClickListener onClickListener) {  
	        this.onClickListener = onClickListener;  
	    }
	    
	    //得到排序的List  
	    public static ArrayList<InfoBean> getOrderList(ArrayList<InfoBean> list) {  
	        Collections.sort(list);  
	        return list;  
	    }  
	    
    //item點擊監聽接口	    
    public interface onGridViewItemClickListener  
		    {  
		        public abstract void ongvItemClickListener(View v);  
		    }
	
	
}

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">MainActivity.java：</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="java">package com.example.grid_pager;

import java.util.ArrayList;

import com.example.grid_pager.adapter.ViewPager_GV_ItemAdapter;
import com.example.grid_pager.adapter.ViewPager_GridView_Adapter;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.WindowManager;
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
 *程序步驟：
 *    1.準備要顯示的數據
 *    2.加載視圖
 *    	2.1加載下面顯示頁的小圓點
 *      2.2顯示小圓點的位置
 *    3.設置ViewPager的Adapter
 *    4.設置每頁的GridView的Adapter
 */
public class MainActivity extends Activity {

	//準備數據
	ArrayList<InfoBean> list=null;
	InfoBean info=null;
	ViewPager viewPager;
	LinearLayout ll_dots;
    private ImageView[] dots;  
	  
	/** ViewPager頁數 */  
	 private int viewPager_size;
	//當前頁
	private int currentIndex;
	//gridView 頁面item的數量
	int pageItemCount;
	//頁面的寬高
	int width;
	int height;
	//保存每個GridView的視圖
	ArrayList<View> viewlist=null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		WindowManager wm=(WindowManager)this.getSystemService(this.WINDOW_SERVICE);
		width=wm.getDefaultDisplay().getWidth();
		height=wm.getDefaultDisplay().getHeight();
		Log.e("width", width+"");
		Log.e("height", height+"");
		list=getData();
		Log.e("size", list.size()+"");
		//初始化視圖
		initView();
	}
	private void initView() {
        viewPager=(ViewPager) findViewById(R.id.vPager);
        ll_dots=(LinearLayout) findViewById(R.id.ll_dots);
        initDots();
        setAdapter();
	}
	private void setAdapter() {
		viewlist=new ArrayList<View>();
		for(int i=0;i<viewPager_size;i++){
			viewlist.add(getGridViewItem(i));    //36
		}
		viewPager.setAdapter(new ViewPager_GridView_Adapter(viewlist));
	}
	//每個GridView頁面中的佈局
	private View getGridViewItem(int index) {
		LayoutInflater inflater=(LayoutInflater) this.getSystemService(this.LAYOUT_INFLATER_SERVICE);
		View layout=inflater.inflate(R.layout.channel_viewpage_gridview, null);
		GridView gridView=(GridView) layout.findViewById(R.id.vp_gv);
		
		int col=(width/160) >2 ?(width/160):3;
		
		Log.e("col", col+"");//3   4
		gridView.setNumColumns(col);
		//每個頁面的adapter
		ViewPager_GV_ItemAdapter adapter=new ViewPager_GV_ItemAdapter(this, list, index, pageItemCount);
		gridView.setAdapter(adapter);
		//設置gridView中點擊Item事件
		gridView.setOnItemClickListener(new OnItemClickListener() {

			

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				Toast.makeText(MainActivity.this, position + currentIndex * pageItemCount+"", Toast.LENGTH_SHORT).show();
					if(null !=list.get(position + currentIndex * pageItemCount).getOnClickListener()){
						list.get(position+currentIndex*pageItemCount).getOnClickListener().ongvItemClickListener(view);
					}
			}
		});
		return gridView;
	}
	private void initDots() {
		int col = (width/160) >2 ? (width/160) :3;   //3    4
        int row = (height/400) >4?(height/400):2;   //2     2
        pageItemCount = col * row;  //每一頁可裝item   //6
        //gridView 的頁數
        viewPager_size = list.size() / pageItemCount +1;  //5
  
        if (0 < viewPager_size) {  
            ll_dots.removeAllViews();  
            if (1 == viewPager_size) {  
                ll_dots.setVisibility(View.GONE);  
            } else if (1 < viewPager_size) {  
                ll_dots.setVisibility(View.VISIBLE);  
                for (int j = 0; j < viewPager_size; j++) {  
                    ImageView image = new ImageView(this);  
                    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);  //dot的寬高
                    params.setMargins(3, 0, 3, 0);  
                    image.setBackgroundResource(R.drawable.dot_unselected);  
                    ll_dots.addView(image, params);  
                }  
            }  
        }  
        if (viewPager_size != 1) {  
            dots = new ImageView[viewPager_size];  
            for (int i = 0; i < viewPager_size; i++) {
            	//從佈局中填充dots數組
                dots[i] = (ImageView) ll_dots.getChildAt(i);  
                //dots[i].setEnabled(true);  
                //dots[i].setTag(i);  
            }  
            currentIndex = 0;  //當前頁
            //dots[currentIndex].setEnabled(false);  
            dots[currentIndex].setBackgroundResource(R.drawable.dot_selected);
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
  
                @Override  
                public void onPageSelected(int arg0) {  
                    setCurDot(arg0);  
                }  
  
               

				@Override  
                public void onPageScrolled(int arg0, float arg1, int arg2) {  
                    // TODO Auto-generated method stub  
  
                }  
  
                @Override  
                public void onPageScrollStateChanged(int arg0) {  
                    // TODO Auto-generated method stub  
  
                }  
            });  
        }  
		
	}
	private ArrayList<InfoBean> getData() {
		list=new ArrayList<InfoBean>();
		for(int i=0;i<46;i++){
			info=new InfoBean("蘋果"+i, R.drawable.apple, i);
			list.add(info);
		}
		return list;
	}
	 private void setCurDot(int position) {
		 if (position < 0 || position > viewPager_size - 1 || currentIndex == position) {  
	            return;  
	        } 
	        for(int i=0;i<dots.length;i++){
	        	dots[i].setBackgroundResource(R.drawable.dot_unselected);
	        }
	        //dots[positon].setEnabled(false);  
	       // dots[currentIndex].setEnabled(true);  
	        dots[position].setBackgroundResource(R.drawable.dot_selected);
	        currentIndex = position;  
			
		}
}

ViewPager_GridView_Adapter.java：

package com.example.grid_pager.adapter;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
/**
 * 
 * @author Administrator
 *ViewPager的adapter
 */
public class ViewPager_GridView_Adapter extends PagerAdapter{
	ArrayList<View> viewlist;
	
	public ViewPager_GridView_Adapter(ArrayList<View> viewlist){
		this.viewlist=viewlist;
	}
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return viewlist.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		//return false;
		return arg0==(arg1);
	}
	
	public Object instantiateItem(View arg0, int arg1) {
		try {
		//解決View只能滑動兩屏的方法
		ViewGroup parent = (ViewGroup) viewlist.get(arg1).getParent();
		 if (parent != null) {
			 parent.removeAllViews();
		 } 
		//container.addView(v);
		((ViewPager) arg0).addView(viewlist.get(arg1),0);
		} catch (Exception e) {
		e.printStackTrace();
		}

		return viewlist.get(arg1);
		}


		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
		   try {
		    ((ViewPager) arg0).removeView(viewlist.get(arg1));
		} catch (Exception e) {
		// TODO: handle exception
		e.printStackTrace();
		}
		}

}

ViewPager_GV_ItemAdapter.java：

package com.example.grid_pager.adapter;

import java.util.ArrayList;
import java.util.List;

import com.example.grid_pager.InfoBean;
import com.example.grid_pager.R;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 
 * @author Administrator
 *每頁GridView的adapter
 */
public class ViewPager_GV_ItemAdapter extends BaseAdapter{

	private ArrayList<InfoBean> infolist;  
    private Context context;  
	   /** ViewPager頁碼 */  
	private int index;  
	    /** 根據屏幕大小計算得到的每頁item個數 */  
    private int pageItemCount;  
	    /** 傳進來的List的總長度 */  
    private int totalSize;  
	
	public ViewPager_GV_ItemAdapter(Context context,ArrayList<InfoBean> list){
		this.context=context;
		infolist=list;
	}
	
	 public ViewPager_GV_ItemAdapter(Context context, List<?> list, int index, int pageItemCount) {  
	        this.context = context;  
	        this.index = index;  
	        this.pageItemCount = pageItemCount;  
	        infolist = new ArrayList<InfoBean>();  
	        totalSize = list.size();  //36   40
	        // itemRealNum=list.size()-index*pageItemCount;  
	        // 當前頁的item對應的實體在List<?>中的其實下標  
	        int list_index = index * pageItemCount;  
	        for (int i = list_index; i < list.size(); i++) {  
	        	infolist.add((InfoBean) list.get(i));  
	        }  
	  
	    } 
	@Override
	public int getCount() {
		int size=totalSize/pageItemCount;
		if(index==size){
			return totalSize-pageItemCount*index;
		}else{
			return pageItemCount;
		}
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return infolist.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
       ViewHoler vh;
       if(convertView==null){
    	   vh=new ViewHoler();
    	   convertView=LayoutInflater.from(context).inflate(R.layout.channel_gridview_item, null);
    	   vh.iv_icon=(ImageView) convertView.findViewById(R.id.iv_gv_item_icon);
    	   vh.tv_mame=(TextView) convertView.findViewById(R.id.tv_gv_item_Name);
    	   convertView.setTag(vh);
       }else{
    	   vh=(ViewHoler) convertView.getTag();
       }
       vh.updateViews(position, null);
		return convertView;
	}
	  class ViewHoler{
      	ImageView iv_icon;
      	TextView tv_mame;
      	public void updateViews(int position, Object inst ){
      		iv_icon.setImageResource(infolist.get(position).getIconID());
      		tv_mame.setText(infolist.get(position).getName());
      	}
      }

}

小弟剛開始學些博客，所以還有很多要學習的地方，剛開始只會羅列代碼，所以有需要改進的地方希望大家多多提意見，小弟一定多家改正！！！

實現美團宮格導航ViewPager+GridView

實現美團宮格導航ViewPager+GridView

（循壞語句）輸出九九乘法口訣（面試）

（賦值運算付）short s=1, s = s+1; short s=1, s+=1; 上面兩個代碼有沒有問題，如果有，那裏有問題？

（數據類型）byte b1=3,b2=4,b; b=b1+b2; b=3+4; 哪句是編譯失敗的呢？面試題

oracle比較兩張相同數據表的差異？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結