B4A Library [B4X] [XUI] AS SelectionList - Single or multiple selection

This view makes it easy to quickly provide a good looking single or multiple selection list.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee.



Examples
Simple Example:
    For i = 0 To 80 -1
        AS_SelectionList1.AddItem("Test " & (i+1),Null,i)
    Next
Search
There is a built-in search that makes it easy to search for something while maintaining the selection.
Search by text:
AS_SelectionList1.SearchByText("Test")
Search with the value that was passed in the “Value” parameter when the item was added
Search by value:
AS_SelectionList1.SearchByValue(3)
Theming
B4X:
    AS_SelectionList1.Theme = AS_SelectionList1.Theme_Light
    AS_SelectionList1.Theme = AS_SelectionList1.Theme_Dark
Get Selection
B4X:
Private Sub AS_SelectionList1_SelectionChanged
 
    For Each Item As AS_SelectionList_Item In AS_SelectionList1.GetSelections
        Log("Item selected: " & Item.Text)
    Next

End Sub
SubItems
B4X:
    Dim RootItem2 As AS_SelectionList_Item = AS_SelectionList1.AddItem("Car", AS_SelectionList1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White), "Car")
    AS_SelectionList1.AddSubItem(RootItem2, "Steering Wheel", AS_SelectionList1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White), "Steeringwheel")
    AS_SelectionList1.AddSubItem(RootItem2, "Air Conditioning", AS_SelectionList1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White), "Climate")
    AS_SelectionList1.AddSubItem(RootItem2, "Rearview Mirror", AS_SelectionList1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White), "BackMirror")
    AS_SelectionList1.AddSubItem(RootItem2, "Side Mirror", AS_SelectionList1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White), "SideMirror")

BottomSelectionList


