Custom ListView

This extension allow you to create a custom list view with an Image, Title , Subtitle and a secondary text elements. It comes with a lot of features such as Drag and Drop and Swipe item with both sides. You can use extension to load images. You can customize the list view with designer properties.",


Thanks @Henry for sponsoring the extension.

Released on : 15 Jun 2021

Last Updated on : 15 Jun 2021

Latest Version : 15 Jun 2021

All Blocks
image image image image image image image image image
Documentation
component_event (1)

This event raises when any item clicked with position of the clicked item.

component_event (2)

This event raises when any item long clicked with position of the clicked item.

component_event (3)

This event raises when your item's image need to be loaded. You can use Image Utility component to load the image or some extension(not all).

component_event (4)

This event raises when item's images is clicked with the position of the clicked image.

component_event (5)

This event raises when item's image is long clicked with the position of the clicked image.

component_event (6)

As I said the list view have drag and drop feature. This event raises when an item is dragged to another place. It gives you two parameter fromPosition is the position from where the item has been dragged or toPosition where the item has been dragged(new position). You would need to enable the Draggable property for making able to drag your views.

component_event (7)

This event raises when the item is swiped to left side. It will give you the position of the item in parameter. You will need to enable the LeftSwipeAble property otherwise item would not be able to swiped.

component_event (8)

This event raises when the item is swiped to right side. It will give you the position of the item in parameter. You will need to enable the RightSwipeAble property otherwise item would not be able to swiped.

component_method (6)

This block create the list view to given container. If the list view is already added to any container then nothing will happen.

component_method (7)

This block add an item to the list view with title,subtitle, image and secondary text. They can be nullable.

component_method (8)

This block do the same above job but it add the item at given position.

image

These block can be used to update the item with position.

component_method (10)

This block move the item to given position from given position. You will see an animation while item are switiching.

component_method (11)

This block removes the item from specific position. You will see here an animation too.

component_method (12)

This block removes all the items from list view.

image

These block are used to control scroll of list view.

image

These blocks helps you to get the item details from specific position.

image

Set the item's background color.

image

Set to true then item can be dragged. You need to control them by blocks then.

image

Set the size of item's image. Default is 60.

image

Set the icon that will be shown when the item is swiped to left direction.

image

Set the text that will be shown when the item is swiped to left direction.

image

If set to true then the list will be reversed.

image

Set the icon that will be shown when the item is swiped to right direction.

image

Set the background color that will be shown when the item is swiped to left direction.

image

If set to true then item would be able to swipe in right direction.

image

Set the background color that will be shown when the item is swiped to right direction.

image

Set the text that will be shown when the item is swiped to right direction.

image

Set the custom font typeface of the secondary text of an item.

image

Set the vertical alignment of the secondary text of items.

image

Set the secondary text color of items.

image

Set the font size of the secondary text of items.

image

If set to true then a divider will be shown between items.

image

Set the stroke property of the item's image view.

image

Set the subtitle property of the items

image

Set the custom font typeface of the label that will be shown when the view is swiped.

image

Set the text color of the labels that will be shown when the item is swiped.

image

Set the properties of the title of items.

How to Use

Let see quick usage so you can understand how to use it.

Adding an Item

blocks (19) ItemAdd

Updating an Item

blocks (20)

Moving an Item

blocks (21)
IMG_qhsr9o

Removing an Item

blocks (22)
Remove

Dragging an Item

Make sure to check the Draggable property

blocks (23)

Enable swiping of an Item

Make sure to check the following properties.

blocks (24)

For enabling the swipe in left direction.

blocks (25)

For enabling the swipe in right direction.

image
image

We have set the icon on both sides.

Swipe Actions

How will you move or remove item while swiping or dragging.

blocks (26)

When the item will swiped right, we will remove that item by position.

IMG_w94gnd

blocks (28)

When the item is dragged we will move the item from it's older place to it's new place.

IMG_akqwqj

Loading Images

We can load the image by picasso extension by @vknow360 and can use Image Utility component to load the images.

blocks (30)

However, if you uses picasso extension then you won't get rounded circle image.

Downloads

You can download this extension from AI2 Store.