App Inventor學習記錄181-鞋子尺寸對照器,男鞋、女鞋、童鞋通通對的到

小胖和阿花的鞋子現在都是在蝦皮上買的,但鞋子的尺寸規格有挺多種的,所以做了一個鞋子尺寸對照器來用。男鞋、女鞋、童鞋通通對的到

記錄一下:
App Inventor學習記錄181-鞋子尺寸對照器,男鞋、女鞋、童鞋通通對的到


這次的範例已經有上架到 google play,歡迎大家下載試用,如果有什麼想加上的功能建議,也可以留言。我會儘我可能的把功能做出來。

鞋子尺寸對照器 google play應用商店連結


把這次 app的內容演示一下。

這次有儘可能的把畫面做的好看一下,男鞋、女鞋、童鞋,分了三種顏色。
點擊了要查詢的項目之後,該項目就會變大。

在選擇鞋子尺寸的時候,要用下拉式選單,選擇要對照的基準值後,會跳出另一個下拉式選單選擇尺寸。尺寸選擇完成之後,就會在下方出現對照表。
對照表下方有 2個按鈕,分別是加大一號和縮小一號的功能。

最下方也多方了一個腳長量測說明的按鈕,按下去後會提供說明。


畫面編排的部份如下。

這個講起來頭就大了,光要改的好看一些,我就花了挺多的時候。
版型就是上面長的這樣。
有用到的元件不外乎就是標籤、按鈕、下拉式選單、圖片,檔案元件這些。


全部的程式方塊如下。


上面提供的這張圖片裡的程式方塊是上架到 google play的完整內容。等一下逐項方塊的說明,也是以這一個版本的為主。只是在這一篇最後提供的 aia檔中會有稍微的不同,但主體架構是一樣的。

這裡建立挺多的清單。清單雖然多,但大部份都是對過來對過去的問題。
也是比較容易搞混的地方。


顯示對照程式。

這個就是用 spinner 2.selection index下拉式選單 2的選中項索引,去取得不同清單項目的項目,在顯示在標籤。


清空表單程式。

清單表單是挺重要的一項,很多時候都會用到,特別是在取值的時候。
不要讓之前的資料,引響到後續的資料,都會把清單設定成 create empty list


選擇男鞋女鞋程式。

隱藏或顯示一些配置或元件,主要是為了讓畫面看上去乾淨一點。


備註說明程式。

很明顯,就是只把一長串的文字,用文字方塊和 app inventor中的換行符號 \n重新整理。


判斷男鞋女鞋童鞋程式。

這裡用一個變數_男 1女 2童 3,來判斷我們要點擊男鞋、女鞋還是童鞋。
再對應我們的選擇,把標籤的顏色設定成各自的色系。


當程式初始化的時候。

把我們要顯示的內容分別顯示或是隱藏起來。


當按下男鞋按鈕時。

設定變數_男 1女 2童 3這一個變數的值。
調整一下標籤 1背景的顏色和顯示的文字。
call file 1.read from呼叫檔案元件去讀取 boy.csv這個檔案
呼叫選擇男鞋女鞋程式。

調整三個垂直配置的寬度,讓被選擇上看起來有突出的效果。
女鞋按鈕和童鞋按鈕的寫法是相同。


檔案元件要讀取檔案,我用 google sheet做好再匯出成 csv檔,上傳到素材中。

我比較習慣用 google sheet做,因為它匯出 csv的時候,編碼就已經是 utf-8的格式
如果要用 excel做的話,存檔成 csv的時候,記得把編碼設定成 utf-8

另外,這個表單其實也是可以做成網路版,把資料存到 google sheet上,我們再從 google shee上讀取資料。這部份請參考:怎麼從google sheet中取得資料

但我後來想想,這個對照表,應該不太會變動了,所以為了增加讀取的速度,干脆就匯出成 csv檔,直接用檔案元件去讀它。


當檔案元件讀取到檔案的時候。

把用 list from csv table text方塊去讀取 csv檔案的內容。
再把檔案的內容整理一下,分配給不同的清單。


放大一大,縮小一號按鈕按下的時候。

號碼加大一號,號碼縮小一下。這個用法也有介紹過。簡單說明一下做法。
假設,我們的清單中的項次有 10項。
那麼,當我們的選中項索引已經是 1的時候,就不能再往下減。
同理,當我們的選中項索引,已經是清單長度,也就是 10的時候,就不能往上加。


當下拉式選擇選擇後。

我們利用這個方塊自帶的 selection參數來做判斷做不同的處置。

然後 call spinner 2.display dropdown呼叫打開下拉式選單 2的程式。
這個做法就是要讓選擇完基準項目後,直接就打開尺碼表。這樣的動作才是連貫的。


當下拉式選單 2選擇完成之後。

這個做的事就比較多了,原則上就是依照選中項來做判斷。
也是清單的索引值對過來再對過去就可以了。


按鈕 3按下時。

用按鈕 3的文字做判斷,然後產生 2種結果。這裡比較少用到的,大概就是直接用按鈕的文字來做判斷這件事。

不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發佈留言