android开发列表界面，上边是一个显示题目，下边显示的是图标，中间显示的是列表。

看一下效果吧

当鼠标点击上之后出现背景图，下面看一下如何做出这样的效果吧。

1.创建android工程

修改main.xml中的内容如下:

<?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">
 <LinearLayout android:layout_height="28px"
 android:layout_width="fill_parent" android:orientation="horizontal"
 android:gravity="center_vertical" android:paddingLeft="5px"
 android:background="@drawable/top_bg">
 <ImageView android:layout_width="25px"
 android:layout_height="18px" android:src="@drawable/manage"></ImageView>
 <TextView android:layout_width="wrap_content"
 android:layout_height="wrap_content" android:textColor="#000"
 android:textSize="14px" android:text="Account"></TextView>
 </LinearLayout>

 <!-- 中间的列表 -->
 <GridView android:id="@+id/gv_apps" android:layout_height="fill_parent"
 android:layout_width="fill_parent" android:numColumns="3"
 android:horizontalSpacing="20px" android:verticalSpacing="20px"
 android:listSelector="@drawable/choose_gridview"
 android:layout_marginTop="28px" android:layout_marginBottom="50px"
 android:layout_marginLeft="5px" android:layout_marginRight="5px"></GridView>

 <RelativeLayout android:layout_width="fill_parent"
 android:layout_height="34px" android:layout_alignParentBottom="true"
 android:background="@drawable/bottom_bg">
 <ImageButton android:id="@+id/ib_change_view"
 android:layout_alignParentLeft="true" android:layout_marginLeft="5px"
 android:layout_marginTop="1px" android:background="@drawable/button1"
 android:layout_width="32px" android:layout_height="32px"></ImageButton>
 <ImageButton android:id="@+id/ib_change_view"
 android:layout_alignParentLeft="true" android:layout_marginLeft="50px"
 android:layout_marginTop="1px" android:background="@drawable/button2"
 android:layout_width="32px" android:layout_height="32px"></ImageButton>
 <ImageButton android:id="@+id/ib_change_view"
 android:layout_alignParentLeft="true" android:layout_marginLeft="100px"
 android:layout_marginTop="1px" android:background="@drawable/button3"
 android:layout_width="32px" android:layout_height="32px"></ImageButton>
 <ImageButton android:id="@+id/ib_change_category"
 android:layout_alignParentLeft="true" android:layout_marginLeft="150px"
 android:layout_marginTop="1px" android:background="@drawable/button4"
 android:layout_width="32px" android:layout_height="32px"></ImageButton>
 </RelativeLayout>

</RelativeLayout>

在这里边用了两个布局

RelativeLayout:children是相互之间相关位置或者和他们的parent位置相关，常用在form中

LinearLayout:children排列成一行多列或者一列多行的形式，这种layout最常见

GridView 显示的是网格的布局，一般可以加入各种adapter，这是适配器的典型实现。android中面向对象做的真的不错。。。

2.添加GridViewAdapter.java类

输入内容如下：

public class GridViewAdapter extends BaseAdapter{
 //存放各个元素
 private List<ViewItem> listItem = new ArrayList<ViewItem>();
 
 // 将一个xml文件转化成视图
 LayoutInflater inFlater;
 
 public GridViewAdapter(Context context){
 this.inFlater = LayoutInflater.from(context);
 init();
 }
 
 private void init(){
 //先在这里初始化，以后放到数据库里
 ViewItem vi1 = new ViewItem();
 vi1.setName("记录账目");
 vi1.setImgName(R.drawable.img1);
 ViewItem vi2 = new ViewItem();
 vi2.setName("记录账目");
 vi2.setImgName(R.drawable.img2);
 ViewItem vi3 = new ViewItem();
 vi3.setName("记录账目");
 vi3.setImgName(R.drawable.img3);
 ViewItem vi4 = new ViewItem();
 vi4.setName("记录账目");
 vi4.setImgName(R.drawable.img4);
 ViewItem vi5 = new ViewItem();
 vi5.setName("记录账目");
 vi5.setImgName(R.drawable.img5);
 ViewItem vi6 = new ViewItem();
 vi6.setName("记录账目");
 vi6.setImgName(R.drawable.img6);
 listItem.add(vi1);
 listItem.add(vi2);
 listItem.add(vi3);
 listItem.add(vi4);
 listItem.add(vi5);
 listItem.add(vi6);
 }

 public int getCount() {
 // TODO Auto-generated method stub
 return listItem.size();
 }

 public Object getItem(int arg0) {
 // TODO Auto-generated method stub
 return arg0;
 }

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

 public View getView(int arg0, View arg1, ViewGroup arg2) {
 // TODO Auto-generated method stub
 View view = inFlater.inflate(R.layout.gv_item, null);
 TextView tv = (TextView) view.findViewById(R.id.gv_item_appname);
 ImageView iv = (ImageView) view.findViewById(R.id.gv_item_icon);
 
 tv.setText(listItem.get(arg0).getName());
 iv.setImageResource(listItem.get(arg0).getImgName());
 
 return view;
 }

}

配置适配器，并且将xml转化成视图处理。

继承BaseAdapter，并且实现里面的方法。

3.修改主布局文件类

public class AccountMain extends Activity {
 /** Called when the activity is first created. */
 private GridView gv;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 
 // 去除title
 requestWindowFeature(Window.FEATURE_NO_TITLE);
 // 全屏
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
 WindowManager.LayoutParams.FLAG_FULLSCREEN);
 
 setContentView(R.layout.main);

 gv = (GridView) this.findViewById(R.id.gv_apps);

 gv.setAdapter(new GridViewAdapter(AccountMain.this));
 }
}

先是实例化GridView，然后将对应的适配器信息传入，这样就得到了上面的效果！

其中ImageButton的属性android:src如果设置的图片较大则全部显示，解决的办法是要么用android:background，要么干脆换成ImageView。

这只是其中的一个界面的演示，这块的init部分可以再做进一步的处理，可以做动态的配置。

可以将配置信息配置到配置文件中或者将对应信息配置到数据库中，即SqlLite中。