B4A Library [B4X] [XUI] AS WheelPicker - Spinner - a modern single/multiple choice picker view - based on xCustomListView

Hello,
this is a modern wheel picker, like the IOS-PickerView.
WheelPicker/Spinner

This library is not free, because, it cost a lot of time and gray hair to create such views.
Donations from 5€ or 6$ are valid. (You can donate any amount you want :))
Please write WheelPicker in the order description, thanks.

Thanks for your understanding. :)
  1. Donate
  2. I will send you an e-mail with the code to decrypt the .zip file
  3. Done
B4J-Preview
b4j preview.JPG

B4I-Preview - looks nicer and smoother in real
dffdf.gif

B4I-Preview - the WheelPicker in the use in an app
fddsfdsf.gif
IMG_2299.jpg

B4A-Preview
21-02-06-03-05-39.gif

NEW Seperators with text or without text
IMG_3504.jpg
IMG_3389.jpg

NEW Next- and Previous-Item - scrolls to the next or previous item animated and male rounded corners
ezgif.com-gif-maker.gif

B4j: jXUI,jBitmapCreator,jReflection,xCustomListView,XUI Views
B4a: XUi,BitmapCreator,Reflection,xCustomListView,XUI Views
B4i: iXUI,iBitmapCreator,xCustomListView,XUI Views
On B4I you need the GestureRecognizer or download a version without errors down below.
Examples:
Add 2 Wheels with a list of maps:
Dim tmp_lst As List : tmp_lst.Initialize 'Create and Initialize the list
    'Fill the list with dummy items
    For i = 0 To 50 -1
    'text - the text to display in the wheel
    'value - any value you want to identify the text E.g. a id
    tmp_lst.Add(CreateMap("text":"Test " & i,"value":i))
Next
ASWheelPicker1.AddWheelAdvanced(tmp_lst)'adds the list to the view and adds a wheel
Get the Selected Items:
'gets the item of the first wheel
'use this function when you have added the wheel with AddWheelAdvanced
Dim tmp_m As Map = ASWheelPicker1.GetSelectedItemAdvanced(0)
Log("Text: " & tmp_m.Get("text"))
Log("Value: " & tmp_m.Get("value"))

'use this function when you have added the wheel with AddWheel
Log("Text: " & ASWheelPicker1.GetSelectedItem(0))
ASWheelPicker
Author: Alexander Stolte
Version: 2.00

  • ASWheelPicker
    • Events:
      • ItemSnapped (wheel_index As Int, list_index As Int)
      • WheelReachEnd (wheel_index As Int)
    • Fields:
      • InactiveDuration As Int
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddSeperator (wheel_index As Int, width As Float, text As String) As String
        wheel_index - after wich wheel do you want to show the seperator - set it to -1 to place it before the first wheel
        width - the width of the seperator
        text - if you want text, then set the text here
      • AddWheel (lst_text As List) As String
        Add a wheel with a list of text
        Full Example
        <code>Dim tmp_lst As List : tmp_lst.Initialize
        For i = 0 To 50 -1
        tmp_lst.Add("Test " & i)
        Next
        ASWheelPicker1.AddWheel(tmp_lst)</code>
      • AddWheelAdvanced (lst_text_map As List) As String
        Add a wheel with a list of maps with the content
        Required map:
        <code>CreateMap("text":"YourText","value":1)</code>
        text - a string
        value - a object, you can store whatever you want
        Full Example:
        <code>Dim tmp_lst As List : tmp_lst.Initialize
        For i = 0 To 50 -1
        tmp_lst.Add(CreateMap("text":"Test " & i,"value":i))
        Next
        ASWheelPicker1.AddWheelAdvanced(tmp_lst)</code>
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • CreateASWheelPicker_ItemTextProperties (TextColor As Int, TextFont As B4XFont, TextAlignment_Vertical As String, TextAlignment_Horizontal As String, BackgroundColor As Int) As ASWheelPicker_ItemTextProperties
      • CreateASWheelPicker_SeperatorProperties (Width As Float, BackgroundColor As Int, TextColor As Int, TextFont As B4XFont, TextAlignment_Horizontal As String, index As Int) As ASWheelPicker_SeperatorProperties
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBase As B4XView
        gets the base view (mBase)
      • getBottomFadePanel As B4XView
      • GetIndex (wheel_index As Int) As Int
        gets the selected index
      • getItemTextProperties As ASWheelPicker_ItemTextProperties
        gets or sets the global Item Text Properties
      • getNumberOfLists As Int
        the number of lists you have added via AddWheel
      • GetSelectedItem (wheel_index As Int) As String
        Returns a string with the item text of the selected index of a wheel
        <code>Log("Text: " & ASWheelPicker1.GetSelectedItem(0))</code>
      • GetSelectedItemAdvanced (wheel_index As Int) As Map
        Returns a map with the item of the selected index of a wheel
        <code>Dim tmp_m as Map = ASWheelPicker1.GetSelectedItemAdvanced(0)
        Log("Text: " & tmp_m.Get("text"))
        Log("Value: " & tmp_m.Get("value"))</code>
      • getSeperatorProperties As ASWheelPicker_SeperatorProperties
        gets or sets the global Seperator Properties
      • GetTextAt (wheel_index As Int, lst_index As Int) As String
        Get the text from a specific index
        wheel_index - the index from the order where you added AddWheel
        lst_index - the position in the list you want to have
      • getTopFadePanel As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextItem (wheel_index As Int, animated As Boolean)
        scrolls to the next item, jump to the first item if the next item is out of index
      • PreviousItem (wheel_index As Int, animated As Boolean)
        scrolls to the previous item, jump to the last item if the previous item is out of index
      • RemoveSeperatorAt (index As Int) As String
        removes a seperator
        <code>ASWheelPicker1.RemoveSeperatorAt(0)</code>
      • RemoveWheelAt (wheel_index As Int) As String
        removes a wheel
        <code>ASWheelPicker1.RemoveWheelAt(0)</code>
      • Scroll2Index (wheel_index As Int, item_index As Int)
        scrolls to an item on a wheel
      • setBackgroundColor (clr As Int) As String
        sets the background color
      • setCornerRadius (radius As Int) As String
        sets the corner radius of the view
      • setFadeColor (clr As Int) As String
      • setFadeEnabled (enable As Boolean) As String
        set it to false to disable the fade effect on top and bottom
      • setHapticFeedback (enabled As Boolean) As String
      • setHapticFeedbackOnSnapIn (enabled As Boolean) As String
      • SetList (wheel_index As Int, lst As List) As String
        set a list and the ScrollView is updated
        wheel_index - the index of the wheel you want, to have in the order you added the wheels
      • SetListAdvanced (wheel_index As Int, lst_text_map As List) As String
        set a list of map and the ScrollView is updated
        wheel_index - the index of the wheel you want, to have in the order you added the wheels
      • setRowHeightSelected (height As Float) As String
        sets the Selected RowHeight default is 30dip - and changes the wheel items height + selector
      • setRowHeightUnSelected (height As Float) As String
        sets the Unselected RowHeight default is 30dip - and changes the wheel items height
      • setSelectionBarColor (clr As Int) As String
      • Size (wheel_index As Int) As Int
        gets size of a list
      • UpdateStyleOfAllWheels As String
        update the style of all wheels - changes the style to the properties of this: ItemTextProperties
        <code>ASWheelPicker1.UpdateStyleOfAllWheels</code>
      • UpdateStyleOfWheel (wheel_index As Int) As String
        update the style of a particular wheel - changes the style to the properties of this: ItemTextProperties
        <code>ASWheelPicker1.UpdateStyleOfWheel(0)</code>
    • Properties:
      • BackgroundColor
        sets the background color
      • Base As B4XView [read only]
        gets the base view (mBase)
      • BottomFadePanel As B4XView [read only]
      • CornerRadius
        sets the corner radius of the view
      • FadeColor
      • FadeEnabled
        set it to false to disable the fade effect on top and bottom
      • HapticFeedback
      • HapticFeedbackOnSnapIn
      • ItemTextProperties As ASWheelPicker_ItemTextProperties [read only]
        gets or sets the global Item Text Properties
      • NumberOfLists As Int [read only]
        the number of lists you have added via AddWheel
      • RowHeightSelected
        sets the Selected RowHeight default is 30dip - and changes the wheel items height + selector
      • RowHeightUnSelected
        sets the Unselected RowHeight default is 30dip - and changes the wheel items height
      • SelectionBarColor
      • SeperatorProperties As ASWheelPicker_SeperatorProperties [read only]
        gets or sets the global Seperator Properties
      • TopFadePanel As B4XView [read only]
  • ASWheelPicker_ItemTextProperties
    • Fields:
      • BackgroundColor As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextAlignment_Horizontal As String
      • TextAlignment_Vertical As String
      • TextColor As Int
      • TextFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASWheelPicker_SeperatorProperties
    • Fields:
      • BackgroundColor As Int
      • index As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextAlignment_Horizontal As String
      • TextColor As Int
      • TextFont As B4XFont
      • Width As Float
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • Adds the Type ASWheelPicker_ItemTextProperties - hold the style propterties for the wheel text
      • Adds get ItemTextProperties - change the properties before you add a new wheel
    • Adds set RowHeight - changes the row height of the items and the selector
    • Adds UpdateStyleOfWheel - update the style of a particular wheel - changes the style to the properties of this: ItemTextProperties
    • Adds UpdateStyleOfAllWheels - update the style of all wheels - changes the style to the properties of this: ItemTextProperties
    • Adds RemoveWheelAt - removes a wheel
  • 1.02
    • Adds FadeEnabled - set it to false to disable the fade effect on top and bottom
    • Adds RowHeightSelected - sets the Selected RowHeight default is 30dip - and changes the wheel items height + selector
    • Adds RowHeightUnSelected - sets the Unselected RowHeight default is 30dip - and changes the wheel items height
    • Removed RowHeight - use RowHeightSelected and RowHeightUnSelected
  • 1.03
    • Add get Base - gets the base view (mBase)
    • Add Scroll2Index - scrolls to an item on a wheel
    • Add get Index - gets the selected index
  • 1.04
    • Add Size - gets size of a list
    • the index of a list now starts at 0
  • 1.05
    • Add AddSeperator - adds an seperator after a wheel. IF you want a placeholder before the first wheel, then set the index to -1
      • seperators can display text
      • seperators can be customized
    • Add RemoveSeperatorAt - removes a seperator
  • 2.00
    • Better Handling if you set an invalid wheel_index as parameter to the functions
    • Add get TopFadePanel
    • Add get BottomFadePanel
    • Fade Panels are now above and under the selector panel
    • Add Next - scrolls to the next item, jump to the last item if the next item is out of index
      • ezgif.com-gif-maker.gif
    • Add Previous - scrolls to the previous item, jump to the last item if the previous item is out of index
    • Add set CornerRadius - sets the corner radius of the view
      • Add Designer Property CornerRadius
    • SnapIn Improved - Immediately snaps into place without moving again
    • BugFixes
    • new depency: XUIViews, is needed for the HapticFeedback
  • 2.01
    • Add get NumberOfSeperators - the number of seperators
    • BugFix View Resizing
