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: 150
Last edited:

jboavida

Member
Licensed User
Hello,
I have a compiler problem. I use android Phone V10. And B4A 11.0. I'm using the example provided
Please help. Thanks
1630044710395.png


Joaquim
 

jboavida

Member
Licensed User
Hi, Can you share a more complete example please? I want to to integrate the picker on my app. From the example source code is not easy...
Sorry i'm not very experienced. My application does not use b4xmainpage and compiles well. I just want to to add a number picker.
Thanks
 

jboavida

Member
Licensed User
Hi,
It is working. But I have now another problem. I want to add 4 different pickers with 4 numbers each. I have created the pickers also in the designer (exact copy) and every one of them work fine except for the font size and separator... font is ok on picker 1 and 3 and separator is ok on picker 2 and 4..
What i'm doing wrong?

Thanks and sorry for all the questions.

1630142076317.jpeg

B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private ASWheelPicker1 As ASWheelPicker
    Private ASWheelPicker2 As ASWheelPicker   
    Private ASWheelPicker3 As ASWheelPicker
    Private ASWheelPicker4 As ASWheelPicker

End Sub

Public Sub Initialize
    
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("frm_main")
    B4XPages.SetTitle(Me,"Pa_Price")
    
    'ASWheelPicker1.CornerRadius = 20dip'can be set in the designer
    
    
    
    
    ASWheelPicker1.RowHeightSelected = 70dip
    ASWheelPicker1.RowHeightUnSelected = 60dip
    
    ASWheelPicker2.RowHeightSelected = 70dip
    ASWheelPicker2.RowHeightUnSelected = 60dip
    
    ASWheelPicker3.RowHeightSelected = 70dip
    ASWheelPicker3.RowHeightUnSelected = 60dip
    
    ASWheelPicker4.RowHeightSelected = 70dip
    ASWheelPicker4.RowHeightUnSelected = 60dip
    

    ASWheelPicker1.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the items bold
    ASWheelPicker2.SeperatorProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the seperator text bold
    ASWheelPicker3.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the items bold
    ASWheelPicker4.SeperatorProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the seperator text bold
    
    ASWheelPicker1.FadeColor = xui.Color_Transparent 'no fade color effect
    'set the same color as the view so that the upper and lower numbers are not visible and there is a slide in effect
    ASWheelPicker1.TopFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)
    ASWheelPicker1.BottomFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)

    ASWheelPicker2.FadeColor = xui.Color_Transparent 'no fade color effect
    'set the same color as the view so that the upper and lower numbers are not visible and there is a slide in effect
    ASWheelPicker2.TopFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)
    ASWheelPicker2.BottomFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)

    ASWheelPicker3.FadeColor = xui.Color_Transparent 'no fade color effect
    'set the same color as the view so that the upper and lower numbers are not visible and there is a slide in effect
    ASWheelPicker3.TopFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)
    ASWheelPicker3.BottomFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)

    ASWheelPicker4.FadeColor = xui.Color_Transparent 'no fade color effect
    'set the same color as the view so that the upper and lower numbers are not visible and there is a slide in effect
    ASWheelPicker4.TopFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)
    ASWheelPicker4.BottomFadePanel.Color = xui.Color_ARGB(255,60, 64, 67)



    
    'Add the numbers to wheel 1
    Dim tmp_lst As List : tmp_lst.Initialize
    For i = 0 To 9
        tmp_lst.Add(i)
    Next
    ASWheelPicker1.AddWheel(tmp_lst)
    ASWheelPicker1.AddWheel(tmp_lst)
    ASWheelPicker1.AddWheel(tmp_lst)
    ASWheelPicker1.AddWheel(tmp_lst)
    ASWheelPicker1.SeperatorProperties.BackgroundColor = xui.Color_ARGB(255,60, 64, 67)'sets the seperator backgroundcolor matched to the view background color
    ASWheelPicker1.AddSeperator(0,15dip,".")'adds the seperator
    
    ASWheelPicker2.AddWheel(tmp_lst)
    ASWheelPicker2.AddWheel(tmp_lst)
    ASWheelPicker2.AddWheel(tmp_lst)
    ASWheelPicker2.AddWheel(tmp_lst)
    ASWheelPicker2.SeperatorProperties.BackgroundColor = xui.Color_ARGB(255,60, 64, 67)'sets the seperator backgroundcolor matched to the view background color
    ASWheelPicker2.AddSeperator(0,15dip,".")'adds the seperator

    ASWheelPicker3.AddWheel(tmp_lst)
    ASWheelPicker3.AddWheel(tmp_lst)
    ASWheelPicker3.AddWheel(tmp_lst)
    ASWheelPicker3.AddWheel(tmp_lst)
    ASWheelPicker3.SeperatorProperties.BackgroundColor = xui.Color_ARGB(255,60, 64, 67)'sets the seperator backgroundcolor matched to the view background color
    ASWheelPicker3.AddSeperator(0,15dip,".")'adds the seperator

    ASWheelPicker4.AddWheel(tmp_lst)
    ASWheelPicker4.AddWheel(tmp_lst)
    ASWheelPicker4.AddWheel(tmp_lst)
    ASWheelPicker4.AddWheel(tmp_lst)
    ASWheelPicker4.SeperatorProperties.BackgroundColor = xui.Color_ARGB(255,60, 64, 67)'sets the seperator backgroundcolor matched to the view background color
    ASWheelPicker4.AddSeperator(0,15dip,".")'adds the seperator
    
