B4A Library [B4X] CLVTree - Tree View

CLVTree extends xCustomListView and turns it into a tree view:

Usage:
1. Add a CustomListView with the designer.
2. Initialize CLVTree and add items:

    Tree.Initialize(CustomListView1)
    For i = 1 To 10
        Dim item As CLVTreeItem = Tree.AddItem(Tree.Root, $"Item #${i}"$, Null, "")
    Next

More information in the attached cross platform example.

Notes

- The UI is lazy loaded, this means that the views are only created for the visible items and they are later reused.
- The items text can be a regular string or CSBuilder.
- To allow making multiple changes efficiently, the UI isn't updated immediately. You should call Tree.Refresh to update it.
- As the code uses the new IIf and As keywords, it requires B4i 7.5+, B4J 9.1+ or B4A 11+.
- There are currently no animations. Might be added in the future.

Updates

v1.01 - Tree.Clear method. Removes all items.

 

[Mashiane]

Can one customize the child items with layouts?

 

[Erel]

You can change the text and image. Currently you cannot make any other changes.

 

[Chris Guanzon]

why I have this error in Logs?

Array expected.
Array expected.
Unknown member: as
Unknown member: as
Unknown type: Object<br />Are you missing a library reference?
Unknown type: Object<br />Are you missing a library reference?
Unknown type: Object<br />Are you missing a library reference?
Array expected.
Array expected.
Array expected.
Undeclared variable 'b4xview' is used before it was assigned any value.
Undeclared variable 'b4xview' is used before it was assigned any value.
Undeclared variable 'b4ximageview' is used before it was assigned any value.
Undeclared variable 'b4ximageview' is used before it was assigned any value.
Undeclared variable 'b4ximageview' is used before it was assigned any value.
Undeclared variable 'iif' is used before it was assigned any value.
Undeclared variable 'iif' is used before it was assigned any value.
Undeclared variable 'iif' is used before it was assigned any value.
Undeclared variable 'iif' is used before it was assigned any value.
Undeclared variable 'iif' is used before it was assigned any value.

 

[Chris Guanzon]

Oh! now it's running. not using b4a 11.0 beta.

 

[Erel]

Another example:

Note that in B4A and B4i the items text is set using CSBuilder. The reason for using CSBuilder in the countries text is related to the way attributed text is handled in iOS where reusing the same label with and without attributed text can cause some of the attributes to be retained. The solution is to be consistent and use CSBuilder with all items.

Flags source: https://flagpedia.net/download/images
List of countries: https://datahub.io/JohnSnowLabs/country-and-continent-codes-list

 

[Erel]

And a bit more complicated example, with a search feature:

 

[Erel]

v1.01 - Tree.Clear method. Removes all items.

The above example requires v1.01+.

 

[Mahares]

The above example by Erel has the search string as the start of a country name. But, if you want the search string to be anywhere in the country name, then here is what I did to Erel's example: See also screenshot:

Private HighlightTextColor As Int =xui.Color_Red 'or any other color   'in Class_Globa

l
I replaced this line:

If Prefix = "" Or cnty.Name.ToLowerCase.StartsWith(Prefix) Then

with this:

If Prefix = "" Or cnty.Name.ToLowerCase.contains(Prefix) Then

I modified this sub as follows:

Private Sub CreateCountryText(country As String, prefix As String) As Object 'ignore
    #if B4J
    Return country
    #Else if B4i or B4A
    Dim cs As CSBuilder 
    Dim x As Int = country.ToLowerCase.IndexOf(prefix)
    If x = -1  Then
        Return cs.Initialize.Color(xui.Color_Black).Append(country).Popall
    End If
    cs.Initialize.Append(country.SubString2(0, x)).Color(HighlightTextColor).Append(country.SubString2(x, x + prefix.Length)).Pop
    Return cs.Append(country.SubString(x + prefix.Length))
    #End If
End Sub

 

[endbyte]

erel, how do I change the color and size of the arrow ?, I am using clv black background, the item text is yellow but the arrow seems to be black and is not visible

 

[Erel]

Unzip the b4xlib file. Add the class to your project and add your own arrow file, named arrow.png.

 

[endbyte]

Unzip the b4xlib file. Add the class to your project and add your own arrow file, named arrow.png.

done, thanks

 

[endbyte]

Erel, I am quite a newbie in the forum and in b4a so sorry if this does not go here, I made a small aesthetic change to the class due to my needs, the change consists of the extra divider property for when we use a transparent CLV, I know that the CLV has its own divider but when you want to use transparent the divider must be canceled, it does not interfere With the functionality of the original class it is only an aesthetic point, you can define it after initializing the tree, as I said I am a newbie in this but I really liked b4a so my apologies to the teachers of b4a if my change to the class is enough rudimentary or unnecessary for many, I do it to learn little by little and by the way it can be useful to someone who, like me, also starts in B4A

Tree.Extradiv(True)

 

[LucaMs]

I apologize on my knees in advance for this post

Since:

1 - this is an extension class of CustomListView which is known to contain multiple B4XViews in each item, it is better to load it from the layout
2 - a TreeView will rarely have many items, so deferred loading is probably an unnecessary complication...

wouldn't it be better to have a TreeView that provides the basic panels of the CLV items so the programmer can load his own layout?

I don't know if this would be easily achievable in an extension class and you would have to modify CLV instead, but maybe it is doable.

Anyone want to try?

I was starting to develop a particular TreeView, starting from scratch, but unfortunately I don't have B4i so I couldn't test the version for it (or even create its layouts).
Also, I would like to be able to move the "branches" / "nodes" with Drag & Drop, which is already complicated enough with B4J and B4A.


P.S.
"Also, I would like to be able to move the "branches" / "nodes" with Drag & Drop, which is already complicated enough with B4J and B4A."
I think this is unachievable in an extension class.

 

[Erel]

2 - a TreeView will rarely have many items, so deferred loading is probably an unnecessary complication...

This implementation was designed for lazy loading. This makes it work for small as well as large trees. If your tree has hundreds or more items then lazy loading becomes very important.

Someone else can make a different implementation without lazy loading. It will indeed make some things simpler.