App Inventor學習記錄136-可以取兩個值的滑桿、以及垂直方向的滑桿外掛

app inventor中的滑桿本來只能取一個值。而且只能是水平方向的。
KIO4_SliderRange外掛,可以做出一個取兩個值的滑桿
SliderVertical外掛,則是可以做出垂直方向的滑桿


這次範例的完成品如下。

這裡放了三種的滑桿做比較。由上到下的順序是:
app inventor內建的 slider。
KIO4_SliderRange外掛做出,能取兩個值的滑桿
SliderVertical外掛做出,垂直方向的滑桿


畫面編排的部份如下。

這裡要特別的說明一下。
app inventor內建的滑桿只要拉到指定的位置就能使用。
但是 KIO4_SliderRange SliderVertical這兩個外掛比較特別,要定義他們要使用的水平或是垂直配置才行。
所以畫面配置中的 horizatalarrangement 2是要分配給 KIO4_SliderRange這個外掛用的。
verticalarrangement 1則是要分配給 SliderVertical這個外掛用的。


全部的程式碼如下。


when screen 1.initialize在程式一開始的時候。
call kio4_sliderrange1.sliderrange,呼叫外掛中的程式,設定這個外掛用在那一個水平配置上。
所以 layout的部份,我們放的就是 horizontalarrangement 1

call slidervertical 1.slidervertical,呼叫外掛中的程式,設定這個外掛要用在那一個垂置配置上。
所以 layout的部份,我們放的就是 verticalarrangement 1


這部份,相信大家很熟了。之前也有用滑桿元件做了幾個範例,大家也可以參考一下。
用 2個滑桿,做一個簡單的九九乘法表小遊戲 
用滑桿元件 Slider,來切換圖片的顯示 
用滑桿來設定小畫家畫布背景顏色


KIO4_SliderRange這個外掛的用法和原本的 slider滑桿元件是相同的。
thumblert就是左側這個的指針值。
thumbright就是右側這個的指針值。


SliderVertical這個外掛的用法,就跟原本的滑桿元件一模模一樣樣。


這兩個滑桿的外掛介紹給大家。
當然,如果要改滑桿的顏色、最大值、最小值等等的,這些功能都還是可以設定,使用方法也相同,這裡就不再多說明了。

這次的 aia檔的下載連結如下:
NO_136_Vertical_slide.aia

APP INVENTOR外掛
名稱:KIO4_SliderRange
外掛來源:kio4.com
外掛載點:http://kio4.com/appinventor/294K_extension_crear_Deslizador.htm

APP INVENTOR外掛
名稱:SliderVertical
外掛來源:kio4.com
外掛載點:http://kio4.com/appinventor/294K_extension_crear_Deslizador.htm

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

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

發表迴響