???? 相信很多人都喜歡iphone 酷炫的界面，雖然android的原生控件已經足夠漂亮，但是往往不能滿足用戶越來越挑剔的眼光。其實，我們完全可以自己來繪制界面。今天我就來分享下做一個和iphone一樣的tab界面。下面先來看下iphone上的效果

?

Android九宮格

?

主界面的布局：

    <?xml version="1.0" encoding="utf-8"?> 
<!--主界面的布局--> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"     
    android:orientation="vertical"     
    android:layout_width="fill_parent"     
    android:layout_height="fill_parent" 
    > 
        <RelativeLayout   
            android:id="@+id/MainActivityrlTwo" 
			android:layout_width="fill_parent" 
			android:layout_height="40dp" >
        </RelativeLayout> 
        <GridView  android:id="@+id/gridview"   
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"   
            android:numColumns="3"  
            android:columnWidth="50dp"   
            android:layout_below="@+id/MainActivityrlTwo" 
			android:layout_marginTop="5dp"  /> 
		<RelativeLayout     android:id="@+id/MainActivityrlThree"      
		    android:layout_width="fill_parent"     android:layout_height="60dp"      
		    android:layout_alignParentBottom="true"      >     
		    <TextView     android:id="@+id/tvLineBottom"      
		        android:layout_width="fill_parent"      
		        android:layout_height="wrap_content"     
		             />       
</RelativeLayout>       
</RelativeLayout> 
  

?

單元格布局：

    <?xml version="1.0" encoding="utf-8"?>
<!--九宮格每一格的布局--> 
<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"     
	android:orientation="vertical"     
	android:layout_width="fill_parent"     
	android:layout_height="fill_parent"     >     
	<ImageView   
	    android:id="@+id/MainActivityImage"  
	    android:layout_width="50dp" 
	     android:layout_height="50dp"   
	     android:layout_gravity="center_horizontal"   />  
     <TextView  
         android:id="@+id/MainActivityText"   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:layout_gravity="center_horizontal"   
         android:textSize="18sp" 
       	 android:lines="1"   
       	 android:layout_marginTop="8dp"   /> 
</LinearLayout> 
  

?

適配器：

    package com.easyway.ninebox;

import com.easyway.ninebox.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;
/**
 * 
 *  前段時間研究了下android中九宮格布局的實現。
 *  縱觀現在的應用程序,九宮格是非常常見的一種布局方式。
 *  很多優秀的手機應用程序都采用了這一布局
 * @Title: 
 * @Description: 實現TODO
 * @Copyright:Copyright (c) 2011
 * @Company:易程科技股份有限公司
 * @Date:2012-7-14
 * @author  longgangbai
 * @version 1.0
 */
public class ImageAdapter extends BaseAdapter {  
		private Context context;  
		public ImageAdapter(Context context) {   
			this.context=context;   
		}  
		private Integer[] images = {   //九宮格圖片的設置  
				R.drawable.railway,   
				R.drawable.railway,    
				R.drawable.railway,    
				R.drawable.railway,  
				R.drawable.railway,    
				R.drawable.railway,    
				R.drawable.railway,    
				R.drawable.railway,  
				R.drawable.railway   };   
		private String[] texts = {    
				//九宮格圖片下方文字的設置  
				"記錄支出",    
				"記錄收入",     
				"賬本管理",    
				"類別管理",     
				"查看圖表",  
				"收支對照",   
				"記錄心得",    
				"新聞公告",     
				"系統設置",     
		};  
		
		//get the number  
		 @Override  
		 public int getCount() {    
			 return images.length;  
		 }  
		 @Override  
		 public Object getItem(int position) {    
			 return position;   
		 }   
		 //get the current selector's id number  
		 @Override   
		 public long getItemId(int position) {    
			 return position;   
		 }  
		 //create view method 
		 @Override  
		 public View getView(int position, View view, ViewGroup viewgroup) {  
			ImgTextWrapper wrapper;
			if(view==null) {   
			     wrapper = new ImgTextWrapper(); 
				 LayoutInflater inflater = LayoutInflater.from(context);  
				 view = inflater.inflate(R.layout.grid_item, null);    view.setTag(wrapper); 
				 view.setPadding(15, 15, 15, 15);  //每格的間距  
			 } else {   
				 wrapper = (ImgTextWrapper)view.getTag();  
			 } 
			 wrapper.imageView = (ImageView)view.findViewById(R.id.MainActivityImage); 
			 wrapper.imageView.setBackgroundResource(images[position]);  
			 wrapper.textView = (TextView)view.findViewById(R.id.MainActivityText); 
			 wrapper.textView.setText(texts[position]);    
			 return view;   
		}  
		class ImgTextWrapper {  
			ImageView imageView;   
			TextView textView; 
		}  
}
  

?主頁面：

    package com.easyway.ninebox;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
/**
 * 九宮格的實現
 * 
 * @Title: 
 * @Description: 實現TODO
 * @Copyright:Copyright (c) 2011
 * @Company:易程科技股份有限公司
 * @Date:2012-7-14
 * @author  longgangbai
 * @version 1.0
 */
public class NineBoxActivity extends Activity {
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
	      super.onCreate(savedInstanceState);
	      setContentView(R.layout.main);
	      //實例化一個適配器
	      ImageAdapter adapter = new ImageAdapter(this);
	      //獲得GridView實例
	      GridView gridview = (GridView)findViewById(R.id.gridview);
	      //gridview.setNumColumns(3);//可以在xml中設置
	      //gridview.setGravity(Gravity.CENTER);//同上
	     //將GridView和數據適配器關聯
	      gridview.setAdapter(adapter);
    }
}
  

?

?

?

?

?

?

android UI進階之仿iphone的tab效果 （Android九宮格）