App Inventor學習記錄142-Listview清單顯示器加強功能外掛~ColinTreeListView

ColinTreeListView這個外掛,提供了一個加強型的清單顯示器功能,不僅可以改每行間隔,文字大小、文字顏色、分隔線顏色,還加上了按下、放開、長按下等等的功能。


這樣範例的完成品如下。

原本的 listview清單顯示器我就不放了,效果很明顯著有不同。
這個外掛可以改的東西真的很多,除了原本有的功能全部都有之外,還加入了圖片顯示標題下方的小字說明每個顯示出來的元件的大小都還可以調整位置。原本只有一個可以按下的地方,也改成了可以按下圖片、文字或是額外增加的按鈕,變化相當的多。


畫面編排的部份如下。

上方的 1個按鈕元件,用來測試新增清單中的項目。
下方的 2個 label標籤元件,用來顯示指定的文字,也是測試用的。

中間的 vertical scroll arrangement 垂直捲動配置是這次的重點。
由於清單顯示器是可以無限往下排列的,所以在設定外掛要套用在那一個項目的時候,請記得要使用 vertical scroll arrangement 垂直捲動配置。如果套用的是 vertical arrangement 垂直配置,那麼這個清單顯示器的長度就是有限的。


全部的程式碼如下。


第 1部份的方塊說明。

建立變數_list,這個就是外掛清單顯示器要套用的清單內容

這個清單顯示器可以顯示的內容有三種
第 1種就是純文字
第 2種就是大標題 +小說明文字
第 3種就是圖片 +大標題 +小說明文字
這 3種的顯示效果,請看最上方完成品的範例。

寫法如上,用 make a list的方式來調整 第 2種和第 3種的顯示方式。後面要新增項目的話,也是要用這樣的格式來新增。


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

set colin tree listview 1.async image load to true,應該是圖片同時載入的意思。
set colin tree listview 1.cache image to true,圖片快取,但看不出差別,先設定為 true。
set colin tree listview 1.element height to 100,每行的高度。

set colin tree listview 1.extra button bgcolor,額外按鈕的背景顏色。
set colin tree listview 1.extra button enabled to true,是否開啟額外按鈕,設定為 true。
set colin tree listview 1.extra button height to 50,額外按鈕的高度。
set colin tree listview 1.extra button image,額外按鈕的圖片。
set colin tree listview 1.extra button paddings to 0,額外按鈕內縮多少。
set colin tree listview 1.extra button shape to 3,額外按鈕的形狀,有 0,1,2,3,共四種形狀可選。
set colin tree listview 1.extra button text to 額外按鈕的文字,額外按鈕的顯示文字。
set colin tree listview 1.extra button text font bold to true,額外按鈕的顯示文字要不要用粗體。
set colin tree listview 1.extra button text font size to 20,額外按鈕顯示文字的大小。
set colin tree listview 1.extra button width to 150,額外按鈕的寬度。

set colin tree listview 1.icon bgcolor,前方圖示的背景顏色。
set colin tree listview 1.icon height to 50,前方圖示框的高度。
set colin tree listview 1.icon multi params to true,測試出來用途,先設定為真
set colin tree listview 1.icon shape to 3,前方圖片的形狀,同樣有 0,1,2,3,共四種形狀可選。
set colin tree listview 1.icon text color,前方圖示的文字顏色……找不到加文字的地方。
set colin tree listview 1.icon text font bold to true,前方圖示文字要不要用粗體。
set colin tree listview 1.icon text font size to 10,前方圖示文字的大小。
set colin tree listview 1.icon width,前方圖示的寬度。

set colin tree listview 1.scroll bottom after add to true,新增一個項目到清單之後,要不要把畫面自動移到最下方,也就是新增加項目的地方,這個很好用,設定為 true。

set colin tree listview 1.sub text color,下方說明文字的顏色。
set colin tree listview 1.sub text font bold to true,下方說明文字要不要用粗體。
set colin tree listview 1.sub text font size to 20,下方說明文字的大小。
set colin tree listview 1.sub text height to 30,下方說明文字框的高度。

