B4A Library [B4X] CLVTree - Tree View

CLVTree extends xCustomListView and turns it into a tree view:

1626084972760.png


Usage:
1. Add a CustomListView with the designer.
2. Initialize CLVTree and add items:
B4X:
    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.
 

Attachments

  • Tree Example.zip
    232 KB · Views: 754
  • CLVTree.b4xlib
    3.4 KB · Views: 725
Last edited:

Chris Guanzon

Active Member
Licensed User
Longtime User
why I have this error in Logs?


B4X:
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.
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Another example:

1626175499327.png


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
 

Attachments

  • Project.zip
    411.2 KB · Views: 428

Mahares

Expert
Licensed User
Longtime User
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:
B4X:
Private HighlightTextColor As Int =xui.Color_Red 'or any other color   'in Class_Globa
l
I replaced this line:
B4X:
If Prefix = "" Or cnty.Name.ToLowerCase.StartsWith(Prefix) Then
with this:
B4X:
If Prefix = "" Or cnty.Name.ToLowerCase.contains(Prefix) Then
I modified this sub as follows:
B4X:
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
 

Attachments

  • xClvTreeWithSearchText.png
    xClvTreeWithSearchText.png
    19.4 KB · Views: 380

endbyte

Member
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
 
Last edited:

endbyte

Member
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



B4X:
Tree.Extradiv(True)

img2.png
 

Attachments

  • CLVTree.bas
    9.6 KB · Views: 346
Last edited:
Top