2014年12月25日 星期四

第七章 用自己開發的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 InventorDesigner視窗
第一步:點選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/ AlignHorizontalCenter


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

新增框架:Palette/ Layout/ VerticalArrangement

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

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
                       Width100
                       Height100




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)元件、learnfuture按鈕,自行完成後即完成主頁面。

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/ FrontSize20
                      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: 姓名
                       FromtSize20
※會重複做標籤元件加入文字的原因是因為在標籤元件中無法做換行的動作,因此利用新的標籤元件達到換行的效果




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/ TextSize20
                       Text:返回
22.移動物件
在視窗(Viewer)中將按鈕back移置最下方,並將所有物件隱藏,顯現主頁面(index)

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

使用元件及其重要屬性
名稱
屬性
說明
Screen1
AlignHorizontalCenter
BackgoundImage: 自己選

index
Visible hidden
首頁
Label1
FontSize 20
Text: 自我介紹                  TextArrangement Center
Width Fill parent

me
Image me
Text
Width100
Height100

HorizontalArrangement


school
Image:選取自己想要的照片
Text
Width:自己選                       Height: 自己選

p1~p5
Visible: 取消勾選
每個頁面都先隱藏,等到按圖案才會顯示
Label2
FrontSize20
Text: 基本資料                       TextAlignment Center                       Width Fill parent

Label3
Text: 姓名                       FromtSize20

Back
TextSize20                       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-inLogic,在彈出的拼圖式程式區塊中選取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 dowhen home.Click dowhen .Click dowhen learn.Click dowhen future.Click do

 28.點下back時的反應(回到主畫面)
完成when back.Click do
※完整程式:
程式專案檔QRcode


手機執行檔QRcode



2 則留言:

  1. 影音解說網址:
    Part1 https://www.youtube.com/watch?v=LTQMhkgfbOo
    Part2 https://www.youtube.com/watch?v=dsg-dZ-69RI

    原始碼(.aia)下載連結:
    https://drive.google.com/file/d/0Bz_3MvZ2YjRnc3dRal95aTZkNjA/view?usp=sharing

    執行檔(.apk)下載連結:
    https://drive.google.com/file/d/0Bz_3MvZ2YjRnNWYzUkZBUXlSaWM/view?usp=sharing

    Ted Lee
    URL:https://sites.google.com/site/lct4246/
    FB:https://www.facebook.com/ted.lee.10420321
    Blog:http://lct4246.blogspot.tw/

    回覆刪除
  2. 作者已經移除這則留言。

    回覆刪除