App Inventor 2 的範例程式 - GotMath(1) - GUI 介面設計

GotMath是一支數學遊戲程式。

程式並非只有一種寫法，本範例只是提供參考，歡迎同學挑戰！

程式功能分析：
程式一開始會提供一個題目與六個數字，玩家必須利用這六個數字，在五個步驟中，利用加減乘除的運算求出與題目相符的數字。

例如：上圖程式題目為目標值為64，下方可用的數字組合有 3, 20, 10, 23, 1 和 8 六個數。玩家必須先選一個數，再選加減乘除四個運算元中的一個，再選第二個數字後完成第一個運算。在所有數字只能使用一次且都要使用的條件下，組合出目標值64。這個遊戲玩法簡單，但若要寫出這樣的遊戲，除了程式的四則運算邏輯要清楚外，會多次使用到亂數取值與條件判斷IF的程式技巧，適合已經學會基礎程式設計的進階挑戰！

開發步驟：

步驟一：首先設計出Screen1，如下圖

(1) TA_Program

動作：點選Layout中的TableArrangement元件，將其命名為TA_Program。

屬性：

• Columns設為2 / Rows 設為6
• Visible設為showing
• Width設為326 pixels

目的：可以整齊放置12個Label元件。

(2) LB_Q

動作：點選User Interface中的Label元件，將其命名為LB_Q。

屬性：

• BackgroundColor設為Red
• FontSize設為30
• Text設為 Q
• TextAlignment設為center
• TextColor設為White
• Width設為50 pixels / Height設為50 pixels

目的：顯示Q。介面美化。

(3) LB_Question

動作：點選User Interface中的Label元件，將其命名為LB_Question。

屬性：

• BackgroundColor設為Pink
• FontSize設為30
• Text清除預設值
• TextAlignment設為centerWidth設為268 pixels / Height設為50 pixels

目的：顯示題目。

(4) LB_T1~LB_T5

動作：點選User Interface中的Label元件，將其分別命名為LB_T1~LB_T5。

屬性：

• Text分別設為 1.、2.、3.、4.、5.
• TextAlignment設為center

目的：顯示運算式的編號。美化介面。

(5) LB_F1~LB_F5

動作：點選User Interface中的Label元件，將其分別命名為LB_F1~LB_F5。

屬性：

• FontSize設為30
• Text清除預設值
• TextAlignment設為center
• Width選擇Fill parent / Height設為50。

目的：顯示運算式的編號。美化介面。

(6) VA_Control

動作：點選Layout中的VerticalArrangement元件，將其命名為VA_Control。
目的：可以整齊放置3個TableArrangement元件。

(7) TA_Number

動作：點選Layout中的TableArrangement元件，將其命名為TA_Number。

屬性：

• Columns設為3 / Rows 設為2

目的：可以整齊放置6個數字按鈕元件。

(8) BN_N1~BN_N6

動作：點選User Interface中的Button元件，將其分別命名為BN_N1~BN_N6。

屬性：

• BackgroundColor設為Light Gray
• Enabled取消選擇
• FontSize設為15
• Shape設為rounded
• Text分別設為 N1、N2、N3、N4、N5、N6
• TextAlignment設為center
• TextColor設為White
• Width設為104 pixels / Height設為50 pixels

目的：顯示六個數字以利遊戲的進行。

(9) TA_Operate

動作：點選Layout中的TableArrangement元件，將其命名為TA_Number。

屬性：

• Columns設為4 / Rows 設為1

目的：可以整齊放置4個運算元按鈕元件。

(10) BN_Add、BN_Sub、BN_Mul、BN_Div

動作：點選User Interface中的Button元件，將其分別命名為
          BN_Add、BN_Sub、BN_Mul、BN_Div。

屬性：

• BackgroundColor設為Light Gray
• Enabled取消選擇
• FontBold需要勾選
• FontSize設為25
• Shape設為oval
• Text分別設為 ＋、－、×、÷
• TextAlignment設為center
• TextColor設為White
• Width設為78 pixels / Height設為60 pixels

目的：顯示4個運算元以利數值的運算。

(11) TA_Control

動作：點選Layout中的TableArrangement元件，將其命名為TA_Control。

屬性：

• Columns設為5 / Rows 設為1

目的：可以整齊放置5個控制按鈕元件。

(12) BN_New、BN_Ans、BN_Back、BN_Clean、BN_Ready

動作：點選User Interface中的Button元件，將其分別命名為
          BN_New、BN_Ans、BN_Back、BN_Clean、BN_Ready。

屬性：

• BackgroundColor
• BN_New與BN_Ready設為Dark Gray
• 其它設為Light Gray
• Enabled除了BN_New外取消選擇
• FontBold需要勾選
• FontSize設為15
• Shape設為rounded
• Text分別設為 新遊戲、答案、復原、清除、狀態
• TextAlignment設為center
• TextColor設為White
• Width設為
• BN_New與BN_Ready設為70 pixels
• 其它設為60 pixels
• Height設為60 pixels 

目的：BN_New–新遊戲；BN_Ans–顯示程式對於題目的計算過程；
          BN_Back–退回上一步；BN_Clean–清除所有操作紀錄；
          BN_Ready–顯示當前遊戲狀態(加油：遊戲中 / 恭喜：過關 / 有誤：答案與題目不相符)。

(註) 在本程式中BN_Ready只起到了一個Label的作用，但為了排版，仍以Buttoon建構

GotMath程式第一部分 - GUI介面設計完成