B4A Library TablePanel - Adds swipe navigation to B4XTable

With TablePanel class, the user can switch pages by swiping right or left over the bottom of the table.

Usage:

Initialize TablePanel and load the layout to TablePanel instead of the activity:
B4X:
tp.Initialize(Me, "tp", Activity)
tp.base.LoadLayout("1")

Handle the swipe event:
B4X:
Sub tp_Swipe (DeltaX As Float, DeltaY As Float)
   If DeltaX < 0 And btnNext.Enabled Then btnNext_Click
   If DeltaX > 0 And btnPrev.Enabled Then btnPrev_Click
End Sub

Depends on ViewsEx v1.30+.
 

Attachments

  • TablePanel.zip
    60.7 KB · Views: 1,129

Mahares

Expert
Licensed User
Longtime User
For what it is worth, I have replaced this line in Tablepanel class module:
B4X:
If dx > 5dip And TouchYStart >  0.7 * base.Height
With the below line to have the full screen as a swipe area as opposed to only the bottom 30% of the screen:
B4X:
If dx > 5dip And TouchYStart >  0 Then  'you can swipe anywhwere on the screen
Is there a way to use the Activity.Title area for a swipe instead of the activity itself, in order to avoid clicking accidentally on a cell when trying to swipe?
Thank you
'
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
With the below line to have the full screen as a swipe area as opposed to only the bottom 30% of the screen:
The downside is that the user will not be able to horizontally scroll the columns.

in order to avoid clicking accidentally on a cell when trying to swipe?
You can reduce dx > 5dip to make it more sensitive. I don't see how you can detect swipes over the action bar, it will also be difficult for the user to do. It is more convenient to swipe over the bottom of the screen.
 

Alexis Martial

Member
Licensed User
The downside is that the user will not be able to horizontally scroll the columns.


You can reduce dx > 5dip to make it more sensitive. I don't see how you can detect swipes over the action bar, it will also be difficult for the user to do. It is more convenient to swipe over the bottom of the screen.

Works nice, thanks !

However, would be better if:
- the TouchPanelCreator cover exactly the BXTable except the header
- the TablePanel sized to the BXTable, so will not interact with other part of the layout

After I got my app in alpha version up and running I will try to work out something.

Thanks again.
 

Alain75

Member
I did some modifications in order to resize the overlay :
Resize function of the overlay:
Public Sub ResizeOverlay(Left As Int,Top As Int, Width As Int, Height As Int)
    base.GetView(0).Left = Left
    base.GetView(0).Top = Top
    base.GetView(0).Width = Width
    base.GetView(0).Height = Height
End Sub

I agree with @Mahares : swipe to the bottom is not easy to understand. I keep the right and left swipe to be able to swipe columns and I just modify the test in order to detect only up and down swipes to scroll the list more easily, without animation (as for the horizontal swipe of the B4XTable) :
Only vertical swipe:
Private Sub Base_OnInterceptTouchEvent (Action As Int, X As Float, Y As Float, MotionEvent As Object) As Boolean
    Select Action
        Case base.TOUCH_ACTION_DOWN
            TouchXStart = X
            TouchYStart = Y
            HandlingSwipe = False
        Case base.TOUCH_ACTION_MOVE
            Dim dx As Float = Abs(x - TouchXStart)
            Dim dy As Float = Abs(y - TouchYStart)
            If (dy > 10dip) And (dy > dx) And (TouchXStart > base.GetView(0).Top) Then
                HandlingSwipe     = True
                'overlay.Visible = True
            End If
            ...
 

Alain75

Member
Just a little correction but it is TouchYStart to check and not TouchXStart :
Correction on vertical swipe test:
If (dy > 10dip) And (dy > dx) And (TouchYStart > base.GetView(0).Top) Then
 
Top