App Inventor 2基礎概念 靜宜大學資管系 楊子青

Presentation on theme: "App Inventor 2基礎概念 靜宜大學資管系 楊子青"— Presentation transcript:

1 App Inventor 2基礎概念 靜宜大學資管系 楊子青

2 匯出及匯入專案原始檔(.aia)

3 1. 元件與屬性 元件(Components) 元件是由一系列的屬性(Properties)所定義 構成使用者介面
如Button, Label, TextBox, and Canvas… 元件是由一系列的屬性(Properties)所定義 The values stored in the memory slots of each property determine how the component appears.

4 修改屬性，可以改變App的外觀 開啟Hello專案，修改Screen1屬性看看 BackgroundColor (背景顏色)： Orange
Title (螢幕上方文字)：貓咪變變變 ScreenOrientation (螢幕方向)： Landscape Portrait(直式)、Landscape(橫式) AppName (安裝至行動裝置的應用程式名稱)： 貓咪變身 Icon (安裝至行動裝置的圖示)： kitty.png

5 安裝後執行結果

6 調整Button1元件的屬性，以符合螢幕大小
Q：如何讓 按鈕置中？

7 2. 版面配置 Layout 水平排列 水平排列(超過視窗大小時可捲動) 表格排列 垂直排列 垂直排列(超過視窗大小時可捲動)

8 使用HorizontalArrangement元件
線上說明： 拖到LabelHello與ButtonSend間，設定屬性

9 將Button1拖到HorizontalArrangement1裡面

10 3. 回顧：用程式改變屬性 長按貓咪，變成獅子的照片並發出獅吼聲 這四行是程式的 循序結構

11 4. 程式基本流程結構(Flow Control)
There are three basic flow control constructs: Sequential (循序) Conditional or decision (條件) Loop (or iteration) (反覆)

12 Hour of Code一小時玩遊戲寫程式 可先選擇「經典迷宮」

13 (1) 循序結構

14 (2) 反覆結構1

15 反覆結構2

16 挑戰：反覆結構+循序結構

17 (3) 條件結構1

18 挑戰：條件結構2

19 App Inventor 2的條件與反覆結構 Q：如何讓貓咪與 獅子不斷互換？

20 運用程式的條件結構更換圖片聲音