B4A Library [Class] CheckList

Hi,

I created a class to manage a list with checkboxes (but not only, you can use it for any kind of list with rows). The layout is highly customizable and you can even extend a clicked item with extra content. You can rearrange the items programmatically or manually (drag & drop).

Tutorials: How they do #1, How they do #3



v1.1: I added the ExtendItem function and an option to check the box when items are added

v1.2: I fixed the width problem (in a container like TabHost, the width property returns -1, so we have to use a different method to get the SV width) and, in the demo, a click on the extended item collapses now its content.

v1.3: I added a new function to add items without checkbox (AddItemNoChkbx) so you can use this class as a ListView replacement;
I changed the way it colors the selected item (now it complies to the default Android theme);
I added an option to color differently the extended item.

v1.4: I optimized the code a little bit and I added three functions:
AddCustomItem (adds your own layout to the list);
AdjustBitmap (resizes the bitmap to fit the given dimensions);
GetFirstText (returns the first label text found for the given ID).

v1.5: I simplified and improved the management of extended items (I also fixed a bug). Unfortunately, that could break existing code.
Inspired by the class CustomListView, I added a parameter to Initialize: DividerHeight (if you want to put a colored divider between items) and several functions:
- NumberOfItems
- getHeight
- JumpToPosition
- JumpToItem
- CollapseItem
- HasExtraContent
- ExtendedItemID

v1.6:
Now, you can define the color of checked items and the background color (transparent by default).
I added two (very fast) functions:
- JumpToView (scrolls the list to the given view)
- FindPanelContaining (returns the panel containing the given view)
I added another example.

