App Inventor學習記錄154-怎麼在Listview清單顯示器中加入圖片~新功能

應該是上次改版的時候加入的這個新功能,現在已經可以在 Listview清單顯示器上加入圖片了。
這次就來記錄一下,怎麼在Listview清單顯示器中加入圖片


這次範例的完成品如下。

原本的 listview清單顯示器,只能以純文字的方式來顯示,現在可以加入圖片以及小標題。


要使用這個功能的方式有兩種。
第 1種是從畫面編排這裡增加

在畫面編排這裡,點擊 listview清單顯示器元件,在右側的屬性欄中。
找到 listview layout選擇 image,maintext,detailtext這一項。
一定要選擇 image,maintext,detailtext這一項,不然後面怎麼做都沒有用

然後點擊上方的 click to add/delete data


在新跳出來的視窗中,點擊 click too add row data


從這裡就可以加入我們需要的資料。
main text,填的是大標題。
detail text,填的是小標題。
imagme,選擇要使用的圖片。記得要先把要用的圖片素材給上傳一下。

點擊下方的 click to add row data按鈕的話,就可以再多增加一行資料

最後,記得要點擊 save按鈕來儲存設定


第 2種方法則是在程式設計的畫面中,用 listview清單顯示器新增加的方法來做
用到的全部方塊如下。


when screen 1.initialize,當程式初始化的時候。
set global name to make a list ,建立一個變數,它的值用 make a list方塊建成一個清單。
call listview 1.creat element,呼叫 listview清單顯示器中的建立元素方塊。
main text,填的是大標題。
detail text,填的是小標題。
imagme,填圖片的名稱。記得要先把要用的圖片素材給上傳一下。

看我們要加入幾個清單,這個步驟就要重覆幾次。
補充一下,在畫面編排中,清單顯示器的屬性,一定要選擇 image,maintext,detailtext這一項,不然我們在程式中怎麼寫都沒有用,都只會出現大標題的文字。

set listview.elements to global name,清單建立好了之後,就把清單顯示器的元件,設定成我們建好的這一個清單。


接著我們來看一下,怎麼在點擊清單顯示器後,取得 main text、detail text、image name

when listview 1.after picking,當清單顯示器選擇之後。
set label 1.text to listview 1.selection,把標籤 1的文字,設定成清單顯示器的選中項。
這裡出現的結果,就只有 main text大標題的文字。

set label 2.text to call listview 1.get detail text,把標籤 2的文字,設定成取小標題的文字。
list element,這裡必需要用 select list item這個方塊,去取得去抓變數 name中, listview 1.selection indext清單顯示器選中項是第幾項的方塊,放在 index參數中。
這裡取得的值就會是 detail text

標籤 3的設定方法也是相同,只是這次我們用 call listview 1.get image name清單顯示器中,這個抓圖片名稱的方塊來用。


這兩個方法,都可以建立相同的清單效果。看大家喜歡用那一個。

不知道是不是因為這個是新功能的關係,我常用的夜神模擬器沒有辦法看到這個效果。但是在手機上是沒有問題的。
這次清單顯示器新增了放圖片的功能,但短時間中,我應該還是會用之前介紹過的 Listview清單顯示器加強功能外掛~ColinTreeListView來做

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

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

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

發表迴響