End Sub


Private Sub B4XSwitch1_ValueChanged (Value As Boolean)
    If Value Then
        ASWheelPicker1.SelectionBarColor = xui.Color_Transparent
        ASWheelPicker2.SelectionBarColor = xui.Color_Transparent
        ASWheelPicker3.SelectionBarColor = xui.Color_Transparent
        ASWheelPicker4.SelectionBarColor = xui.Color_Transparent
    Else
        ASWheelPicker1.SelectionBarColor = xui.Color_White
        ASWheelPicker2.SelectionBarColor = xui.Color_White
        ASWheelPicker3.SelectionBarColor = xui.Color_White
        ASWheelPicker4.SelectionBarColor = xui.Color_White
    End If
End Sub

Private Sub ASWheelPicker1_ItemSnapped(wheel_index As Int,list_index As Int)
    Log("Index: " & list_index)
End Sub

Private Sub ASWheelPicker2_ItemSnapped(wheel_index As Int,list_index As Int)
    Log("Index: " & list_index)
End Sub

Private Sub ASWheelPicker3_ItemSnapped(wheel_index As Int,list_index As Int)
    Log("Index: " & list_index)
End Sub

Private Sub ASWheelPicker4_ItemSnapped(wheel_index As Int,list_index As Int)
    Log("Index: " & list_index)
End Sub
 

Alexander Stolte

Expert
Licensed User
What i'm doing wrong?
B4X:
    ASWheelPicker1.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the items bold
    ASWheelPicker2.SeperatorProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the seperator text bold
    ASWheelPicker3.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the items bold
    ASWheelPicker4.SeperatorProperties.TextFont = xui.CreateDefaultBoldFont(50) 'makes the seperator text bold
Because you are changing only for Picker 1 and 3 the ItemTextProperties for the other 2 you are only changing the SeperatorProperties.
 

jboavida

Member
Licensed User
Hi All,
It's me again....
Code is almost done and working ok. I'm in the final tests in several different devices.
It works ok in Android 10 devices, but in one device with android 8.1 it fails.

1630319538764.png


The program crashes at line 178
1630319755024.png


it only happens with the device using android 8.1

Thanks
 

Attachments

  • 1630319688346.png
    1630319688346.png
    26.8 KB · Views: 20

Lello1964

Well-Known Member
Licensed User
I'm trying to use AsWheelPicker in B4J and i wanna use it with next and previous item with arrows. I put all dependencies but it doesn't work.
Could you help me please, can tell ma a sample with up and down ?
 

Alexander Stolte

Expert
Licensed User
Could you help me please, can tell ma a sample with up and down ?
 
Top