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

Alexander Stolte · Feb 10, 2021

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.

AS WheelPicker

This is a modern wheel picker, like the IOS-PickerView.https://www.b4x.com/android/forum/threads/b4x-xui-as-wheelpicker-spinner-a-modern-single-multiple-choice-picker-view-based-on-xcustomlistview-payware.127505/#content

payhip.com

Thanks for your understanding.

V3.00-Preview

B4I-Preview - looks nicer and smoother in real

B4I-Preview - the WheelPicker in the use in an app

B4A-Preview

NEW Seperators with text or without text

NEW Next- and Previous-Item - scrolls to the next or previous item animated and male rounded corners

Based on ASWheelPicker:

[B4X] AS WheelDateTimePicker - based on ASWheelPicker

This is a date and time picker in IOS picker design. This library is based on the ASWheelPicker, without it the library will not work. https://www.b4x.com/android/forum/threads/b4x-xui-as-wheelpicker-spinner-a-modern-single-multiple-choice-picker-view-based-on-xcustomlistview-payware.127505/...

www.b4x.com

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.~~ No longer needed V1.06+
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: 3.01

ASWheelPicker
- Events:
  - BaseResize (Width As Float)
  - ItemChange (Column As Int, ListIndex As Int)
  - 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:
  - AddItems (Items As List) As String
    Examples
    Normal Text Item
    <code>Dim tmp_lst As List : tmp_lst.Initialize
    For i = 0 To 50 -1
    tmp_lst.Add("Test " & i)
    Next
    ASWheelPicker1.AddItems(tmp_lst)</code>
    Item Object Example:
    <code> Dim Items As List : Items.Initialize
    For i = 0 To 50 -1
    Dim Item As ASWheelPicker_Item
    Item.Initialize
    Item.Text = "Test " & i
    Item.Value = i
    Items.Add(ASWheelPicker1.CreateASWheelPicker_Item("Test " & i,i))
    Next
    ASWheelPicker1.AddItems(Items)</code>
  - Base_Resize (Width As Double, Height As Double) As String
  - Class_Globals As String
  - CreateASWheelPicker_Item (Text As String, Value As Object) As ASWheelPicker_Item
  - 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
  - getEvents As Boolean
  - GetIndex (wheel_index As Int) As Int
    gets the selected index
  - getItemTextProperties As ASWheelPicker_ItemTextProperties
    gets or sets the global Item Text Properties
  - getNumberOfColumns As Int
    the number of wheels you have
  - getNumberOfSeperators As Int
    the number of seperators
  - GetSelectedItem (Column As Int) As ASWheelPicker_Item
    Returns a string with the item text of the selected index of a wheel
    <code>Log("Text: " & ASWheelPicker1.GetSelectedItem(0))</code>
  - getSelectorPanel As B4XView
  - getSeperatorProperties As ASWheelPicker_SeperatorProperties
    gets or sets the global Seperator Properties
  - 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 (Column As Int, Animated As Boolean)
    scrolls to the previous item, jump to the last item if the previous item is out of index
  - Refresh As String
  - RemoveColumn (Column As Int) As String
    removes a wheel
    <code>ASWheelPicker1.RemoveWheelAt(0)</code>
  - RemoveSeperatorAt (Column As Int) As String
    removes a seperator
    <code>ASWheelPicker1.RemoveSeperatorAt(0)</code>
  - SelectRow (Column As Int, Row As Int, Animated As Boolean)
    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
  - setEvents (Enabled As Boolean) As String
    Enables or disables the events
    Default: True
  - 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
  - SetItems (Column As Int, Items As List) As String
    Examples
    Normal Text Item
    <code>Dim tmp_lst As List : tmp_lst.Initialize
    For i = 0 To 50 -1
    tmp_lst.Add("Test " & i)
    Next
    ASWheelPicker1.SetItems(0,tmp_lst)</code>
    Item Object Example:
    <code> Dim Items As List : Items.Initialize
    For i = 0 To 50 -1
    Dim Item As ASWheelPicker_Item
    Item.Initialize
    Item.Text = "Test " & i
    Item.Value = i
    Items.Add(ASWheelPicker1.CreateASWheelPicker_Item("Test " & i,i))
    Next
    ASWheelPicker1.SetItems(0,Items)</code>
  - 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
  - SetSeperator (Column 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
  - SetWheelWidth (Column As Int, ColumnWidth As Float) As String
    Sets the width of an wheel
    Only working if you set the Width Mode to Manual
  - Size (wheel_index As Int) As Int
    gets size of a list
- 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
  - Events As Boolean
    Enables or disables the events
    Default: True
  - 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
  - NumberOfColumns As Int [read only]
    the number of wheels you have
  - NumberOfSeperators As Int [read only]
    the number of seperators
  - 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
  - SelectorPanel As B4XView [read only]
  - SeperatorProperties As ASWheelPicker_SeperatorProperties [read only]
    gets or sets the global Seperator Properties
  - TopFadePanel As B4XView [read only]
ASWheelPicker_Item
- Fields:
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - ItemTextProperties As ASWheelPicker_ItemTextProperties
  - Text As String
  - Value As Object
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASWheelPicker_ItemTextProperties
- Fields:
  - BackgroundColor As Int
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - Left As Float
  - TextAlignment_Horizontal As String
  - TextAlignment_Vertical As String
  - TextColor As Int
  - TextFont As B4XFont
  - Width As Float
- 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
- 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
2.03
- Add Event BaseResize - Triggers as soon as the width in the view has changed
- Add Event ItemChange - Triggers when an item reaches the center while scrolling, so you can display the results e.g. in a label instant
- B4I Item snap is now smooth
2.04 (read more)
- Complete rework of the wheel sizing
- Add Designer Property WidthMode - Default: Automatic
  - Automatic - You don't have to worry about anything, the view calculates the right size for all wheels
  - Manual - Set the wheel sizes you need via "SetWheelWidth"
- Add WheelWidth to ItemTextProperties - This allows you to set the width of a wheel manually, only working if WidthMode = Manual - Default: 0
- Add SetWheelWidth - Sets the width of an wheel, only working if WidthMode = Manual
- Add get and set Events - Enables or disables the events
- Haptic feedback disabled if you call Scroll2Index
- BugFixes
2.06
- BugFixes
- GestureRecognizer is now inside the B4XLib
3.00
- Complete rewrite of the view
- Designer properties now have all default values
  - If you add the view by code, you have less to consider
- The lists now use LazyLoading
- Breaking Changes on properties and functions
3.01
- Add GetItem
3.02
- Add GetSeperator
3.03
- BugFixes
- Add AddItemAt
- Add RemoveItemAt
- Add GetListView - gets the xCustomListView for a column
3.04 (read more)
- Add Event CustomDrawItemChange
3.05
- BugFixes
3.06
- BugFixes
3.07
- BugFixes
3.08
- BugFixes B4I
3.09
- GestureRecongnizer intern renamings
3.10
- BugFix - in function GetItem
3.11 (read more)
- Add Designer Property TextColor
- Add Designer Property SelectionBarStyle
  - Default: Rounded
3.12
- Add SelectRow2 - Select a row with the Value, no index needed, just the value
- BugFixes
3.13
- If the FadeColor is Transparent, then no fade will be displayed now
3.14
- BugFixes
3.15 (read more)
- Add EnabledRow - Disable a specific row. When the user goes on it, he is automatically brought back to an item that is active. Events are not triggered when a row is disabled
- Add Designer Property DisabledTextColor
3.16
- Add get and set BorderWidth
- Add get and set BorderColor
3.17
- B4A Border BugFix
3.18
- B4A Border BugFix
3.19
- Add RefreshCustomDraw - Triggers the CustomDrawEvent
  - Dont forget a Sleep(0) before you call this function
3.20
- BugFixes
3.21
- Add Event CustomDrawItem
- Fade Effect BugFixes
3.22
- Important B4I BugFix
3.23
- Add Clear - Clears a column
  - SetItems already clears the list if you set a new list

Have Fun

AS WheelPicker

This is a modern wheel picker, like the IOS-PickerView.https://www.b4x.com/android/forum/threads/b4x-xui-as-wheelpicker-spinner-a-modern-single-multiple-choice-picker-view-based-on-xcustomlistview-payware.127505/#content

payhip.com

Alexander Stolte · Oct 27, 2023

marcick said:
sorry, it doesn't work

sorry, I can't recreate it in B4A.
The following things could be the solution:
-Check in the library tab in your project if the ASWheelPicker has the version 3.17
-ASWheelPicker1.BorderWidth=3dip add a "dip" to the 3

If that doesn't work, please send me an example project that shows the error. Thanks a lot

marcick · Oct 27, 2023

here it is.
(II don't know how the border will look, but also corneradius seems it is missing)

Alexander Stolte · Oct 27, 2023

Update

3.18
- B4A Border BugFix

marcick said:
here it is.
(II don't know how the border will look, but also corneradius seems it is missing)

Thanks, the problem was the fade panels. Since I find the fade effect ugly, I always have it transparent, so I haven't seen the problem.

marcick · Oct 27, 2023

Now it's ok, thank you. To be honest I had the fading effect without understand well what it is .... I have disabled it now.
It looks now identical to IOS.

Alexander Stolte · Nov 26, 2023

Update

3.19
- Add RefreshCustomDraw - Triggers the CustomDrawEvent
  - Dont forget a Sleep(0) before you call this function

Alexander Stolte · Dec 3, 2023

Update

3.20
- BugFixes
3.21
- Add Event CustomDrawItem
- Fade Effect BugFixes

CustomDrawItem
you can now do something like this:

It's just one column and 2 extra labels

[B4X] [XUI] AS BottomPhoneNumberFlagPicker

A bottom phone number prefix, flag emoji, country code picker. You need: AS_DraggableBottomCard AS_WheelPicker V3.21+ 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...

www.b4x.com

Alexander Stolte · Dec 30, 2023

Update

3.22
- Important B4I BugFix

Aldo's · Jan 15, 2024

Great job.
Thanks.
if I wanted to clean a As WheelPicker how do I do it?

Alexander Stolte · Jan 15, 2024

Update

3.23
- Add Clear - Clears a column
  - SetItems already clears the list if you set a new list

Aldo's said:
Great job.

Thanks

Aldo's said:
if I wanted to clean a As WheelPicker how do I do it?

You can simply use SetItems with a new list, the WheelPicker automatically empties the list beforehand. Or you can use the new "clear" function. Note, however, that the view crashes if the user scrolls an empty list. So if the list remains empty, remove the column instead of just clearing it.

Aldo's · Jan 16, 2024

HI
I would like to change the font of my AS WheelPicker and I wrote this code:

B4X:

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    Dim asTmp(3) As String
    asTmp(0)="Ruota intervalli"
    asTmp(1)="Traspositore"
    asTmp(2)="Intonazione voci coro"
    Dim tmp_lst As List : tmp_lst.Initialize
    tmp_lst.AddAll(asTmp)   
    pckMenu.SetItems(0,tmp_lst)
    pckMenu.ItemTextProperties.TextFont=xui.CreateDefaultBoldFont(20)
    pckMenu.Refresh
End Sub

but my font remains the default without changing the size and regular and not bold.
What am I doing wrong?

Alexander Stolte · Jan 16, 2024

Aldo's said:
but my font remains the default without changing the size and regular and not bold.
What am I doing wrong?

If you hover over "ItemTextProperties" property with the mouse, the IDE will show you the comments that I have stored and example code if you have to comply with or observe something special.

In your case, this must be done as follows:

B4X:

Dim ItemTextProperties As ASWheelPicker_ItemTextProperties = ASWheelPicker1.ItemTextProperties
ItemTextProperties.TextFont=xui.CreateDefaultBoldFont(20)
ASWheelPicker1.ItemTextProperties = ItemTextProperties

Alex

Aldo's · Jan 16, 2024

Alexander Stolte said:
If you hover over "ItemTextProperties" property with the mouse, the IDE will show you the comments that I have stored and example code if you have to comply with or observe something special.

In your case, this must be done as follows:

B4X:

Dim ItemTextProperties As ASWheelPicker_ItemTextProperties = ASWheelPicker1.ItemTextProperties ItemTextProperties.TextFont=xui.CreateDefaultBoldFont(20) ASWheelPicker1.ItemTextProperties = ItemTextProperties

Alex

It works perfectly.
Thank you

Aldo's · Jan 16, 2024

Is it possible to create a WheelPicker that puts the first element after the last element in order to create an endless picker?

Alexander Stolte · Jan 16, 2024

Aldo's said:
Is it possible to create a WheelPicker that puts the first element after the last element in order to create an endless picker?

No, sorry.
A solution that I have already seen in a few ios apps is. e.g. Time Picker: simply add the interval 0-23 several times, this creates the illusion for the user that it is "endless". I don't think a user would search for the value "1" more than 20 times.

Aldo's · Jan 16, 2024

Alexander Stolte said:
No, sorry.
A solution that I have already seen in a few ios apps is. e.g. Time Picker: simply add the interval 0-23 several times, this creates the illusion for the user that it is "endless". I don't think a user would search for the value "1" more than 20 times.

Ok, thanks

Alexander Stolte · Jan 16, 2024

The problem is that it would be possible if the user always scrolls the list slowly. But as soon as the user scrolls quickly, unexpected behavior on the part of the list cannot be avoided. I had to struggle with this for ages with the AS_Scheduler and even now it is still not 100% perfect.

Aldo's · Jan 18, 2024

I would like to use MaterialIcons for the separator. I wrote this code, but it doesn't insert any comments.

B4X:

    Dim ItemTextProperties As ASWheelPicker_ItemTextProperties = pckNote.ItemTextProperties
    ItemTextProperties.TextFont=xui.CreateDefaultBoldFont(16)
    pckNote.ItemTextProperties = ItemTextProperties
    Dim tmp_lst As List : tmp_lst.Initialize
    tmp_lst.AddAll(asNote)
    pckNote.SetItems(0,tmp_lst)

    Dim SepTextProp As ASWheelPicker_SeperatorProperties = pckNote.SeperatorProperties
    SepTextProp.TextFont=xui.CreateMaterialIcons(16)
    pckNote.SeperatorProperties = SepTextProp
    pckNote.SetSeperator(0,40dip,Chr(0xe5c8))
    
    pckNote.SetItems(1,tmp_lst)
    pckNote.Refresh

What am I doing wrong?

Alexander Stolte · Jan 18, 2024

Aldo's said:
What am I doing wrong?

You're not doing anything wrong. You can test the whole thing by using a label. Set the font of the label to "MaterialIcon" and then add a text + an icon. You will see that only the initial letter and the icon are visible. Since I am using a label, there is nothing I can do if this is the behavior of the native B4A label.

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

Attachments

Expert

Well-Known Member

Attachments

Expert

Well-Known Member

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency