隨便找個需求來練手，安卓實現酒店房態圖

 

 

最近看了視頻學會了GridView制作成導航控件，下載了一個九宮格的例子跑了跑，突發奇想，用這個做酒店系統的房態圖應該是可以的。

一邊改一邊按腦子里的想法PS出需要的圖標。OK第一版出來了：

 

Q&A：

1）怎么實現豐富的房態表現？

常規的酒店房態分： VC（ok房，空的干凈房）、VD(空臟房)、OC（占用的干凈房）、OD（占用的臟房）

客人狀態：

a.客人來源渠道的狀態:   散客、團體、VIP、會員等

b.客人狀態：1人，2人，多人；性別

c.客人帳務狀態:在住、離退、掛賬、欠費

要在小小的圖標反應那么多種狀態單純切換圖片是不科學的，安卓布局里面有個FrameLayout布局，可實現多個圖片重疊。這樣多種組合就實現了表達多種狀態的需求。

 

看到沒有，背景圖片不變，里面的小圓圈里的圖片變化就實現了描述 VC、VD、OC、OD這幾種房態。需要更多的狀態多加控件就能OK了。

這里寫下布局的xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imageView_ItemImage"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/roombg" >
    </ImageView>
    
    <ImageView
        android:id="@+id/imageView_roomstatus"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_marginTop="12dp"
        android:layout_marginLeft="12dp"
        android:src="@drawable/vc" >
    </ImageView>
       
    <TextView
        android:id="@+id/textView_ItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="12dp"
        android:text="TextView" >
    </TextView>

</FrameLayout>

 

2）博主你確定腦子沒有被門夾過，手機跑房態有什么意思，你家里人知道嗎？

a.有意思的，現在的智能手機上能操作傳統軟件，我是覺得蠻酷的，可以丟掉笨重的台式機，而且用戶體驗剛剛的，酷啊！

b.加了1000個房間（圖標）流程得沒得說。

c.完這個也是帶着需求學安卓UI設計而已，不要那么認真哦。

 

好了，完善完善出來見人了，第二版：

 

關鍵代碼解析：

1）圖標狀態改變，刷新觸點到的圖標

class gridView1OnClickListener implements OnItemClickListener {

		public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
				long arg3) {
			// TODO Auto-generated method stub
			Object obj = _gridView1.getAdapter().getItem(arg2);
			HashMap<String, Object> map = (HashMap<String, Object>) obj;
			String str = (String) map.get("itemText");
			String rmst = map.get("RoomStatus").toString();
			map.clear();
			map.put("itemImage", R.drawable.roombg);
			if (Integer.parseInt(rmst) == R.drawable.vd)
				map.put("RoomStatus", R.drawable.vc);
			else
				map.put("RoomStatus", R.drawable.oc);
			map.put("itemText", str);
			lst.set(arg2, map);
			SimpleAdapter sa = (SimpleAdapter) _gridView1.getAdapter();
			sa.notifyDataSetChanged();
			Toast.makeText(getApplicationContext(), "" + str, 0).show();
		}

	}

 就是改變SimpleAdapter里的對應於觸點到的那個圖標，再調用notifyDataSetChanged進行局部刷新。

 

2)綁定數據源

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);

		setContentView(R.layout.layout_main);

		_txtLoginName = (TextView) findViewById(R.id.txtLoginName);
		_gridView1 = (GridView) findViewById(R.id.gridView1);

		_txtLoginName.setText("當前用戶： "
				+ LoginUser.getCurrentLoginUser().getName());

		lst = new ArrayList<HashMap<String, Object>>();
		for (int i = 0; i < 1000; i++) {
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("itemImage", R.drawable.roombg);

			if (i % 2 == 1) {
				map.put("itemText", "標房." + (1000 + i));
				map.put("RoomStatus", R.drawable.vc);
			} else {

				if (i > 220) {
					map.put("itemText", "套房." + (1000 + i));
					map.put("RoomStatus", R.drawable.oc);
				} else if (i > 820) {
					map.put("itemText", "套房." + (1000 + i));
					map.put("RoomStatus", R.drawable.oc);
				} else {
					map.put("itemText", "大床." + (1000 + i));
					map.put("RoomStatus", R.drawable.vd);
				}
			}
			lst.add(map);
		}

		SimpleAdapter adpter = new SimpleAdapter(this, lst,
				R.layout.layout_gridview_item, new String[] { "itemImage",
						"RoomStatus", "itemText" }, new int[] {
						R.id.imageView_ItemImage, R.id.imageView_roomstatus,
						R.id.textView_ItemText });

		_gridView1.setAdapter(adpter);

		_gridView1.setOnItemClickListener(new gridView1OnClickListener());
	}

 

3)GridView的Item自定義視圖

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imageView_ItemImage"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/roombg" >
    </ImageView>
    
    <ImageView
        android:id="@+id/imageView_roomstatus"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_marginTop="12dp"
        android:layout_marginLeft="12dp"
        android:src="@drawable/vc" >
    </ImageView>
       
    <TextView
        android:id="@+id/textView_ItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="12dp"
        android:text="TextView" >
    </TextView>

</FrameLayout>

 關鍵是使用幀布局FrameLayout，重疊多個ImageView來實現多種狀態圖標的展示。

 

 

ps:第一次寫安卓開發文章，簡單一點嗎，格式啥的湊合下，呵呵呵...

 

需要下載源碼的，請猛點這里：

安卓實現酒店房態圖。