【转】android UI进阶之仿iphone的tab效果 （Android九宫格）

     相信很多人都喜欢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);
    }
}