Custom ListView - ColinTreeListView


Higher level "ListView", using extensions!

  • Update on 2017.12.30 (Version 4):

    • Adapted to all platforms (ai2.appinventor.mit.edu , thunkable , etc.) There should not more NoSuchMethodError at anywhere.
  • Update on 2017.12.29 (version 3):

    • Adapted to new Appinventor (since 2017.12.27, Companion 2.45) (Fixed NoSuchMethodError)
    • Added properties related to image loading - AsyncImageLoad & CacheImage (that in a same path)
    • Added property - ScrollBottomAfterAdd

How to use

  1. Left a VerticalArrangement or a VerticalScrollArrangement, set the width and the height as you like
    Example:

  2. Before do anything like add a element, initialize it first:
    Choose only one of the initialize method

  3. Set the list
    The "set" method required a list, and the list elements can be:

    • Single text element without icon:
      The list element here is just a Text, and it will be shown in the element

    • Single text element without icon(same with the one above):
      A sub-list with only one item is also allowed when creating a Single text element without icon.

    • Single text element with icon:
      The sub-list with two item will be proceed as a Single text element with icon.
      The first item is the icon path, when the second one is the text here.

    • Double text element with icon:
      A list with at least three item, is being recognize as a Double text elemtnt with icon. And only the very first three items will be used as the parameters here. They are: icon(path), Main-text, and Sub-text

      The three types of list element can exist when a ColinTreeListView is created

    Sample code:

    Runtime screenshot:

Component properties

ColinTreeListView provide the real-time list layout modifing through properties
And the properties are: (the order of the properties cannot be control by code, sorry for the mess here)

  • load image in a asynchronous way - AsyncImageLoad
  • cache image by file path, in order to avoid wasting time and memory - CacheImage
  • Height of elements - ElementHeight
  • Height & Width of icons - IconHeight & IconWidth
  • Scroll to bottom after add an element - ScrollBottomAfterAdd (using delay to make sure listview has been re-rendered)
  • Sub-text color & bold & font size - SubTextColor & SubTextBold & SubTextSize
  • Text(including Main-text) color & bold & font size - TextColor & TextBold & TextSize
  • Color when element is touch down, default alpha is 136/255, about 53% - TouchDownColor
  • Color and the line width of the element underline(dividing line) - UnderlineColor & UnderlineWidth
  • the gap that after & before the icon - WidthAfterIcon & WidthBeforeIcon

Attached: the color when element is touch down

All the events and methods

  • Element events:

    • ElementClick
    • ElementLongClick
    • ElementTouchDown
    • ElementTouchUp

  • Element icon events:

    • IconClick
    • IconLongClick
    • IconTouchDown
    • IconTouchUp

  • List operating:

    • AddElement
    • AddEmptyElement
    • Clear
    • GetElement
    • Initialize
    • Initialize_Scroll (using the VerticalScrollArrangement)
    • RemoveElement
    • Set
    • parameters:
      • element - the content of the element
      • elementIndex - the serial number of the element, starts from 1

  • Element operating:

    • SetElement
    • SetElementIcon
    • SetElementMainText
    • SetElementSubText
    • SetElementText
    • parameters:
      • element - the content of the element
      • elementIndex - the serial number of the element, starts from 1

Download

Need more features?

results matching ""

    No results matching ""