第七章 用自己開發的APP介紹自己

Self introduce(自我介紹)

1.1 專題介紹：Self introduce(自我介紹)

　　在許多不同的時間與場合，例如：進入新環境、參加面試……等等，我們都需要「自我介紹」，讓大家能夠互相認識、彼此了解。

因此，這個專題即將教會大家如何製作一個自我介紹App，大家就趕緊來學吧！學會了就可以很輕鬆地讓大家了解你喔！

1.2 專題重點

※熟悉上傳圖片的方法

※管理App的版面配置

※學習程式頁面切換技巧

◎需求元件：代表各頁面類別的連結圖片

2. 專題實作

2.1 專題總覽

　　Self introduce的功能為進入 App 後，顯示主頁面一個標題和五張圖片，分別代表是個人資料(大頭照)、理想的校系、家庭影響、學習歷程、未來規畫；使用者點擊一張圖片後，進入其訊息頁面，每個訊息頁面會顯示其訊息和下面有一個返回按鈕，點擊返回按鈕回到主頁面。

2.2 專題建置

◎ 需求元件：

(註：圖片名稱只能用英文，不能用中文或其它特殊字元，否則無法讀取。)

1.         大頭照(me)

2.         代表理想的校系的圖片(school)

3.         代表家庭影響的圖片(family)

4.         代表學習歷程的圖片(learn)

5.         代表未來規畫的圖片(future)

1. 新增專案：Selfintroduce

按下Start new projects，新增「專題名稱：Selfintroduce」的專案。

進入App Inventor的Designer視窗

第一步：點選Start new project

第二步：在Project name後面輸入「Selfintroduce」

第三步：按OK

(註：專案名稱開頭不能是數字；專案名稱中可用底線，但是不能使用空格或其他特殊字元)

2. 匯入圖片

點選視窗右側的 Components 下方的 Media,按下 Upload File 上傳圖片。將六張圖片依序上傳,注意：每一次選擇檔案只能選取一個檔案,選取好一個檔案後就按 OK,重複上述動作完成上傳。

(註：圖片名稱只能用英文但不能用中文或其它特殊字元否則無法讀取。)

上傳檔案：Media/ Upload File

2.3介面配置

3.對齊方式(AlignHorizontal)：置中(Center)

請點選在視窗右側的屬性(Properties)，點選對齊方式(AlignHorizontal)的置中(Center)，這樣之後的物件會以中心線排列。

置中對齊：Properties/ AlignHorizontal：Center

4.垂直排列(VerticalArrangement)

請在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗。

新增框架：Palette/ Layout/ VerticalArrangement

註：頁面布局(Layout)中的排列方法，需加入其他元件(例如文字(Lable)、按鈕(Button)元件等)水平排列(HorizontalArrangement)、垂直排列(VerticalArrangement)皆不限制裡面元件多寡；另外，矩陣排列(TableArrangement)可以放入多個物件，物件的數量由Row和Column的數量控制。

5.重新命名(Rename)

點選重新命名(Rename)，將名稱更改為index，使此框格內作為主頁面。

重新命名：更改成index

6.新增文字(Label)

請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的文字(Label)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗的垂直排列(VerticalArrangement)框框裡。

新增文字： Palette/ User Interface/ Label

7.更改文字元件屬性(Properties)

請在視窗右側的屬性(Properties)中，更改字型(FontSize)：20 ，文字(Text)改成自我介紹，字體排列(TextArrangement) 改成置中(center)，更該寬度(Width)為 Fill parent。

更改屬性： Properties/ FontSize： 20

Text： 自我介紹

TextArrangement： Center

Width： Fill parent

8.新增按鈕(Button)

請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方；將其重新命名(Rename)把名字改為me，接著請到右邊的屬性(Properties)面板上，找到 Image，點選先前上傳大頭照的檔名(ex： me)，將文字(Text)預設的文字刪除變為空白，並將寬(Width)高(Height)改為100 pixels。

新增按鈕： Palette/ User Interface/ Button

重新命名： 更改成me

更改屬性： Properties/ Image： me

                       Text：

                       Width：100

                       Height：100

9.水平排列(HorizontalArrangement)

請在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的水平排列(HorizontalArrangement)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗。

新增框架： Palette/ Layout/ HorizontalArrangement

10.新增按鈕(Button)

在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方；將其重新命名(Rename)把名字改為school，接著請到右邊的屬性(Properties)面板上，找到 Image，點選代表理想的校系的圖檔，將文字(Text)預設的文字刪除變為空白，並將寬(Width)高(Height)改為適合的大小。

(範例的寬/高：150pixels/100 pixels)

新增按鈕： Palette/ User Interface/ Button

重新命名： 更改成school

更改屬性： Properties/ Image：選取自己想要的照片

                       Text：

                       Width：自己選

                       Height： 自己選

11.新增按鈕(Button)

在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方；將其重新命名(Rename)把名字改為family，接著請到右邊的屬性(Properties)面板上，找到 Image，點選代表家庭影響的圖檔，將文字(Text)預設的文字刪除變為空白，並將寬(Width)高(Height)改為適合的大小。

(範例的寬/高：150 pixels/100 pixels)

新增按鈕： Palette/ User Interface/ Button

重新命名： 更改成family

更改屬性： Properties/ Image：選取自己想要的照片

                       Text：

                       Width：自己選

                       Height： 自己選

12.重複新增按鈕(Button)的動作

請加入水平排列(HorizontalArrangement)元件、learn及future按鈕，自行完成後即完成主頁面。

