Android Question xCustomListView with Four Columns of Imageviews and many Rows

M

Mahares

Expert
Licensed User
Longtime User
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.
 

Attachments

  • xCLVwith4ImageviewColumns.png
    13.3 KB · Views: 2,039
Sort by date Sort by votes

Erel

B4X founder
Staff member
Licensed User
Longtime User
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:
B4X: 
Dim PanelWithViews As B4XView = p.GetView(0)
PanelWithViews.RemoveViewFromParent
CachedPanels.Add(PanelWithViews)

Get a BasePanel from the cache:
B4X: 
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
 

Attachments

  • CLVWithManyImages.zip
    67.6 KB · Views: 1,978
Last edited:
Upvote 0
M

Mahares

Expert
Licensed User
Longtime User
Erel said:
Example with 300 * 4 images:
Click to expand...
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.
 

Attachments

  • xCLVImageGalleryMahares.zip
    78.2 KB · Views: 1,056
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Mahares said:
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.
Click to expand...
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.
 
Upvote 0
M

Mahares

Expert
Licensed User
Longtime User
Erel said:
You should go over the code and understand it
Click to expand...
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.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Mahares said:
You will see that the same image is repeated more than once in a different row
Click to expand...
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.

Mahares said:
They do not match the color in the bitmap files.
Click to expand...
These are the image names they are not expected to match the file names. You are focusing on the wrong stuff...

Mahares said:
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.
Click to expand...
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:
B4X: 
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
 
Upvote 0
M

Mahares

Expert
Licensed User
Longtime User
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:
B4X: 
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:
B4X: 
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
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Article
B4A Library [B4X] [XUI] AS MultiColumnCustomListView based on xCustomListView
Replies
13
Views
3K
LucaMs
M
  • Question
Android Question xClv with Four Columns of ImageViews but the Number of Images is not Divisible by Four
Replies
3
Views
1K
Erel
M
  • Question
Android Question Applying Lazy Loading to xCustomListView with Imageviews Bitmap Files
Replies
3
Views
5K
Erel
  • Solved
Android Question xCustomListview go slow on Loading Images with LazyLoading
Replies
2
Views
2K
kisoft
G
  • Question
Android Question adding multple images to scrollview from mysql??
Replies
4
Views
1K
GudEvil
G
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…