B4A Library [B4X] [XUI] AS Stories

Library that shows a horizontal progress like Instagram stories. You can add your own layout like on the AS_ViewPager. The AS_Stories supports lazy loading too.

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. :)

This is the 1st version, it may contain bugs and errors.

AutoPlay = True | Default = False
ezgif.com-resize (3).gif

Tap to skip a page or hold, to hide infos from the layout
ezgif.com-resize (4).gif

AS_Stories
Author: Alexander Stolte
Version: 1.02

  • AS_Stories
    • Events:
      • AutoPlayContinue
      • AutoPlayEnd
      • AutoPlayPause
      • LazyLoadingAddContent (Parent As B4XView, Value As Object)
      • PageChanged (Index As Int)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddPage (PagePanel As B4XView, Value As Object) As String
      • AddPage2 (PagePanel As B4XView, CustomAutoPlayInterval As Long, Value As Object) As String
        CustomAutoPlayInterval - A custom auto play interval is set for this page, all other pages where none is set have the normal AutoPlayInterval
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • Clear As String
      • Commit As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
        Base type must be Object
      • getAutoPlayInterval As Long
      • getHeaderPanel As B4XView
      • getIndex As Int
      • GetPage (Index As Int) As AS_Stories_Page
      • GetPanel (Index As Int) As B4XView
        Returns the Panel stored at the specified index.
      • getSize As Int
      • getTouchWidth As Float
        Gets or sets the touch panel width
        Default: 100dip
      • GetValue (Index As Int) As Object
        Returns the Value stored at the specified index.
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextPage As String
      • Pause As String
        Call Resume to start
      • PreviousPage As String
      • RemovePageAt (Index As Int) As String
      • ResetAutoPlay As String
        Reset the auto play on the current index
      • Resume As String
        Call Pause to stop
      • setAutoPlay (Enabled As Boolean) As String
      • setAutoPlayInterval (AutoPlayInterval As Long) As String
      • setIndex (Index As Int) As String
      • setTouchWidth (Width As Float) As String
    • Properties:
      • AutoPlay
      • AutoPlayInterval As Long
      • HeaderPanel As B4XView [read only]
      • Index As Int
      • Size As Int [read only]
      • TouchWidth As Float
        Gets or sets the touch panel width
        Default: 100dip
  • AS_Stories_Page
    • Fields:
      • CustomAutoPlayInterval As Long
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Value As Object
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • B4A - Click events of views are now triggered
    • Add ResetAutoPlay - Resets the autplay on the current index
  • 1.02
    • Add AddPage2 - with a CustomAutoPlayInterval parameter
    • Add GetPage
    • Add get and set AutoPlayInterval
Have Fun :)
 

Attachments

  • AS Stories Example.zip
    10.1 KB · Views: 238
  • AS_Stories.b4xlib
    3.6 KB · Views: 31
Last edited:

asales

Expert
Licensed User
Longtime User
I tried to change the color to gradient using the code below, but I get this error:
java.lang.IllegalArgumentException: width and height must be > 0

What could be the problem?
B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("frm_main")

    Dim xpnl_Item As B4XView = xui.CreatePanel("")

    Dim col(2) As Int
    col(0) = Colors.RGB(125,25,85)
    col(1) = Colors.RGB(65,193,168)

    SetGradientBackground(xpnl_Item, col, "TOP_BOTTOM")
    
    AS_Stories1.AddPage(xpnl_Item,0)
End Sub

Sub SetGradientBackground(v As B4XView, Clrs() As Int, Orientation As String)
    Dim bc As BitmapCreator
    bc.Initialize(v.Width / xui.Scale, v.Height / xui.Scale)
    bc.FillGradient(Clrs, bc.TargetRect, Orientation)
    Dim rect As B4XRect
    rect.Initialize( 0, 0, bc.mWidth-1, bc.mHeight-1 )
    bc.FillRadialGradient( Array As Int(xui.Color_white, xui.Color_Transparent) , rect )
    Dim iv As ImageView
    iv.Initialize("")
    Dim xiv As B4XView = iv
    v.AddView(xiv, 0, 0, v.Width, v.Height)
    xiv.SendToBack
    bc.SetBitmapToImageView(bc.Bitmap, xiv)
End Sub
 

Alexander Stolte

Expert
Licensed User
Longtime User
Dim xpnl_Item As B4XView = xui.CreatePanel("")
You intialize a panel without specifying the height and width. Then you pass the function this
panel and this function tries to determine the height and width before you have set it. Has nothing to do with this view. Please create a new thread next time, thanks.
 

asales

Expert
Licensed User
Longtime User
I load the pages using a layout and in the last page I use a layout with labels to click in it (like the mentions in Instagram Stories).
But the click in the label is not work.
This is the default behaviour?
There are a workaround to capture the click?
 

asales

Expert
Licensed User
Longtime User
Other question: how can I reset the autoplay?
In a b4xpages project, when a reopen the page, even set index = 0 in B4XPage_Appear sub, it don't restart.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.01
    • B4A - Click events of views are now triggered
    • Add ResetAutoPlay - Resets the autplay on the current index
Other question: how can I reset the autoplay?
Example, you reset the auto play and set the index to the first page:
B4X:
AS_Stories1.Index = 0
AS_Stories1.ResetAutoPlay
I load the pages using a layout and in the last page I use a layout with labels to click in it (like the mentions in Instagram Stories).
But the click in the label is not work.
This is the default behaviour?
There are a workaround to capture the click?
I was about to give up as I had tried 2 things and they did not work. While writing the message, I then came up with the final workaround.
Should now work.
 
Top