Android Question xCustomListView with Four Columns of Imageviews and many Rows

[Mahares]

I wanted to accomplish what Erel did in the below link in post #3, but with 4 or multiple columns of imageviews not one imageview column.
https://www.b4x.com/android/forum/t...listview-with-imageviews-bitmap-files.101299/
I have a list of bitmap files to show in succession on an xCustomlistView that has 4 columns of imageviews and below each row of imageviews there are 4 labels showing the bitmap files in each imageview. If I extract random files from the list, the xCustomListView works well, but if I move from customlistview item to item in the order of the files, each row shows the same bitmap file in each imageview of the same row of a different bitmap file. Although scrolling is smoother in release mode on faster devices, lazy loading is still sluggish and not properly applied. Attached is a screenshot that shows how the imageviews look in my flawed project. I can attach the full project that reproduces the problem if required.

 

[Erel]

Example with 300 * 4 images:

Very smooth scrolling.

The trick is to avoid creating too many views.
The items layout looks like this:

The BasePanel makes it easy to reuse the same views.

Return the BasePanel to the cache when the item is not visible:

Dim PanelWithViews As B4XView = p.GetView(0)
PanelWithViews.RemoveViewFromParent
CachedPanels.Add(PanelWithViews)

Get a BasePanel from the cache:

Sub GetPanelFromCache (Parent As B4XView)
   If CachedPanels.Size = 0 Then
       Parent.LoadLayout("Item")
       Log("create item")
   Else
       Dim p As B4XView = CachedPanels.Get(CachedPanels.Size - 1)
       CachedPanels.RemoveAt(CachedPanels.Size - 1)
       Parent.AddView(p, 0, 0, Parent.Width, Parent.Height)
   End If
End Sub

Better implementation based on PreoptimizedCLV is available here: https://www.b4x.com/android/forum/t...-long-list-images-from-url.116309/post-726808

 

[Mahares]

Example with 300 * 4 images:

Thank you for the example, but it does not do what I expect it to do.
My objective is to have each imageview contain a different bitmap file. In your example, the imageviews are showing the same file in different rows. If I have 200 files, the number of rows should be only 50 rows. I also wanted the number of imageviews to be the same as the assets png number of files. If I have 200 bitmap files, I like to see only 200 imageviews. Also, in your example, the label names do not match the images names. I have attached my example that I have been working with for days, but the problem I cannot solve in mine is that each image is repeated 4 times in a row, which is not good.
Thank you for your perseverance.

 

[Erel]

My objective is to have each imageview contain a different bitmap file. In your example, the imageviews are showing the same file in different rows.

Not really. The example doesn't reuse the same bitmaps. You should go over the code and understand it. You will see that it will work with any set of bitmaps.

 

[Mahares]

You should go over the code and understand it

I did go over your code of course and tried to apply it to my situation before I responded. It does not work as is. Take a look at the images on your screenshot. You will see that the same image is repeated more than once in a different row. That is a no no. Also, check the image names. They do not match the color in the bitmap files.For example, 115.png in the assets shows a label 114.png on the xCLV. Thank you anyway for your help. This is not a real world project I am working on and needed. It was just something I wanted to do to learn more about xCLV capabilities. Expecting you to come to our rescue every time is asking too much and is not fair. You have more important things to worry about.

 

[Erel]

You will see that the same image is repeated more than once in a different row

I know that they are repeated. The bitmaps themselves are not reused. I wanted to test it with more than 1000 images and didn't want to include 1000 image files.

The challenge here is not to organize the images. This is trivial. The challenge is to update the list efficiently and to avoid running out of resources.

They do not match the color in the bitmap files.

These are the image names they are not expected to match the file names. You are focusing on the wrong stuff...

Expecting you to come to our rescue every time is asking too much and is not fair. You have more important things to worry about.

Actually I did take the time to create this example. This is an important example.

So how simple is it to modify the example and remove the repeated images?
All you need to do is change the code to:

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("1")
   CachedPanels.Initialize
   For i = 1 To 200 - 1 Step 4
       Dim id1 As ImageData = CreateItem(i)
       Dim id2 As ImageData = CreateItem(i + 1)
       Dim id3 As ImageData = CreateItem(i + 2)
       Dim id4 As ImageData = CreateItem(i + 3)
       Dim p As B4XView = xui.CreatePanel("")
       p.SetLayoutAnimated(0, 0, 0, CLV1.AsView.Width, 200dip)
       CLV1.Add(p, Array As ImageData(id1, id2, id3, id4))
   Next
End Sub

Sub CreateItem (ImageName As String) As ImageData
   Dim id As ImageData
   id.Initialize
   id.FileName = ImageName & ".jpg"
   id.Title = id.FileName
   Return id
End Sub

 

[Mahares]

With the addition of Erel's code in post #6, it works nicely. Each imageview is shown only once as it is supposed t do. I only have a couple of issues related and need resolved:
1. What if the number of imageviews and bitmap files is 202 and we have 4 columns per row. That leaves 2 orphan imageviews and causes a crash in the below line unless I use a try block:

ids(index).Bitmap = xui.LoadBitmapResize(File.DirAssets, ids(index).FileName, p.Width / 4, p.Height, True)

2. I use this for the item click that returns the file name for column 0, but I like to return the file name of the item clicked. It can be item 1 thru 4 of the selected row:

Sub CLV1_ItemClick (Index As Int, Value() As Object)
    Dim iData() As ImageData =Value
    Log(iData(0).FileName)  'shows the bitmap file name for column 0, but I like it to return file name for item clicked
End Sub