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