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:靠右。
※調整文字元件高度及寬度的Width和Height屬性也有三種設定方式,分別為Automatic:長寬隨內容大小自動調整、Fill parent:長寬擴及整個版面區塊以及第三種固定大小:直接可以輸入長寬數值,單位為pixels(像素),呈現的效果如下:
(依序為Automatic、Fill parent、200pixels)
2.
TextBox (文字輸入框)元件介紹與其設定
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×2的TableArrangement元件裡元件呈現的效果如下:
沒有留言:
張貼留言