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 (文字輸入框)元件介紹與其設定
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×2的TableArrangement元件裡元件呈現的效果如下：
沒有留言:
張貼留言