Android Question xCustomListView with Four Columns of Imageviews and many Rows

Discussion in 'Android Questions' started by Mahares, Jan 13, 2019.

  1. Mahares

    Mahares Well Known Member Licensed 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.
     

    Attached Files:

  2. Erel

    Erel Administrator Staff Member Licensed User

    Example with 300 * 4 images:

    [​IMG]

    Very smooth scrolling.

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

    [​IMG]

    The BasePanel makes it easy to reuse the same views.

    Return the BasePanel to the cache when the item is not visible:
    Code:
    Dim PanelWithViews As B4XView = p.GetView(0)
    PanelWithViews.RemoveViewFromParent
    CachedPanels.Add(PanelWithViews)
    Get a BasePanel from the cache:
    Code:
    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, 
    00, Parent.Width, Parent.Height)
       
    End If
    End Sub
     

    Attached Files:

  3. Mahares

    Mahares Well Known Member Licensed User

    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.
     

    Attached Files:

  4. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  5. Mahares

    Mahares Well Known Member Licensed User

    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.
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    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.

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

    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:
    Code:
    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(
    000, CLV1.AsView.Width, 200dip)
           CLV1.Add(p, 
    Array As ImageData(id1, id2, id3, id4))
       
    Next
    End Sub

    Sub CreateItem (ImageName As StringAs ImageData
       
    Dim id As ImageData
       
    id.Initialize
       
    id.FileName = ImageName & ".jpg"
       
    id.Title = id.FileName
       
    Return id
    End Sub
     
    Mahares and jimmyF like this.
  7. Mahares

    Mahares Well Known Member Licensed 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:
    Code:
    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:
    Code:
    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
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice