[FREE] Image List Viewer Extension - A Fully Customizable List View with Title, Subtitle, Image and Checkbox

Extensions
, , , ,
46

Look at how most websites do it.

A list of categories to select from
Pages (individual listviews) of items in that category

No big long lists

47

Search the board for
Go Scroll Yourself

That tackles this problem.

48

I shorten my list to 20, in fist initialize after loading data from google sheet it add 8 items to the Image List View, when user scroll down and reach the bottom of the list view, it add one more and continuing till end of the list, but still the problem exist, image are not fixed in their place.
watch the video:


I think it is not related to the list, it might be an issue of Extension,
this is my AIA:
Loading_image_from_Url_in_imagListView1.aia (618.4 KB)
hope @The_K_Studio have a look

1 Like
49

Thank you @ABG of the suggestion.
I tested Go scroll yourself method, card view with comp creator and List view component. but no one was suitable for my project.
my app is a shopping app and user need to click on some item, Go scroll method using labels which are not clickable or I couldn't found any solution. also, in Go scroll method we have to design a scrollbar and user have to scroll from the scroll bar not any area he/she want from the screen, I think it is a weakness.

50

There is no issue in the extension.

I saw your aia, your blocks are messy, I cant figure out, I feel issue is in your blocks. I suggest you to create a new test project and follow my blocks given above. it will work.

1 Like
51

Here is a simple example of a "shop", with categories, items and pages
(note: the categories and items don't make sense, I just generated some sample data on mockaroo)
Because the category lists are quite short, I only set the chunks to 3, in reality you may want 10, 10+, much of this will depend on the size of your images and their location, along with network speed of the device using the app (data/wifi etc.)

Most websites use multiple images for display, based either on screen size or display size of the containing element. This is fine when all the images are on the same server, for an app, probably just a thumbnail for the listview, and a display image for a detail view.

shop (1).aia (8.5 KB)

blocks (12)
blocks (12)974×2919 553 KB

[edit - updated aia and blocks since first posting - small error in blocks for when 3 or less items in category]

3 Likes
52

thank you for your kindness and help
I am going to try this method.

53

You were right, there was a bug in the extension which was causing reloading of images while scrolling the list view. I have fixed the issue now. Thanks.

V5 Updated. Issue with image position and reloading fixed.

54

Thank you very much for your consideration and help.

If possible, please add an option for text alignment from left to right and right to left directions in the next update. In some languages like Arabic, Persian, and Pashto, texts are written from right to left, and using left alignment does not look good.

1 Like
55

Thank you for suggestion.

V6. Updated
Added property to set text alignement for title and subtitle either left, center or right.
Note: When text is aligned to right and checkbox set to visible then adjust the paddings to avoid layout overlapping.

1 Like
56

How can I count and get amount of the checked items and get Title for each checked item in new screen?

57

Whenever there is change in checkboxe status below event is raised that will return the checked item indices as well as list items.

image

Also you can use block GetCheckedItems that will gives you the indices of checked list items.

Then use it to get titles for those checked items. To get total count of checked items use length of list block.

58

Where can I download this extension?

59

Check first post.

60

Thanks

61

v8 Updated

  1. Added support for loading image from assets in companion
  2. Added GetAsd function.
  3. Added function ScrollToPosition y
  4. Added event OnScroll that will return scrollY position
  5. Added GenrateImageList function to generate image list with specified image name and length. Helpful when using same image for all list items.

GenerateImageList_Method

  1. Updated OnCheckboxChanged event to return checked titles, subtitles, images and their indices as list. Note: This block will break existing block from v7, so before importing v8, backup your project.

OnCheckboxChanged_Event

Latest Aix updated in first post.

1 Like
62

I have got a list of names. I have managed to get the amount of checked items. How can I transfer the checked names (blurred) to another screen?

Screenshot
Screenshot921×1693 57 KB

63

I have updated OnCheckboxChanged event and merged this request in v8.

Now you can use this event to get checked titles and pass them to another screen with start value.

1 Like
64

Thank you. I updated the listviewer version to v8 and that is what I was looking for.

1 Like
65

v8.1 Updated

As per request from user

  1. Added a property to set the image circular with border width and color.
  2. Fixed a bug where touch feedback was overlapping the list item contents.
1 Like