常用元件應用

使用者介面(UI)+介面配置(Layout)  多媒體(Media) 繪圖動畫(Drawing and Animation)感測器&通訊連接專題雲端應用
2015/08/14 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2繁體中文: Create apps! 

  • 學會Palette(元件面板)中【User Interface(使用者介面)】類別之Label標籤、TextBox文字輸入盒Button按鈕元件編排與設計應用(以範例引導)。
  • 學會Palette(元件面板)中【Layout(介面配置)】類別之元件編排與設計應用(以範例引導)。
  • 學會Math數學運算指令及變數(全域變數、區域變數)之設計與應用
  • 學會元件、事件、屬性、方法之設計與應用(程式方塊:土黃色代表事件紫色是方法深綠色是設定屬性值淺綠色是取得屬性值)。

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

一、User Interface 使用者介面

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


(一)Label 標籤

顯示文字。

(二)TextBox 文字輸入盒元件

可讓使用者輸入文字,其輸入的文字會儲存於文字屬性中。

(三)Button 按鈕元件

當使用者按下按鈕元件,會執行使用者設計的程式片段,是應用程式與使用者互動的主要元件。

(四)WebViewer網路瀏覽器元件
    • :該元件在使用者介面(User Interface)類別中,功能為顯示指定的網頁內容,會嵌入一個小瀏覽器,除網頁顯示外,亦顯示文字、圖片、Gif動畫、Google地圖等。
    • 參閱講義: 多媒體類別元件結合 WebViewer網路瀏覽器 元件應用

二、Layout 介面配置

 Layout 介面配置:該元件是一個容器,本身不會在螢幕中顯示,可將其他元件加入該元件(容器)裡面,會依指定方式編排對齊;對齊方式有 TableArrangement表格配置、VerticalArrangement垂直配置、HorizontalArrangement水平配置等,如下圖。

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

 元件簡述:Palette→Layout(介面配置):
  • HorizontalArrangement 水平配置元件:可將多個元件從左到右水平橫向排列
  • VerticalArrangement 垂直配置元件:可將多個元件從上到下垂直排列,並對齊左邊。
  • TableArrangement 表格配置元件:可將多個元件放在不同行與列的格子中,以表格方式排列。

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

屬性 說明 
 水平對齊  設定水平橫向對齊方式,HorizontalArrangement (靠左:1,置中:3,靠右2)。
 垂直對齊  設定垂直對齊方式,VerticalArrangement (靠上:1,置中:2,靠下:3)
可見性  設定是否在螢幕中顯示該元件 (勾選核取框)。


三、範例應用

homework  練習4號碼顯示【重點:學會 HorizontalArrangement(水平配置)VerticalArrangement(垂直配置)PasswordTextBox1(密碼輸入盒)、TextBox(文字輸入盒)等元件之設計與應用】。(專案名稱: Display.aia)

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

 


 TextBox (文字輸入盒)元件的常用屬性如下:

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


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

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


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




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

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

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

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

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


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



註3:內嵌輸入項與外接輸入項:在方塊上按右滑鼠即可選擇不同之輸入方式呈現。

 內嵌輸入項 轉 外接輸入項:
  外接輸入項 轉 內嵌輸入項:


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

 Connect→Emulator 執行結果:


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


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

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



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


 工具網:

 Google AutoDraw 人工智慧的線上繪圖服務:https://www.autodraw.com/
 MobilesWall:免費手機、平板電腦高質感桌布 http://www.mobileswall.com/
 IconsPedia:Icons & Icon Packs→Download Free PNG Icons。
 FindSounds 特效音樂。
 最佳筆記App:用Evernote 整理您所有筆記。
 Gif Maker:Create Animated Gifs Online 線上建立 gif 動畫 http://freegifmaker.me/