v2.0:
I added more than 10 new functions (MoveItem, RemoveItemAt, SwapItems, SortItems, ReplaceItem, ApplyColors, CreateTextList, etc.). See post #21 for complete list;
I changed the ID type (formerly Int) to Object (that shouldn't break the existing code);
I added the Drag & Drop feature;
I optimized JumpToPosition (a lot quicker now);
I fixed a bug with colors.

v2.1:
I added functions to filter the list;
I added CreateIntegerList to ease the sorting and filtering of integer values;
Now you can change the item height in ReplaceItem.

v2.2:
I fixed a bug (BackgroundColor was not applied to new items)
I added new functions:
- FindPanelWithID(ID As Object) As Object
- SetOnPaintListener(SubName As String)
- Repaint(pnlItem As Panel)
I renamed ApplyColors to RepaintAllItems

v2.21:
I changed an incorrect declaration in the demo #1 and #2.
The class is now compatible with the obfuscation option.

v2.22:
The class no longer displays warnings with B4A v2.7x.
All examples are now compatible with the obfuscation option.

Complete list of functions here

Fred

PS: you need the Reflection Lib

 

[Dave O]

Hi syncmaster,

Sorry for the delay, I was travelling.

Attached is the source code for a simple app that lets you keep count of things.

The checklist is used on the home screen - 1 row for each counter. Each item has some custom elements (text labels and buttons).

I've tweaked the checklist code a bit to make drag-and-drop targeting a bit better (still not ideal, though).

As mentioned above, I load my data from a text file into a map (to parse the data into proper fields, then load that into a list. The home screen uses a checklist to show the list contents, while the details page uses individual controls.

Have a look, and let me know if this helps you or not.

Cheers from windy Wellington!

 

[Informatix]

I've tweaked the checklist code a bit to make drag-and-drop targeting a bit better (still not ideal, though).

Placing an item at the end is not easy with your change.
But, anyway, thanks for sharing this example.

 

[Informatix]

Thanks for the info. The colors I have now adapted so as I need them. Now I have the following problem: By default, the checkbox list is set to multi-selection. I need a real single-selection, as with radio buttons, ie, the previous selection is cleared. So I can identify the item that the user wants to take over.

Where can I use that to realize that? Thanks for your help in advance.

The list does not manage a selection list. In the example #2, the selection is made by clicking on the checkbox. If you click on several checkboxes, that does a multi-selection, but it's just a view of the mind.

If you want to restrict the selection to only one item, you have to memorize the last selection, and change its state when a new selection is made.

 

[Dave O]

Agreed, my drag-and-drop code is simple-minded and really should be refined to handle all cases, but I found it worked better (IMO) for moving an item to any position except the last (which is a less common case, I think).

Even with ideal code, it would really help to see where the target is (using a marker or by dynamically shuffling items during the drag). I've seen several apps do this, and it works really well.

BTW, in your Ultimate List View (which I may have a use for soon), is drag-and-drop handled the same way as in your Checklist class, or have you enhanced it as discussed here (or something similar)?

Cheers!

 

[Informatix]

Agreed, my drag-and-drop code is simple-minded and really should be refined to handle all cases, but I found it worked better (IMO) for moving an item to any position except the last (which is a less common case, I think).

It works better than my own code indeed (I didn't spend a lot of time on it to be honest). I just reported what I noticed. It was not a criticism.

BTW, in your Ultimate List View (which I may have a use for soon), is drag-and-drop handled the same way as in your Checklist class, or have you enhanced it as discussed here (or something similar)?

In ULV, the items are reordered during the drag. It was not really easy to do because I faced the problem of different heights. The way I did is to compute the covered area for each item under the dragged one. And to weight this computation depending on the item size. The biggest result wins.

 

[luke2012]

Very good Job!!! I'll try it as soon as possible!
One question :

The third example is perferct for my need. Is it possible to make a category separator within the list?

 

[Informatix]

Yes, I called that headers if I remember correctly (I did not use this class since many months).

 

[luke2012]

Ok I'll check!
Thanks!

 

[luke2012]

Looking at the third screenshot, it's possible to add other views (like buttons) to the left of the editbox ?

 

[Informatix]

Looking at the third screenshot, it's possible to add other views (like buttons) to the left of the editbox ?

You can add anything. Each item is a panel that you can fill as you wish.

 

[luke2012]

I'm planning to implement a header toggle in order to allow the expand / collapse of the items under the corresponding header.
So when the user click on the header, the items under the header are handle by a toggle method.

I'm thinking how to implement the handling between Header and the related items.

First Idea :
Create a new class method that retrieve a collection of class items using a search key.
In this way I can handle each item of the collection and hide it.
Having this, I can implement a Header Toggle method that show & hide the related items.

Second Idea :
Modify the "AddHeader" / "AddCustomItem" method in order to make a one to many relation between Header and related Items (for example using an array that contains the child Ids).
In this way having the Header childs I can handle them and implement a toggle method.

Third Solution (using existing method):
I see that within checklist class there is a "Filter" method.
Could be the possibility to use this method to show only items that match a specific text ?

 

[Informatix]

I never tried to use the Filter that way so I don't know if it's a good idea. Let us know.
The solution that I implemented in UltimateListView is very simple: when you create an expandable item, the main parameter is a list of children. When needed, you call an expand function or a collapse function that reads this list.

 

[ttsolution]

Dear Informatix,

When I touch to the list the follow error generated (all demo)

An error has occurred in Sub :
pnlsv_touch signature does not match expected signature. Continue?

many thanks for your sharing

Jonh,

 

[Informatix]

When I touch to the list the follow error generated (all demo)

An error has occurred in Sub :
pnlsv_touch signature does not match expected signature. Continue?

Are you sure that you use a recent version of the Reflection library?

 

[ttsolution]

Yes, I replaced my Reflection library with the new one and it works fine. Many thanks

 

[pantaraf]

Hi,
I'm having a problem using this class. I have the following situation:

Dim Container As AHPageContainer
Dim Pager As AHViewPager
Dim Pan(7) As Panel
Dim C As Cursor
Dim lst, lstTratt As ClsCheckList

'Pan from 0 to 4 are loaded using static layouts

Pan(5).LoadLayout("CheckListScrollView")
lst.Initialize(Me, ScrollView1, "lst_CheckedChange", "", "", 1dip)
lst.ExtensionColor=Colors.Black
lst.BackgroundColor=Colors.Transparent
lst.DividerColor=Colors.ARGB(255,0,0,0)
C=Main.SQL.ExecQuery("SELECT TIPO FROM PATOLOGIE ORDER BY TIPO")
For b=0 To C.RowCount-1
  Dim t As String
  C.Position=b
  t=C.GetString("TIPO")
  lst.AddCustomItem(b+1,CreateItem(50,b+1,t),50dip)
Next
Container.AddPageAt(Pan(5),"Avversità",5)
 
Dim sc As ScrollView
sc.Initialize(500)
Pan(6).AddView(sc,0,0,100%x,100%y)
sc.Visible=True
sc.BringToFront
sc.Color=Colors.Yellow
lstTratt.Initialize(Me, sc, "sc_CheckedChange", "", "", 1dip)
lstTratt.ExtensionColor=Colors.black
lstTratt.BackgroundColor=Colors.Transparent
lstTratt.DividerColor=Colors.ARGB(255,255,0,0)
C=Main.SQL.ExecQuery("SELECT TIPO FROM TIPO_TRATTAMENTI ORDER BY TIPO")
For b=0 To C.RowCount-1
  Dim t As String
  C.Position=b
  t=C.GetString("TIPO")
  lstTratt.AddCustomItem(b+1,CreateItem(50,b+1,t),50dip)
Next
Pan(6).Color=Colors.Transparent
Container.AddPageAt(Pan(6),"Trattamenti",6)

Pager.Initialize(Container, "Pager")
Pager.Color=Colors.Black
Tabs.Initialize(Pager)
Tabs.LineHeight = 5dip
Tabs.LineColorCenter = Colors.ARGB(255,218,165,32)
Tabs.TextColor = Colors.Gray
Tabs.TextColorCenter = Colors.White
Activity.AddView(Tabs, 0dip, btnSave.Height, 100%x, 100%y-btnSave.Height)
lst.ResizePanel()
Activity.AddView(Pager, 0dip, btnSave.Height+40, 100%x, 100%y-btnSave.Height)

Everything works great but Pan(6), I just can't make items show up. In this case (my last test) I've tried to instantiate a ScrollView on the fly instead of loading a layout (a clone of the one loaded in Pan(5)). The items are loaded (I mean the db is populated) but the yellow ScrollView sc is the only thing that shows up. If I load the items in the scrollview of Pan(5) everything works fine.
Inspecting all this stuff using the debugger everything gets loaded correctly inside the ClsCheckList.
Where am I wrong?

Thank you in advance!
Raffaele

P.S.: I've already opened this question on a generic thread. Following Erel's hint I've added a second view (a label) to the panel and it just shows up correctly, so I can see a 200x200 black label over a yellow scrollview.

Dim sc AsScrollViewDim lb AsLabel
lb.Initialize("")
sc.Initialize(500)
Pan(6).AddView(sc,0,0,100%x,100%y)
Pan(6).AddView(lb,0,0,200,200)
lb.Color=Colors.Black
lb.Text="TEST"
lb.BringToFront
sc.Visible=True
sc.SendToBack
sc.Color=Colors.Yellow

 

[elbelli2013]

Hi,
How I can to get second line or image from the lst ? I only can extract firstText.



Sub lst_CheckedChange(chb As CheckBox, ID As Object)

Dim nico As List
Dim it As Item

BtnOK.Text="OK (" & lst.CheckedList.Size &")"

nico=lst.CheckedList()

For i=0 To nico.Size-1
Dim it As Item
it.Telefono=lst.GetFirstText(nico.Get(i))

BLANCLIST_temp.add(it)
Next

End Sub


thanks

 

[elbelli2013]

Hi,
How I can to get second line or image from the lst ? I only can extract firstext.

Sub lst_CheckedChange(chb As CheckBox, ID As Object)

Dim nico As List



Dim it As Item

BtnOK.Text="OK (" & lst.CheckedList.Size &")"

nico=lst.CheckedList()

for i=0 To nico.Size-1
Dim it As Item
it.Telefono=lst.GetFirstText(nico.Get(i))

BLANCLIST_temp.add(it)
Next




thanks

 

[Informatix]

Hi,
How I can to get second line or image from the lst ? I only can extract firstext.

Sub lst_CheckedChange(chb As CheckBox, ID As Object)

Dim nico As List



Dim it As Item

BtnOK.Text="OK (" & lst.CheckedList.Size &")"

nico=lst.CheckedList()

for i=0 To nico.Size-1
Dim it As Item
it.Telefono=lst.GetFirstText(nico.Get(i))

BLANCLIST_temp.add(it)
Next




thanks

Your item is a panel so browse the views of your panel with GetView. Look at my second demo.

 

[elbelli2013]

ok, thanks.!! for Your fast reply!