常用元件應用

使用者介面+界面布局:表格布局、水平布局、垂直布局  多媒體(Media) 繪圖動畫(Drawing and Animation)感測器&通訊連接其他元件雲端應用
2015/08/14 謝碧景(c)編製更新 

 學習目標 MIT App Inventor

  • 學會Palette(元件面板)中【User Interface(使用者介面)】類別之元件編排與設計應用(以範例引導)。
  • 學會Palette(元件面板)中【Layout(界面布局)】類別之元件編排與設計應用(以範例引導)。
  • 學會Math算數運算指令及變數之設計與應用
  • 學會元件、事件、屬性、方法之設計與應用

 除前述範例練習中引用使用者界面(User Interface)中Label 標籤、Button 按鈕、Image 圖片及 Slider 滑桿等元件及多媒體(Media)中Sound 音效元件外,下述將簡介其他常用元件之應用。

一、Layout 界面布局

 Layout 界面布局:該元件具有容器的概念,將其他元件加入該元件裡面,會依指定方式編排對齊;對齊方式有 TableArrangement表格布局、VerticalArrangement垂直布局、HorizontalArrangement水平布局,如下圖。

語系→English:
 語系→繁體中文:
 元件簡述:Palette→Layout
《摘自: AppInventor中文學習網

 
HorizontalArrangement(水平布局)、VerticalArrangement(垂直布局)元件的常用屬性如下:

屬性 說明 
 水平對齊  設定水平對齊方式。
 垂直對齊  設定 垂直對齊方式
 顯示狀態  設定是否在螢幕中顯示元件。
*註:參閱內建指令說明:Layout(界面布局)→HorizontalArrangement(橫向排列)、VerticalArrangement(垂直排列)TableArrangement(表格排列)《摘自: AppInventor中文學習網

二、範例應用

homework  練習4號碼顯示【重點:學會 HorizontalArrangementVerticalArrangementPasswordTextBox1(密碼輸入器)、TextBox(文字方塊)等元件之設計與應用】。(專案名稱: Display.aia)

(一) 外觀編排(Designer)頁面:即版面配置頁面。

 

 
TextBox (文字方塊)元件的常用屬性如下:

 屬性 說明 
 啟用 (Enabled)  設定元件是否可用,即是否可輸入文字。
 字元尺寸 (FontSize)  設定文字大小,預設值為「14」。
 提示 (Hint)  設定提示文字,執行時尚未輸入資料所顯示的提醒文字。
 允許多行 (MultiLine)  設定可否輸入多行之文字。
 僅限數字 (NumbersOnly)  設定只能輸入數字資料
 文字 (Text)  設定顯示的文字。
 顯示狀態 (Visible)  設定是否在螢幕中顯示元件。 


(二) 程式設計(Blocks)頁面

  • PasswordTextBox1(密碼輸入器)元件:輸入時資料不會在螢幕顯示,僅以星號(*)取代,為避免被檢視,以保護密碼資料。
  • 程式設計(Blocks): 
 
*註:方塊土黃色代表事件紫色是方法深綠色是設定屬性值淺綠色是取
得屬性值


(三) 測試程式:以模擬器(emulator)測試執行,如下圖,輸入資料前、輸入資料後未按下按鈕、及執行按下按鈕後結果畫面。




homework 練習5:攝氏溫度轉換華氏溫度程式。提示F=(9/5)*C+32】【重點:學會 HorizontalArrangementTextBox(文字方塊)元件及基本運算之設計與應用】。
  • 方法1:以 Layout 界面布局元件(HorizontalArrangement水平布局)專案名稱: C2F.aia
(一) 外觀編排(Designer)頁面:即版面配置頁面。

※僅限數字 (NumbersOnly):設定只能輸入數字資料

(二) 程式設計(Blocks)頁面

  • 語系→English:
Blocks 程式編輯區:
 ※加法及乘法方塊具有擴充項目圖示,透過『點選及拖曳』即可產生連續加法或連續乘法。
  • 語系→繁體中文:

*註1:變數可分2種:
(1)全域變數Global Variable:作用範圍為定義此變數的Screen元件頁面,當此頁關閉後,該變數即消失。
(2)區域變數Local Variable:作用範圍為定義此變數的程式區塊,當離開此程式區塊,該變數即消失。


*註2:合併文字→於內建方塊項目中文字指令,可連結合併不同之字串。


(三) 測試程式:以模擬器(emulator)測試執行,如下圖,執行前後畫面。

 Connect→Emulator 執行結果:


  • 方法2:直接以User Interface 元件設計。【重點:學會 TextBox(文字方塊)、Label(標籤)、Button(按鈕)元件及基本運算之設計與應用】。專案名稱: C2F_2.aia
(一) 外觀編排(Designer)頁面:即版面配置頁面。


(二) 程式設計(Blocks)頁面

  • 語系→English:
  • 語系→繁體中文:



(三) 測試程式:以模擬器(emulator)測試執行,如下圖,執行前後畫面。