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

Tap to skip a page or hold, to hide infos from the layout

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

 

[asales]

Very nice - and useful.
Thanks @Alexander Stolte !

I bought you a coffee:
PayPal Transaction ID = 4K1485758H7154044

 

[Alexander Stolte]

Thanks!
I still have a few features I want to include:

• Custom Durations
  • If you have a video for example
• Shadow on the edges if you tap

I actually need the view for a project so it was handy

 

[asales]

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?

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]

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]

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]

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]

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:

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.

 

[Alexander Stolte]

Update

• 1.02
  • Add AddPage2 - with a CustomAutoPlayInterval parameter
  • Add GetPage
  • Add get and set AutoPlayInterval