2014年12月21日 星期日

第二章 App Inventor 環境與基本操作

App Inventor面板與基本元件
1.1專題介紹: 元件面板-使用者介面
    App Inventor與其他程式語言的開發介面相比是十分親切的,簡單來說,當需要什麼功能與元件,只要透過拖拉和放置的動作,就能將選用的元件放置到程式的畫面上。本單元要介紹的就是在App Inventor的元件面板(Palette)中,使用最頻繁的使用者介面(User Interface),並與簡單介紹介面布局 (Layout)元件的使用。












1.2專題重點
※使用者介面認識
※文字相關元件介紹
※按鈕與圖像元件介紹
※介面布局介紹
2.專題實作
2.1瀏覽使用者介面
1.   元件面板在哪裡?
最左邊的框框就是元件面板(Palette),所有需要在程式中顯現的畫面、工具、功能等,像是按鈕、輸入文字的方格、滑桿等等的各種元件都可以在元件面板中找到。















2.   使用者介面裡有什麼?
元件面板中有許多的功能元件,而本單元主要是要介紹其中第一區塊的使用者介面,下面是使用者介面裡各元件是中英文的對照。

2.2認識文字相關元件
1.   Label(文字)元件介紹與其設定
Label元件的功能就是顯示文字,單純出現在畫面的文字,沒有讓使用者修改或輸入的功能。


1.1調整Label元件的屬性
在拖拉Label元件到程式預覽畫面中之後,在選取該元件時會在最右側出現可以修改其屬性的區域,其中能調整的屬性如下:
屬性名稱
說明
BackgroundColor
調整背景顏色。
FontBold
調整文字是否粗體。
FontItalic
調整文字是否斜體。
FontSize
調整文字大小。
FontTypeface
調整文字字型。
HasMargins
調整文字是否有邊距。
Text
設定要顯示的文字。
TextAlignment
調整對齊方式。
TextColor
調整文字顏色。
Visible
設定是否要顯示該文字在畫面上。
Width
調整文字元件寬度。
Height
調整文字元件高度。
TextAlignment文字對齊方式有三種,分別為Left:靠左、Center:置中以及Right:靠右。
※調整文字元件高度及寬度的WidthHeight屬性也有三種設定方式,分別為Automatic:長寬隨內容大小自動調整、Fill parent:長寬擴及整個版面區塊以及第三種固定大小:直接可以輸入長寬數值,單位為pixels(像素),呈現的效果如下:
(依序為AutomaticFill parent200pixels)


2.   TextBox (文字輸入框)元件介紹與其設定
TextBox元件的功能就是要讓使用者輸入文字,使用者輸入的文字就等同於這個TextBox元件的Text屬性,可用在判斷數值或文字等等的功能。

2.1調整TextBox元件的屬性
在拖拉TextBox元件到程式預覽畫面中之後,在選取該元件時會在最右側出現可以修改其屬性的區域,因大多數的屬性皆十分相似,故相同的屬性就不再多做說明,其意義與說明請參考前面小節的介紹,以下只列出前面尚未介紹過的的屬性:
屬性名稱
說明
Enabled
設定此元件是否能使用,即能否輸入文字。
Hint
設定在使用者輸入文字前要顯示的提示文字。
MultiLine
設定能否輸入多行文字。
NumbersOnly
調整是否要規定只能輸入數字。
Text
設定要顯示的文字。
※其中Text屬性與Hint 屬性的文字畫面在程式裡顯示差別如下:


Text屬性裡所輸入的文字就會是TextBox元件預設的Text屬性,若無預先輸入字串,在使用者尚未輸入文字前,TextBox元件預設的Text屬性就會是空字串。
2.3認識按鈕與圖像元件
1.   Button (按鈕)元件介紹與其設定
Button元件是程式中的重要元件之一,是程式與使用者互動的重要操作媒介,在按下按鈕後即可執行程式碼所撰寫的相關功能,達到程式的運作。
1.1調整Button元件的屬性
Button 元件的屬性區域中,前面尚未介紹過的屬性:
屬性名稱
說明
Image
設定要顯示在按鈕的圖像。
Shape
設定按鈕的形狀。
ShowFeedback
設定是否要在按下按鈕時出現閃動的效果。
※在按鈕的設計上可以透過Image屬性上傳背景圖案,再透過Text屬性輸入要顯示在按鈕上的文字,按鈕上的文字會顯示在背景圖案之上,兩者可同時顯示。
Shape屬性的按鈕圖示有三種形狀,分別為default(預設)rectangular:長方形、rounded:圓角矩形以及oval:橢圓形,呈現的效果如下:


2.   Image (圖像)元件與其設定
Image元件的功能是用於顯示圖像,若需要有點選的功能,則建議使用Button元件。
2.1調整Image元件的屬性
Image元件的屬性區域中,前面尚未介紹過的屬性:
屬性名稱
說明
Picture
設定要顯示的圖像。
※在同一個程式專案中,曾上傳過的素材如圖像或音訊等等皆會被存放在Media區域,可直接使用,不必再重複上傳。

2.4認識介面布局(Layout)
1.   介面布局元件(Layout)介紹
在程式的製作中,畫面的設計十分重要,是APP外觀包裝的重要技巧之一。在App Inventor中,畫面的配置就需要使用介面布局元件(Layout),而介面布局元件就像App Inventor中其他元件一樣,是用拖拉的方式放進預覽畫面的。介面布局元件在放進畫面後,會是一個空的區域,根據不同的布局元件,在該區域內的元件就會以不同的方式來作排列呈現。
2.   HorizontalArrangement元件介紹與其設定
HorizontalArrangement元件能使放置在此元件裡的所有物件以「水平方式」排列。
2.1 HorizontalArrangement元件的屬性設定:
屬性名稱
說明
AlignHorizontal
設定此布局元件自己在畫面中的水平對齊方式。(Left:靠左、Center:置中以及Right:靠右)
AlignVertical
設定此布局元件自己在畫面中的垂直對齊方式。(Left:靠左、Center:置中以及Right:靠右)
Visible
設定此布局元件是否要顯示在畫面中。
※在程式設計中,Visible屬性對於布局元件十分重要,可以為程式做多頁程式切換的效果,不同的頁面可以放置到不同的布局元件中,透過按鈕的點選來做隱藏或顯示的效果。舉裡來說,要製作一個遊戲,有一個開始的選單畫面以及另一個遊戲的畫面,即可設定選單畫面的Visible屬性在一開始為顯示,遊戲的畫面則為隱藏,點開程式後就只會出現選單畫面。同樣地,在選單畫面裡面可設計一個開始的按鈕,按下按鈕時,選單畫面會消失,遊戲的畫面要顯示,只要在程式的部分做Visible屬性的切換設定即可。
※在HorizontalArrangement元件裡元件呈現的效果如下:



3.   VerticalArrangement元件介紹與其設定
VerticalArrangement元件能使放置在此元件裡的所有物件以「垂直方式」排列。
3.1 VerticalArrangement元件與HorizontalArrangement元件雷同,其屬性設定也完全相同,說明可參考上一小節。
※在VerticalArrangement元件裡元件呈現的效果如下:



4.   TableArrangement元件介紹與其設定
TableArrangement元件是表格布局元件,能將元件以表格的方式整齊排列,可自行設定此表格布局的欄數及列數。
4.1 TableArrangement元件的屬性設定:
屬性名稱
說明
Columns
設定此表格布局的欄數。
Rows
設定此表格布局的列數。
Visible
設定此布局元件是否要顯示在畫面中。
※在2×2TableArrangement元件裡元件呈現的效果如下:




沒有留言:

張貼留言