在Windows Mobile平台的應用程式開發過程中,如何處理螢幕方向改變對程式帶來的影響是一個重要的問題。Allen Lee的文章《WM有約(四):處理旋轉螢幕》中講述了如何使用Mobile Client Software Factory中的OrientationAware控制項來處理螢幕方向改變,好處就是我們不用添加任何代碼。在我之前的文章《Docking and Anchoring Controls on Windows Mobile》和《建立Windows Mobile上相容性好的UI程式》中,提到了使用控制項自身的Docking and Anchoring來適應裝置螢幕方向的改變。今天在msdn的技術文章中,看到了一篇文章,《Developing Orientation-Aware and Resolution-Aware Windows Mobile-based Applications in Native Code》,講述了如何使用native code來處理裝置的portrait/landscape這兩個模式的改變對裝置UI帶來的影響,覺得有必要和大家分享一下。
該文章使用字謎遊戲Crossword為背景,在沒有處理裝置portrait/landscape模式之前,該程式是運行在portrait模式下的,然而在landscape模式下,有些控制項就不在螢幕顯示的範圍之內了,而且背景看上去也不對了,如1所示:
圖1:未經處理情況下的程式介面
解決的方法可以分為幾個步驟:
1. 準備一張320*320大小的背景圖片替換掉原來的240*320的圖片。
2. 在OnPaint事件處理中,修改添加背景圖片的代碼如下:
BitBlt(hDC, 0, 0, 320, 320, hMemDC, 0, 0, SRCCOPY);
3. 在WndProc 的WM_SIZE處理中,修改text box的寬度,代碼如下:
Code
1 case WM_SIZE:
2
3 {
4
5 HWND hEditBox = GetDlgItem(hWnd, IDC_MAIN_EDIT_BOX);
6
7 HWND hEnterButton = GetDlgItem(hWnd, IDC_MAIN_ENTER_BUTTON);
8
9 INT nWidth = LOWORD(lParam);
10
11
12
13 MoveWindow(hEditBox, 8, 4, nWidth - 70, 20, TRUE);
14
15 MoveWindow(hEnterButton, nWidth - 57, 4, 50, 20, TRUE);
16
17 }
18
19 break;
4. 寫一個函數來判斷當前螢幕的高度是否小於320,代碼如下:
Code
1 BOOL InWideMode()
2
3 {
4
5 int height = GetSystemMetrics(SM_CYSCREEN);
6
7 return (height < 320) ? TRUE : FALSE;
8
9 }
5. 在OnPaint事件處理中,添加提示框的處理,代碼如下:
Code
1 RECT rTallMode = { 25, 200, 230, 245 };
2
3 RECT rWideMode = { 240, 43, 311, 185 };
4
5 RECT& r = InWideMode() ? rWideMode : rTallMode;
6
7 HBITMAP hPattern = LoadBitmap(g_hInst, MAKEINTRESOURCE(IDB_PATTERN));
8
9 HBRUSH hNewBrush = CreatePatternBrush(hPattern);
10
11 HBRUSH hOldBrush = (HBRUSH)SelectObject(hDC, hNewBrush);
12
13 Rectangle(hDC, r.left, r.top, r.right, r.bottom);
14
15 SelectObject(hDC, hOldBrush);
16
17 DeleteObject(hNewBrush);
18
19 DeleteObject(hPattern);
6. 添加各個對話方塊在landscape模式下的對應情況,也就是在資源的對話方塊目錄中添加對應的***_WIDE對話方塊,並且對它的控制項做相應調整。
7. 在各自對話方塊的WM_SIZE處理中,修改代碼,使其能夠做出螢幕模式的適應。代碼如下:
Code
1 case WM_SIZE:
2
3 {
4
5 RelayoutDialog(g_hInst, hDlg, InWideMode() ?
6
7 MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1_WIDE) :
8
9 MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1));
10
11 }
12
13 return TRUE;
14
15
16
17 case WM_SIZE:
18
19 {
20
21 RelayoutDialog(g_hInst, hDlg, InWideMode() ?
22
23 MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_2_WIDE) :
24
25 MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_2));
26
27 }
28
29 return TRUE;
30
31
然後,重新編譯我們修改後的程式,並且在模擬器中進行調試,效果如2所示:
圖2:經過修改後的程式介面
參考連結:
WM有約(四):處理旋轉螢幕
Docking and Anchoring Controls on Windows Mobile
建立Windows Mobile上相容性好的UI程式
Developing Orientation-Aware and Resolution-Aware Windows Mobile-based Applications in Native Code