Custom ListView - ColinTreeListView *

Higher level "ListView", using extensions!

  • Update on 2019.6.5 (Version 11):

    • Added Translations (need platform supporting)
    • Fixed a Get method bug by @10MINT
    • Added ExtraButtonImage in ColinTreeListViewElement part of work done by @mkakozbeklem
    • Removed flag deprecated from all blocks

  • Update on 2018.7.27 (Version 10):

    • Added Get by @10MINT
    • Added LastLongClickedElement by @10MINT
    • Fixes label cannot click on some platforms

  • Update on 2018.3.10 (Version 9):

    • Fixed Error of Visiblility
    • Added ClearCache(path) & ClearAllCache() -- still in test, it should works

  • Update on 2018.3.4 (Version 8)

    • Fixed extraButtonEnabled not implemented
    • Added support of direct(static) functions in ColinTreeListViewElement

  • Update on 2018.2.25 (Version 7) THANK YOU @User81 FOR SPONSORING:

    • Fixed that lastClickedElement starts from 0
    • Fixed that images that cached by a same path would act wired when one of them is clicked
    • Added a extra button
    • Added property handler for every single element of the listview -> useage

  • Update on 2018.2.11 (Version 6):

    • Added properties of text height (both main- & sub-text)

  • Update on 2018.1.31 (Version 5):

    • Added icon text related properties
    • Added lastClickedElement & lastClickedIcon

  • 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.
    Here is the sample:

  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 (IconMultiParams checked):

Events

  • Element events:

    • ElementClick
      • related property: LastClickedElement
    • ElementLongClick
      • related property: LastLongClickedElement
    • ElementTouchDown
    • ElementTouchUp

  • ExtraButton events:

    • ExtraButtonClick
      • related property: LastClickedExtraButton
    • ExtraButtonLongClick
    • ExtraButtonTouchDown
    • ExtraButtonTouchUp

  • Element icon events:

    • IconClick
      • related property: LastClickedIcon
    • IconLongClick
    • IconTouchDown
    • IconTouchUp

Methods

  • List operations:

    • AddElement
    • AddEmptyElement
    • Clear
    • Get
    • GetElement
    • Initialize
    • Initialize_Scroll (using the VerticalScrollArrangement)
    • RemoveElement
    • Set

  • Element operations:

    • SetElement
    • SetElementIcon
    • SetElementMainText
    • SetElementSubText
    • SetElementText

  • Other operations:

    • ClearAllCache
    • ClearCache

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)

  • AsyncImageLoad - load image in a asynchronous way
  • CacheImage - cache image by file path, in order to avoid wasting time and memory
  • ElementHeight - Height of elements
  • ExtraButtonBgColor
  • ExtraButtonEnabled - default as false, if you need a extra button, please check it (set it to true).
  • ExtraButtonHeight
  • ExtraButtonImage
  • ExtraButtonPaddings
  • ExtraButtonShape
  • ExtraButtonText - I would not support seting text of extra button of each elements :P
  • ExtraButtonTextFontBold
  • ExtraButtonTextFontSize
  • ExtraButtonWidth
  • IconBgColor
  • IconHeight
  • IconMultiParams - if this is checked, new format (introduced since Version 5) path||iconText would be available. Value like Photoshop.png||P will be displayed as a Text P on image Photoshop.png
  • IconPaddings - for larger space of text displaying
  • IconShape - same as one of buttons
  • IconTextColor
  • IconTextFontBold
  • IconTextFontSize
  • IconWidth
  • ScrollBottomAfterAdd - Scroll to bottom after an element is added - (using delay to make sure listview has been re-rendered)
  • SubTextColor
  • SubTextFontBold
  • SubTextFontSize
  • SubTextHeight (-1 for auto, -2 for fill parent)
  • TextColor
  • TextFontBold
  • TextFontSize
  • TextHeight (-1 for auto, -2 for fill parent)
  • TouchDownColor - Color when element is touch down, default alpha is 136/255, about 53%
  • UnderlineColor - An underline is the line between two elements
  • UnderlineWidth
  • WidthAfterIcon
  • WidthBeforeExtraButton
  • WidthBeforeIcon

Attached: the color when element is touch down

ColinTreeListViewElement

This is a handler for every single element in the listView.

Note: Before use any property, please link to a element by calling LinkToElement

Properties that not exist in ListView:

  • UseGlobalProperties - default as False, if you want the properties of this element not to be refresh when the ListView properties changed, please set this to True.
  • ElementBackgroundColor

Download

Need more features?

results matching ""

    No results matching ""