之前在這一篇最常使用的元件,按鈕、標籤屬性詳解,已經介紹大部份的方塊。這次著重kodular中,這兩個元件新增的部份。
記錄一下:
Kodular使用記錄003-按鈕和標籤元件
這次範例的完成品如下。
kodulard在按鈕元件上,加了動畫的屬性,文字陰景、icon圖示……
標籤的部份,同樣也有動畫跟陰影。
畫面配置的部份如上。
因為按鈕動畫的關係,所以拉了 2個 spinner元件。用來選擇動畫的效果和位置。
可以使用的動畫有 12種,動畫出現的位置有 4個。大家可以試著搭配組合一下。
程式初始化的時候,設定兩個 spinner的要用的元素清單為何。
然後,夜神模擬器上,看不到這兩個清單的字,有點怪,但手機上使用是沒問題的。
call button 1.set animation style,這是設定動畫的方塊。
style參數,放動畫的型式,這裡放 spinner 1的選中項。
position參數,指動畫出現在按鈕文字的那一邊,這裡放 spinner 2的選中項。
color參數,動畫的顏色。
call button 1.set shadow,設定按鈕文字的陰影效果。
x,y參數,是陰影的偏移量。
radius參數,數字越大,陰影越模糊
call button 1.with icon from font awesome,設定 icon的方塊。
position參數,同樣是 icon要出現在按鈕文字的那一邊。
icon name參數,則是要填 icon的名稱,這個名稱要去下面這個網站取得。
https://fontawesome.com/v5/cheatsheet
call button1.with icon from material font,同樣是設定 icon用的方塊。
只是這個方塊的 icon name要去下面這一個網站找。
https://fonts.google.com/icons?selected=Material+Icons&icon.category=content
call button1.with icon from picture,這個則是用圖片當 icon的方塊。
picture參數,放我們上傳素材的檔名。
width、heigh用來設定圖片的大小。
call button1.button click,呼叫別的按鈕執行點擊效果。
這個方塊我覺得很有意思,我之後再來試試能做出什麼效果來。
label標籤元件的部份,也加入的可以點擊和長按下的功能。
但是要打開 clickable的屬性。
好的,全部的程式方塊都簡單說明過了,建議大家試著做一次,就會用的越來越熟。
但如果不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!