AS_SelectionList
Author: Alexander Stolte
Version: 2.00
  • AS_SelectionList
    • Events:
      • SelectionChanged
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddItem (Text As String, Icon As B4XBitmap, Value As Object) As AS_SelectionList_Item
      • AddSubItem (RootItem As AS_SelectionList_Item, Text As String, Icon As B4XBitmap, Value As Object) As AS_SelectionList_SubItem
      • Base_Resize (Width As Double, Height As Double)
      • Clear
      • ClearSearch
      • ClearSelections
      • CloseSubMenu
      • CreateViewPerCode (Parent As B4XView, Left As Float, Top As Float, Width As Float, Height As Float)
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap
      • GetItems As List
        Get all items as list of AS_SelectionList_Item
      • GetSelections As List
        <code>
        For Each Item As Object In AS_SelectionList1.GetSelections
        Log("Item selected: " & Item.Text)
        Next
        </code>
      • Initialize (Callback As Object, EventName As String)
      • RebuildList
      • SearchByText (Text As String)
      • SearchByValue (Value As Object)
      • SetSelections (Values As Object)
        <code>AS_SelectionList1.SetSelections(Array As Object(1,3))</code>
      • SetSelections2 (Values As List)
        <code>
        Dim lst As List
        lst.Initialize
        lst.Add(1)
        lst.Add(3)
        AS_SelectionList1.SetSelections2(lst)
        </code>
    • Properties:
      • BackgroundColor As Int
      • CornerRadius As Float
      • HapticFeedback As Boolean
      • ItemProperties As AS_SelectionList_ItemProperties [read only]
        Height: Default: 50dip
      • MaxSelectionCount As Int
        Only in SelectionMode = Multi - Defines the maximum number of items that may be selected
        Default: 0
      • RootItemClickBehavior As String
        <code>AS_SelectionList1.RootItemClickBehavior = AS_SelectionList1.RootItemClickBehavior_CloseSubMenu</code>
      • RootItemClickBehavior_CloseSubMenu As String [read only]
      • RootItemClickBehavior_SelectAllSubItems As String [read only]
        Takes into account the SelectionMode and MaxSelectionCount
      • RootItemClickBehavior_SelectRootItem As String [read only]
      • SelectedItemProperties As AS_SelectionList_SelectedItemProperties [read only]
      • SelectedSubItemPropertiess As AS_SelectionList_SelectedSubItemProperties [read only]
      • SelectionMode As String
        Single or Multi
      • SelectionMode_Multi As String [read only]
      • SelectionMode_Single As String [read only]
      • SeperatorWidth_BeginWithIcon As String [read only]
      • SeperatorWidth_BeginWithText As String [read only]
      • SeperatorWidth_FullWidth As String [read only]
      • SideGap As Float
        Default: 10dip
      • Size As Int [read only]
      • SubItemProperties As AS_SelectionList_SubItemProperties [read only]
        Height: Default: 50dip
      • Theme As AS_SelectionList_Theme [write only]
      • Theme_Dark As AS_SelectionList_Theme [read only]
      • Theme_Light As AS_SelectionList_Theme [read only]
      • ThemeChangeTransition As String
        Fade or None
      • ThemeChangeTransition_Fade As String [read only]
      • ThemeChangeTransition_None As String [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFixes
    • Add get and set MaxSelectionCount - Only in SelectionMode = Multi - Defines the maximum number of items that may be selected
      • Default: 0
  • 1.02
    • Add Designer Property HapticFeedback
      • Default: True
    • BugFix on SearchByText - No longer takes capitalization into account
  • 1.03
    • BugFixes and Improvemets
    • Add Clear
    • Add RebuildList
    • Add CreateViewPerCode
    • Add "Height" to AS_SelectionList_ItemProperties Type
  • 1.04
    • BugFixes
  • 1.05
    • Add GetItems - Get all items as list of AS_SelectionList_Item
  • 1.06 (read more)
    • Add SetSelections2 - Set the Selections via a list
    • Add Type AS_SelectionList_SelectedItemProperties
      • Per Default the same settings as the AS_SelectionList_ItemProperties
    • Add get and set SideGap
      • Default: 10dip
    • Add Desginer Property SeperatorWidth
      • Default: BeginWithText
      • BeginWithText - The separator begins where the text begins
      • FullWidth - Full width
      • BeginWithIcon - The separator starts where the icon begins, if there is no icon, then where the text begins
  • 2.00 (read more)
    • BugFixes and Improvements
    • Add AddSubItem
    • Add Designer Property RootItemClickBehavior - What should happen if you click on the root item when the sub menu is open
      • Default: CloseSubMenu
    • Add Type AS_SelectionList_SubItem
    • Add Type AS_SelectionList_SubItemProperties
    • Add Type AS_SelectionList_SelectedSubItemProperties
    • Add get and set CornerRadius - First and Last Item corner radius
  • 2.01
    • Search BugFix
  • 2.02 (read more)
    • New SelectionIconAlignment - Alignment of the check icon of an item when it is selected
      • Default: Right
      • Left or Right
    • New Designer Property SelectionIconAlignment
      • Default: Right
    • New get and set ShowSeperators
Have Fun
 

Attachments

  • AS_SelectionList Example.zip
    178.9 KB · Views: 26
  • AS_SelectionList.b4xlib
    9.3 KB · Views: 8
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.01
    • BugFixes
    • Add get and set MaxSelectionCount - Only in SelectionMode = Multi - Defines the maximum number of items that may be selected
      • Default: 0
A question
please always open a new thread for such things, thank you
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.06
    • Add SetSelections2 - Set the Selections via a list
    • Add Type AS_SelectionList_SelectedItemProperties
      • Per Default the same settings as the AS_SelectionList_ItemProperties
    • Add get and set SideGap
      • Default: 10dip
    • Add Desginer Property SeperatorWidth
      • Default: BeginWithText
      • BeginWithText - The separator begins where the text begins
      • FullWidth - Full width
      • BeginWithIcon - The separator starts where the icon begins, if there is no icon, then where the text begins
SetSelections2
B4X:
    Dim lst As List
    lst.Initialize
    lst.Add(1)
    lst.Add(3)
    AS_SelectionList1.SetSelections2(lst)
SelectedItemProperties
B4X:
    AS_SelectionList1.SelectedItemProperties.xFont = xui.CreateDefaultBoldFont(24)
    AS_SelectionList1.SelectedItemProperties.BackgroundColor = xui.Color_Red

SideGap
The gap between the edge and the beginning of the list
B4X:
AS_SelectionList1.SideGap = 100dip
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 2.00
    • BugFixes and Improvements
    • Add AddSubItem
    • Add Designer Property RootItemClickBehavior - What should happen if you click on the root item when the sub menu is open
      • Default: CloseSubMenu
    • Add Type AS_SelectionList_SubItem
    • Add Type AS_SelectionList_SubItemProperties
    • Add Type AS_SelectionList_SelectedSubItemProperties
    • Add get and set CornerRadius - First and Last Item corner radius
AddSubItem
B4X:
    Dim NewRootItem As AS_SelectionList_Item = AS_SelectionList1.AddItem("New Test Root item",Null,"")
    AS_SelectionList1.AddSubItem(NewRootItem,"SubItem 1",Null,"")
    AS_SelectionList1.AddSubItem(NewRootItem,"SubItem 2",Null,"")
    AS_SelectionList1.AddSubItem(NewRootItem,"SubItem 3",Null,"")
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 2.02
    • New SelectionIconAlignment - Alignment of the check icon of an item when it is selected
      • Default: Right
      • Left or Right
    • New Designer Property SelectionIconAlignment
      • Default: Right
    • New get and set ShowSeperators
SelectionIconAlignment
You now have the option of displaying the check icon on the left as well

You can choose it in the designer or via code:
B4X:
AS_SelectionList1.SelectionIconAlignment = AS_SelectionList1.SelectionIconAlignment_Left

 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…