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);    }}

更多相关文章

随机推荐

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

更多相关文章

随机推荐

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