android開發列表介面

android開發列表介面，上邊是一個顯示題目，下邊顯示的是表徵圖，中間顯示的是列表。

看一下效果吧

當滑鼠點擊上之後出現背景圖，下面看一下如何做出這樣的效果吧。

1.建立android工程

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

View Code

<?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類

輸入內容如下：

View Code

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.修改主布局檔案類

View Code

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中。