App Inventor學習記錄145-可調整按鈕4邊圓角大小的外掛~ButtonDesigner

ButtonDesigner這個外掛,可以調整按鈕 4個邊角的圓角大小,以及相關的顏色,設定出我們自己想要的按鈕形狀


這次範例的完成品如下。

這次用了 5個滑桿元件,來調整圓角的大小,這樣比較容易看的出效果。
做出想要的效果之後,把相關的設定值記下來,直接設定在按鈕上就可以了。

可以調整的除了 4片的圓角之外,還有顏色也可以調整。
按鈕除了長相有改變之外,原本的功能都還是在的。


畫面編排的部份如下。

這個外掛比較有意思,直接套用在按鈕上就可以了。

另外,用了好幾個 slider滑桿元件,範圍值都是從 0~400。

clock計時器元件是為了能看出調整後的改變而放的。


全部的程式碼如下。


第 1部份的使用方塊說明。

when slider 1.position changed當滑桿元件的指針位置發生改變的時候。
set lable 1.text to,把標籤 1的文字,用文字方塊中的 join,把”左下角圓角”和 get thumbposition這兩個詞給組合在一塊。get thumbposition指的是當下的指針的值。

set button designer 1.left botton rudius,取外掛中,設定左下角圓角的方塊,把按鈕左下角的圓角,設定成 get thumbposition

其它滑桿元件方塊的做法都是相同的。
set button designer 1.left botton rudius,設定左下角圓角。
set button designer 1.left top rudius,設定左上角圓角。
set button designer 1.right botton rudius,設定右下角圓角。
set button designer 1.right top rudius,設定右下角圓角。
set button designer 1.stroke,設定邊框大小


第 2部份的使用方塊說明。

when button 1.click,當按鈕 1按下的時候。
set label 6.text to,把標籤 6的文字,設定成按鈕按下。
很明顯,這個只是為了測試按鈕的外觀改變之後,會不會影響到它本身的功能。

按鈕按下的功能還是可以正常的使用的。


第 3部份的程式碼說明。

when clock 1.timer,當計時器開始計時的時候。
把幾個顏色設定一下,以下這幾個都是用來設定按鈕的顏色用的。
set button designer 1.color center
set button designer 1.color end
set button designer 1.color star
set button designer 1.color stroke

這裡設定顏色用的方塊,不能直接從顏色方塊裡拉,只能用 #xxxxxx這樣的格式

call button designer 1.button,呼叫外掛中,設定套用效果的方塊。
input參數,這裡直接放上按鈕本身就可以了。


此外,這次因為是用滑桿元件來即時顯示按鈕的變化,所以真的要用的時候,就是把相關的數字記下來,把顏色、圓角大小都設定一下,再呼叫外掛套用效果就可以了。

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

APP INVENTOR外掛
名稱:ButtonDesigner
外掛來源:
外掛載點:
https://community.thunkable.com/t/extension-change-the-design-of-the-button/36717

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

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

發佈留言