set colin tree listview 1.text color,標題文字的顏色。
set colin tree listview 1.text font bold to true,標題文字要不要用粗體。
set colin tree listview 1.text font size to 20,標題文字的大小。
set colin tree listview 1.text height to 30,標題文字框的高度。

set colin tree listview 1.touch down color,設定按下清單顯示器時,選中項目的背景顏色。
set colin tree listview 1.underline color,設定分隔線的顏色。
set colin tree listview 1.underline width to 4,設定分隔線的寬度。

set colin tree listview 1.width after icon to 0,設定前方圖方後面的間隔寬度。
set colin tree listview 1.width before extra button to 0,設定額外按鈕前方的間隔寬度。
set colin tree listview 1.width before icon to 0,設定前方圖方前面的間隔寬度。

可以設定的東西有這麼多,相信大家一定調整出自己喜歡的格式。

call colin tree list view1 .initialize_scroll,呼叫外掛設定程式。
vertical scroll arrangement參數,填我們要套用的垂直捲動配置是那一個。這裡呼叫要套用的垂直配置和垂直捲動配置用的方塊是不一樣的,在拉的時候要特別的注意。這裡再提醒一次,用垂直捲配配置套用的話,清單顯示器就會無限長度。用垂直配置套用的話,就是固定的長度

call colin tree list view 1.set,呼叫外掛中,要設定那一個清單。
list參數,這裡要放就是我們建好的清單,也就是 global_list

接下來的兩個標籤,是我想看看取出來的值倒底是什麼,所以在這裡就放兩個標籤,用來顯示相關的數值。大家可以不管它,或是填別的東西進去試試看。

call colin tree listview 1.set element main text,這個是用新增清單項目用的
element indext參數,指的就是清單中的第幾項。
main text參數,指的就是標題文字。


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

when colin tree listviwe 1.element click,當清單顯示器被點擊的時候。
call colin tree listview.remove element,呼叫外掛移除元件。
element indext參數,這裡填被點擊選中的項目是那一個,也就是 get element index


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

when colin tree listviwe 1.element long click,當清單顯示器被長按下的時候。
call colin tree listview.set element main text,呼叫外掛設定標題文字程式。
element index參數,這裡設定那一個元件要執行動作,這裡放 get element indx,也就是被長按下的這一個項次。
main text參數,這裡填要把標題的文字改成什麼。


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

when colin tree listviwe 1.element touch down,當清單顯示器被按下的時候。
call colin tree listview.set element main text,呼叫外掛設定標題文字程式。
element index參數,這裡設定那一個元件要執行動作,這裡放 get element indx,也就是被按下的這一個項次。
main text參數,這裡填要把標題的文字改成什麼。

這一個跟上一個是差不多的,按下和長按下的差別只有在手指頭停留的時間上有不同。


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

when colin tree listviwe 1.element touch up,當手指頭離開清單顯示器的時候的時候。
call colin tree listview.set element main text,呼叫外掛設定標題文字程式。
element index參數,這裡設定那一個元件要執行動作,這裡放 get element indx
main text參數,這裡填要把標題的文字改成什麼。

icon前方圖示,以及 extra button額外按鈕,都有這幾個事件可以使用,用法都相同,這裡為了節省時間,就不額外列出一一說明。


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

when button 1.click當按鈕 1按下的時候。
call colin tree listview 1.add element,呼叫外掛中增加清單元件的程式。
element參數,這裡就放我們要加入的元件,這裡用 make a list的方式,加入圖片 +標題 +下方文字的這個類型。可以加入的類型有 3種,請參考第 1部份的使用方塊說明。


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

APP INVENTOR外掛
名稱:ColinTreeListView
外掛來源:aix.colintree.cn
外掛載點:
https://aix.colintree.cn/en/extensions/ColinTreeListView.html

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

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

發佈留言