App Inventor學習記錄109-幾何圖形面積、體積計算器,共有34種常見圖形

這次花了很多的時間,做了一個常見幾何形狀的體積面積計算器。這東西不難,但是做起來真的很花時間,我花了快一個月的時間才完成。

記錄一下:
App Inventor學習記錄109-幾何圖形面積、體積計算器,共有34種常見圖形


這次的完成品是這樣子的。

選擇幾何圖形之後,輸入相關的數字,就可以得到對應的數值。
計算的方式在按下顯示公式的按鈕之後,也會跳出來顯示。

這次呢,也因為花了很多的時間在做,所以狠狠的加上了整頁的廣告。這個在上面的這個 gif檔上就看的很清楚了,花了太多的時間,不賺一點回來真的不行。

但我想大家比較在意的,應該是整頁的廣告和 banner型的廣告收入會差多少。這部份,我會測試一下,再整理出來給大家做參考用。


這次有做到幾何形狀像這下面這樣。滿滿的一大堆。

這些形狀的公式,當然不可能是我照記憶做出來的,這些東西都還給學校很久了。
我是參考下面這個網站的公式做的。
網站名稱 :keisan.casio.com
網站語系 :英文
網站連結 :https://keisan.casio.com/menu/system/000000000250

除了公式之外,其它圖片的部份,我還是有用 solidworks重新畫過,所以跟網站上的圖片及代號,稍稍的有些不同。但計算結果都是一樣的,這個在做的時候,有互相比對過。

只是因為真的花了太久的時間做這個,所以做到後面,真的已經有倦怠感,所以 bug會比較多。我也沒有再花時間再去做畫面的處理或是調整,就直接上架到 google play上了。要使用的朋友要做好心理準備。bug很多、廣告很多。
幾何圖形面積、體積計算器 google play連結


講回到這次的畫面配置,先看到 Screen1主畫面這裡。

主要就是用了一個垂直捲動配置讓畫面可以無限制的可以往下滑,再把水平配置放到垂直捲動配置裡頭。每一個水平配置裡頭,都放了 3個圖片。點擊圖片就會打開另一個畫面。
由於要讓圖片可以點擊,所以在圖片的屬性下面,要勾選 Clickable
至於為什麼不放按鈕,再設置按鈕的背景圖片來做,而是要用圖片的方式。這個主要是因為設定按鈕的背景圖片的時候,整個圖片的比例會跑掉,看起來太醜。我試過了……,光是改成按鈕,再改回來,就又花了不少時間。


而在 screen1的程式碼部份,就很簡單。
就是點擊圖片之後,就會開另一個螢幕。只是數量多了一些。


每一個項目都建立一個螢幕,對管理來說很方便。
但是,這裡有一個小問題。

就是在新增第 11個螢幕的時候,就會自動的跳出一個警告訊息,說我們的螢幕建的太多。
不過,這個不用管它,直接按下增加螢幕的按鈕,還是可以新增螢幕。我就建了 36個螢幕在這個範例中。
使用上倒是沒有遇到什麼其它的問題。可能也是因為功能很簡單的關係。


這 36個螢幕,可以分成兩種,一種是沒有下拉式選單的,像下面 T9這個螢幕這樣。
輸入相對應的數值,按下開始計算按鈕,就會產生結果。我們講講這部份的程式碼。


T9-1的程式碼說明。

一開始同樣是建立變數的部份,36個螢幕的做法都是相同的。
首先建立一個叫梯形計算方式的變數,它的值是一個清單。
這個變數是用來放下拉式選單的元件,用來選擇不同的計算方式,但這個 T9這個螢幕,就只有一種計算方式,所以請大家忽略這一個變數。

建立 “公式開關“的變數,它的值預設為 0,用是用來切換公式是否顯示用的。


T9-2的程式碼說明。

這個程式是用來顯示相關標籤的值用的。


T9-3的程式碼說明。

很明顯,這個程式就是用來放計算公式用的。


T9-4的程式碼說明。

重新計算按鈕被按下之後,把相關的標籤和文字輸入盒的文字,給設定成待計算和空白。


T9-5的程式碼說明。

按一下顯示公式這個按鈕,就顯示公式的圖片。再按一下顯示公式這個按鈕,就讓圖片變不見。
這裡我們用變數_公式開關圖像 2_可見性這兩個參數,搭配使用來達到這一個效果。


T9-6的程式碼說明。

按下手機的返回按鈕,就跳到 Screen1這個螢幕。


T9-7的程式碼說明。

當開始按鈕被按下的時候,先判斷文字輸入盒 1、2、3中,有沒有其中一個的值是空白的,如果是空白的話,就跳出一個對話框,提示有數字沒有輸入到

這裡要讓文字輸入盒只能輸入數字,所以有勾選僅限數字的選項

如果文字輸入盒中都有輸入數字的話,則呼叫計算公式這個程式,再從這裡填進相關的值,或者是計算公式。

由於沒有下拉式選單,所以在 T9這個螢幕中,點擊開始計算按鈕要產生的反應就很好寫。判斷數字有沒有全部輸入,有全部輸入的話,就開始計算對應的數值。


但在 T3這個螢幕中,就比較麻煩了點。

只要輸入 a、b、h、S、角度中的任兩個值,就會可以計算出其它的結果。
這裡就用下拉式選單來做。把不同的計算方式給建一個清單,放在三角形計算公式這個變數下頭。然後程式開始的時候,就把下拉式選擇的元素設定成變數_三角形計算公式就可以了。


然後當我們從 T3的下拉式選單中,選擇任一個項目之後,呼叫程式_相關文字顯示。填入對應的值。

整段程式很長,截一部份出來說明。
利用下拉式選單的選擇項,加上流程判斷來做就可以了。


當 T3的開始計算按鈕被按下的時候,也是相同的做法。

同樣是先判斷有數字有沒有全部都填上,沒填上的話,就出現對話框來提示。

有填上的話,就呼叫程式_計算公式來產生相關的數值。

由於這裡是用下拉式選單的選中項的值來做流程判斷用。所以在用下拉式選單選擇其中一個項目之後,都會把全部的文字輸入盒的值,設定成空白。讓使用者非得再重新填入一次數字不可。整個的流程就是這個樣子。


正如一開始說的,我在這個項目中花了太長的時間,所以完整版的 aia檔就不提供了,這個項目總共有 36個螢幕,這裡就只提供 T1~T16這部份的版本。三角形、正方形、長方形、圓形、橢圓形、菱形、平行四邊形、多邊形、扇形這些常見的幾何形狀的面積計算都有包含在這個版本中了。

簡單說,就是只提供到算面積的版本。當然都是沒有加上煩人廣告的完整版。
好的,這次的 aia檔的下載連結如下:
點我下載 NO_109_Geometric_calculation.aia

完整版,有 bug,又有很多廣告的部份,就請參考 google play商店
補充一下,這次上架的速度超級快,一天就搞定了。
google play應用商店-幾何圖形體積面積計算器連結

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響