13.設定背景顏色(BackgroundColor)

先點選組成元件(Components)中的Screen1並在視窗右側的屬性(Properties)中，找到背景圖片(BackgroundColor)，選取Cyan。

更改背景： Properties/ BackgoundColor： Cyan

14.隱藏頁面(Hidden)

點選組成元件(Components)中的index，將其屬性顯示(Visible) 取消勾選，使主頁面隱藏。

隱藏頁面：Properties/ Visible： 取消勾選

15.垂直排列(VerticalArrangement)

請在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗，重新命名為p1。

新增框架： Palette/ Layout/ VerticalArrangement

重新命名：p1

16.新增文字(Label)

請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡，將文字大小(FrontSize)改為20，文字(Text)改為基本資料，文字排版(TextAlignment)改為置中(center)，寬(Width)改為Fill parent。

新增文字： Palette/ User Interface/ Label

更改屬性： Properties/ FrontSize：20

                      Text： 基本資料

                      TextAlignment： Center

                      Width： Fill parent

17.新增圖片(Image)

請在窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的圖片(Image) 元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡；在右側屬性頁面(Properties)將圖片(Picture)改為大頭照，並將寬(Width)高(Height)改為合適的大小。

新增圖片： Palette/ User Interface/ Image

更改屬性： Properties/ Picture：自己選

                       Width：自己選

                       Height： 自己選

18.新增標籤(Label)

請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡，將文字(Text)改為姓名：，文字大小(FrontSize)改為20，寬(Width)改為Fill parent。

重複此步驟，加入其他資料，完成此頁面。

新增文字： Palette/ User Interface/ Label

更改屬性： Properties/ Text： 姓名

                       FromtSize：20

※會重複做標籤元件加入文字的原因是因為在標籤元件中無法做換行的動作，因此利用新的標籤元件達到換行的效果

19.隱藏頁面(Hidden)

點選 (Components)中的p1，將其屬性(Visible)取消勾選，使此頁面隱藏。

隱藏頁面：Properties/ Visible： 取消勾選

20.重複15~19的動作完成其他項目 (如下圖)

請繼續依照步驟十五至步驟十九的動作完成理想的校系(p2)、家庭影響(p3)、學習歷程(p4)、未來規畫(p5)。

21.新增按鈕(Button)

在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放開並將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方；將其重新命名(Rename)把名字改為back，接著請到右邊的屬性(Properties)面板上，將文字大小(TextSize)改為20，並將文字(Text)改為返回。

新增按鈕： Palette/ User Interface/ Button

重新命名： 更改成back

更改屬性： Properties/ TextSize：20

                       Text：返回

22.移動物件

在視窗(Viewer)中將按鈕back移置最下方，並將所有物件隱藏，顯現主頁面(index)。

隱藏頁面：Properties/ Visible： 取消勾選

使用元件及其重要屬性

名稱	屬性	說明
Screen1	AlignHorizontal：Center BackgoundImage： 自己選
index	Visible： hidden	首頁
Label1	FontSize： 20 Text： 自我介紹                  TextArrangement： Center Width： Fill parent
me	Image： me Text： Width：100 Height：100
HorizontalArrangement
school	Image：選取自己想要的照片 Text： Width：自己選                       Height： 自己選
p1~p5	Visible： 取消勾選	每個頁面都先隱藏，等到按圖案才會顯示
Label2	FrontSize：20 Text： 基本資料                       TextAlignment： Center                       Width： Fill parent
Label3	Text： 姓名                       FromtSize：20
Back	TextSize：20                       Text：返回	返回鈕

2.4 程式拼圖說明

接下來我們就可以開始編寫程式囉！請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。

23.拉出按鈕(me)的拼圖

請在左側Blocks選單中點選index下的me，在彈出的拼圖式程式區塊中選取when me.Click do，置於預覽視窗中。

按鈕指令：

Blocks/ Screen1/ index/ HorizontalArrangement1/ me/ when me.Clickdo

24.按下按鈕(me)使 p1出現(Visible)的拼圖

請在左側Blocks選單中點選Screen1下的p1，在彈出的拼圖式程式區塊中選取set p1.Visible to，卡入其中。

顯示指令： Blocks/ Screen1/ p1/ set p1.Visible to

25.Logic→True(符合邏輯→是)

請在左側Blocks選單中點選下Build-in的Logic，在彈出的拼圖式程式區塊中選取true，卡入其中。

邏輯指令： Blocks/ Build-in/ Logic/ true

26.重複24~25的動作執行

請繼續依照步驟二十四至步驟二十五的動作執行，在左側Blocks選單中點選back找到 set back.Visible to放置在set p1.Visible to true 之下，再來在左側Blocks選單中點選 Built-in下的 Logic中的true卡入其中，在左側Blocks選單中點選index找到 set index.Visible to放置在set back.Visible to true 之下，再來在左側Blocks選單中點選 Built-in下的 Logic中的false卡入其中。

顯示指令： Blocks/ Screen1/ back/ set back.Visible to

邏輯指令： Blocks/ Built-in/ Logic/ true

顯示指令： Blocks/ Screen1/ index/ set index.Visible to

邏輯指令： Blocks/ Built-in/ Logic/ false

27.重複23~26的動作

依照步驟二十三至步驟二十六的動作執行，完成when school.Click do，when home.Click do，when .Click do，when learn.Click do，when future.Click do

 28.點下back時的反應(回到主畫面)

完成when back.Click do

※完整程式：

程式專案檔QRcode：

手機執行檔QRcode：