Have Fun :)
 

Attachments

  • AS WheelPicker Example.zip
    178.1 KB · Views: 146
  • Backup 1.05 ASWheelPicker.zip
    6.6 KB · Views: 113
  • GestureRecognizer.bas
    11.2 KB · Views: 50
  • ASWheelPicker.zip
    7.5 KB · Views: 148
Last edited:

angel_

Well-Known Member
Licensed User
Thank you, it works well

ItemIndex is base 1, return GetIndex is base 1 too, wouldn't base 0 be better like list, spinner, etc.?

I think in the code it was not removed log("Base_Resize")
 

Alexander Stolte

Expert
Licensed User
Update
1.05

  • Add AddSeperator - adds an seperator after a wheel. IF you want a placeholder before the first wheel, then set the index to -1
    • seperators can display text
    • seperators can be customized
  • Add RemoveSeperatorAt - removes a seperator
Now you can add seperators, to have more space between the items, or to display a static text.
Examples:
IMG_3504.jpg

here I needed a colon between the two wheels to show that you can select a time there
IMG_3389.jpg

Seperators can be customized.
customize seperator and add:
ASWheelPicker1.SeperatorProperties.BackgroundColor = xui.Color_Blue 'sets the background color of the seperator
ASWheelPicker1.SeperatorProperties.TextAlignment_Horizontal = "LEFT" 'sets the displayed text to left
ASWheelPicker1.SeperatorProperties.TextFont = xui.CreateDefaultBoldFont(15) 'changed the font from the text
ASWheelPicker1.AddSeperator(2,120dip," minutes") 'adds an seperator with text
 

Israel Gallegos

Member
Licensed User
Hi,can you help me please, I am trying to build the example project but it shows the following error:

Captura de Pantalla 2021-04-07 a la(s) 11.53.31.png


I copied the library to my folder and included it in the example project,
also i checked the others libraries

Captura de Pantalla 2021-04-07 a la(s) 11.53.10.png
 
Last edited:

Alexander Stolte

Expert
Licensed User
you need this:
 

Israel Gallegos

Member
Licensed User
you need this:


Excellent, Thanks!! The project build perfect, but when the app executes shows the follow, some idea?:
Captura de Pantalla 2021-04-07 a la(s) 12.47.41.png

Captura de Pantalla 2021-04-07 a la(s) 12.48.32.png
 
Top