App Inventor學習記錄204-圖層、覆蓋層外掛~RelativeView

RelativeView這個外掛,說是圖層也不太對,因為在 cad中可以有很多圖層。所以比較像是重疊層,覆蓋層。

記錄一下:
App Inventor學習記錄204-圖層、覆蓋層外掛~RelativeView


這次範例的完成品如下。

在一張圖片上,疊加上 4個按鈕。
看到這裡大家可能會覺得奇怪,這個是不是用畫布搭配圖像精靈的。
不是哦,是用圖片元件,搭配按鈕元件做的。

又沒有覺得很奇怪,我們在圖像元件上點擊按鈕,居然還有反應。


看一下畫面編排的部份。

這個實際執行的畫面和畫面編排的順序好像不太對吧,依照 app inventor中的順序,不是由上到下,由外而內在排列嗎,怎麼這次的畫面編排這麼怪。
其實畫面編排的順序是對的,而左邊實際執行的畫面,則是用這個外掛做出來的效果。


我們再看一下畫面編排的第 2張圖片。

我們在畫面編排的時候,是照上圖這個方式在抓版面配置的。
實際執行畫面則是經過 RelativeView外掛處理的結果。等一下在程式碼中會說明。


全部的程式方塊如下。


第 1部份的程式方塊記錄。

這個變數是用來控制圖片的切換用的。


第 2部份的程式方塊記錄。

when screen1.initialize當螢幕初始化的時候
call relative view1.create呼叫外掛中設定下方圖層這個程式。
layout參數,這裡放最下方的圖層。我放入 vertical arrangement 2垂直配置 2來當最下面的那一層。這裡確定可以放的東西有水平、垂直配置這兩個,水平捲動配置和垂直捲動配置的部份,我就沒有測試。

call relative view1.addview呼叫外掛中增加覆蓋層的程式。
component參數,放要放在最上層的元件。這裡我放的是 horiztontal arrangement 1水平配置 1,而水平配置 1中有 2個按鈕 button 1和 button 2。我們這樣做的時候,外掛就會把水平配置 1裡頭所有的東西,一起放在最上層。這樣就不同一個按鈕一個按鈕的慢慢加。
gravity參數,這個參數指的是放的位置。我們拉外掛中的 relative view1.top來使用,就是放在靠上對齊的地方。它的參數中,還有 right、left、bottom等等的決定對齊位置的參數可以用。

call relative view1.addview,再呼叫外掛中增加覆蓋層的程式一次。
是的,在底層上可以放很多個重疊的配置上去
component參數,這次就放 horiztontal arrangement 2水平配置 2。
gravity參數,拉外掛中的 relative view1.center來使用,置中對齊。

另外 call relative view.combine,則是可以調整出九宮格的位置,像上面這個範例,就是 bottom和 center的組合。這個部份請大家試一下 label 1的位置就可以了解這個程式怎麼使用了。


第 3部份的程式方塊記錄。

這個部份是測試上,如果最上層的覆蓋層,沒有全部把最下層給蓋住,那最下層的元件還可以被點擊
經過實測,是可以的。


第 4部份的程式方塊記錄。

這個就是簡單的判斷,更換圖片,就不多說了。

好的,全部的程式方塊都簡單說明過了,建議大家試著做一次,就會用的越來越熟。
但如果不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發佈留言