B4A Library AHViewPager library - Sliding panels now perfect

This library is a B4A implementation of the ViewPager object provided by the compatibility class from google. With this library it is possible to add sliding panels to your apps.

AHPageContainer - This object is a container for the pages of the AHViewPager. You should add Panels to this object.

AHViewPager - This is the main object which provides the sliding panels.

All the Tabs objects are deprecated now. You can use them but I don't enhance them anymore. For nice looking Tabs please use the DSTabLayout object of the DesignSupport library.
Alternatively you can use the TabStripViewPager.


Installation:
  • From V3.00 on the library requires B4A 6.0 or later.
  • This library depends on the Android Support library so you need to install the Android Support repository in the Extras section with SDK Manager.
  • Copy the AHViewPager.xml and AHViewPager.jar files to your additional libraries folder.
Example project:

For an example project for this library see the Design Support Library.

Your support:
Creating libraries and wrappers for existing library projects is a lot of work. The use of this library is totally free and you even don't need to mention in your app that you use it.
But if you use this library in your projects and you think it is useful to you please consider to make a donation:

Thanks very much for your support.

Version History:

1.00:
- initial version

1.01:
- Added AHViewPagerFixedTabs object for a fixed tab indicator
- Fixed a bug that it was impossible to get the canvas of a panel which was added to the container (It was impossible to display charts on a page)
- Example for AHViewPagerFixedTabs tab indicator

1.02: (Never released)
- Fixes problem with tab height (Line is now always on the bottom)

1.03:
- Fixes problem with Line sometimes not updating correctly on Android 4.0+
- Fix UppercaseTitle property

2.0:
- Complete Rewrite of the Swipey tabs code to fix some bugs with newer android versions.

2.01:
- New property for the AHViewPager object: PagingEnabled - Enables or disables paging for the ViewPager.

2.02:
- New events PageScrolled and PageScrollStateChanged (with SCROLLSTATE constants)
See post 227 for details

2.20:
- Use raiseEventfromUI() in most events
- New SupportTabs object
- New SupportTitles object
- Support for Designer (as a Custom View)
- some minor internal changes and bug fixes

2.21:
- Use raiseEvent() for PageCreated and PageDestroyed event again to prevent double UI refreshes
- Added @RaiseSynchronousEvents annotation to GotoPage() (to make it better compatible with rapid debugger.

3.00:
- Support for Designer Custom Properties.
- Uses maven repository to access support library. (B4A 6.0 or later required)

Attention: V2.20 has an API change which makes the ViewPager incompatible with older versions. The AHPageContainer parameter is removed from the Initialize() method. Initialize2() has the old signature. If you use Initialize() (or add the View to the Designer as a custom view) then you have to set the container object with ViewPager.PageContainer = <YourContainer>

The examples use the old Initialize method, so they are broken. I was too lazy to fix them because I recommend the tab indicator from the Design Support library for a nice looking Material Design app.
 

Attachments

  • screenshot-1336034831196.png
    screenshot-1336034831196.png
    10.1 KB · Views: 8,092
  • screenshot-1336034966953.png
    screenshot-1336034966953.png
    9.9 KB · Views: 7,346
  • AHViewPager2_21.zip
    39.8 KB · Views: 2,349
  • AHViewPager3_00.zip
    74.9 KB · Views: 2,265
Last edited:

susu

Well-Known Member
Licensed User
Longtime User
I'm using this great library to make a quotes app with 100 quotes. Each quote loaded in 1 page with 1 random image background. My app used 89MB of RAM (so huge). I can imagine what will happen when it loads 1.000 quotes. How can I reduce the RAM usage?
 

corwin42

Expert
Licensed User
Longtime User
Hi

any update with my problem?

Sorry, currently not.

Now I want to change the backcolor of each Panel in the Pager (to meet the same colortheme as in the tabs). I dont't know why, but im not able to achieve this?

Should be possible without problem if you use

pan(3).Color = Colors.<whatever color you want>

If you can't get it to work please post a sample project.

I'm using this great library to make a quotes app with 100 quotes. Each quote loaded in 1 page with 1 random image background. My app used 89MB of RAM (so huge). I can imagine what will happen when it loads 1.000 quotes. How can I reduce the RAM usage?

I don't know how your app is designed but you should use the event sub PageCreated to load the contents of your page and PageDestroyed to destroy the page content again and free all related memory. With this method only 3 pages should be in memory at once.
 

Smee

Well-Known Member
Licensed User
Longtime User
Bugger,

i have this code
B4X:
ht
If CurrentPage=5 Then
   pager.GotoPage(0, False)
End If

which sorta works but it is not right.

To give an idea of what i am trying to accomplish. I have some directories with jpeg files and i want to load them on to a panel. There may be few or hundreds so to conserve memory i just want to loop the same panels around, right to left or left to right. I was thinking of using say 10 panels in a loop with an indicator to mark direction and pointers to track current directory and filename.

Any idea or pointers on how to do this with this particular library?

Many TIA

Joe


SUSU,

I think you have a similar problem to mine. Obviously we need to keep the smooth scrolling but re-use the panels. i.e when on panel 3 a swipe to the left would bring up a new panel 1. A swipe to the right would bring up a previous panel 2 then a previous panel 1 then a previous panel 3 etc etc.

I would think the easiest solution would be to load all panel addresses to a list array or similar and use pointers to determine direction then increment or decrement the array. However i have not as yet worked out a solution to this.
I am trying to re-use a webview on each panel. If i get it going i will post the code
 

susu

Well-Known Member
Licensed User
Longtime User
Thank you Markus and Smee. I'm trying add new page automatically when Pager_PageChanged event fires. But still no luck. I'll try again.
 

Smee

Well-Known Member
Licensed User
Longtime User
This is my test code snippet

B4X:
Sub Globals

Dim pan As Panel
Dim wView As WebView

End sub

Sub Activity_Create(FirstTime As Boolean)
.....

   For i = 0 To 5
      pan = CreatePanel("This is Page " & i)
      wView.Initialize("wView")
      pan.AddView(wView,20,40,500,800)
      container.AddPage(pan,"Page " & i)
   Next

....
....

End Sub

Sub Pager_PageCreated(Position As Int, Page As Object)

   If pager.CurrentPage= 2 Then
      wView.LoadUrl("file:///android_asset/baby671.htm")   
   End If
   
   'wView.LoadURL("file:///android_asset/test31.htm")   

End Sub

Now the Webviews all appear and the one that is actually supposed to load a file shows previous and next in the webview but not the html file.

The file is loaded with files to the asset folder. Can anyone advise what is wrong here?

Many Thanks

Joe

update:
The web page is loading because i can press a url (although I cannot see it) and the link comes up. So it is there but the content is not visible. Just a black screen
 
Last edited:

susu

Well-Known Member
Licensed User
Longtime User
My code but it didn't work as I expected.

B4X:
Sub Globals

   
     Dim Container As AHPageContainer
     Dim Pager As AHViewPager
     Dim Tabs As AHViewPagerTabs      
     Dim Line As Panel         

     Dim CurrentPage As Int : CurrentPage = 3  ' This value to know the recent page, for example: user stopped on page 3
     Dim MaxPage As Int: MaxPage = 15          ' Total pages of ebook
     Dim PreviousPage As Int                     ' This value to know users slide/move to left page or right page
     Dim Pan(3) As Panel
End Sub


Sub Activity_Create(FirstTime As Boolean)
   Container.Initialize
      
   Pan(0).Initialize("")
   Pan(1).Initialize("")      
   Pan(2).Initialize("")
   
      
      If CurrentPage = 0 Then        ' If recent page is the first page, just load 2 pages
            Pan(0).LoadLayout("Main")
            Container.AddPageAt(Pan(0), "#1", 0)
                  
            Pan(1).LoadLayout("Main2")
            Container.AddPageAt(Pan(1), "#2", 1)
            PreviousPage = Pager.CurrentPage
      End If
      
      If CurrentPage > 0 AND CurrentPage < MaxPage Then      'If recent page not first page, not max page, we load 3 pages
            Pan(0).LoadLayout("Main")
            Container.AddPageAt(Pan(0), "#"&(CurrentPage-1), 0)
            
            Pan(1).LoadLayout("Main2")
            Container.AddPageAt(Pan(1), "#"&CurrentPage, 1)
            
            Pan(2).LoadLayout("Main2")
            Container.AddPageAt(Pan(2), "#"&(CurrentPage+1), 2)
      End If
      
      If CurrentPage = MaxPage Then      ' If recent page is max page, just load 2 pages (max page and maxpage-1)
         Pan(0).LoadLayout("Main")
         Container.AddPageAt(Pan(0), "#"&(CurrentPage-1), 0)
            
         Pan(1).LoadLayout("Main2")
         Container.AddPageAt(Pan(1), "#"&CurrentPage, 1)
      
      End If

           Pager.Initialize(Container, "Pager")
      Tabs.Initialize(Pager)
      Tabs.LineHeight = 5dip
      Tabs.LineColorCenter = Colors.Red   
      Tabs.TextColor = Colors.Gray
      Tabs.TextColorCenter = Colors.Yellow

      Activity.AddView(Tabs, 0dip, 0dip, 100%x, 100%y)

      Dim Col As ColorDrawable
      Col.Initialize(Colors.Green, 0)
   
      Line.Initialize("")
      Line.Background = Col
      Activity.AddView(Line, 0dip, 35dip, Activity.Width, 2dip)            
   
      Activity.AddView(Pager, 0dip, 35dip + 2dip, Activity.Width, Activity.Height - 35dip - 2dip)
   
   
   If CurrentPage > 0 AND CurrentPage < MaxPage Then   ' Move to middle of 3 pages
   Pager.GotoPage(1, False) 
   PreviousPage = Pager.CurrentPage
   End If
   
   If CurrentPage = MaxPage Then      ' Move to right page
   Pager.GotoPage(1, False)  
   PreviousPage = Pager.CurrentPage
   End If

Sub Pager_PageChanged(Position As Int)
      If Position > PreviousPage Then        ' User move from left page to right page
      Container.DeletePage(Pager.CurrentPage-1)  ' Delete left page
      Tabs.NotifyDataChange
            
      Pan(2).Initialize("")
      Pan(2).LoadLayout("Main2")
      Container.AddPageAt(Pan(2), "#"&(Pager.CurrentPage+1), Pager.CurrentPage+1)   ' Add new page on right
      Tabs.NotifyDataChange
      End If
            
      If Position < PreviousPage Then    ' User move from right page to left page
      Container.DeletePage(Pager.CurrentPage+1)    ' Delete right page
      Tabs.NotifyDataChange
            
      Pan(2).Initialize("")
      Pan(2).LoadLayout("Main2")
      Container.AddPageAt(Pan(2), "#"&(Pager.CurrentPage-1), Pager.CurrentPage-1)   ' Add new page on left
      Tabs.NotifyDataChange
      End If
            
       PreviousPage = Position
End Sub

I need to work on this code more but I don't understand Pager_PageChanged event will fire when user move from page to page or it also fire when new page created?
 

ckoehn

Banned
Your problem intrigues me. I don't have time to try this but....

Use 6 panels numbered from 0 to 5. Panel 0 would be hold the same information as panel 4. Panel 5 would hold the same information as panel 1. The active panels would be 1 to 4. When the page was turned to 5, you would send a goto page 1. When the page was turned to 0, you would send a goto page 4. That way you would get smooth scrolling and it would look like it was looping.

Later,
Clint
 

susu

Well-Known Member
Licensed User
Longtime User
Thanks Clint. I don't want a looping I want to save RAM usage. But I like your solution, I'll try it.
 

Smee

Well-Known Member
Licensed User
Longtime User
Thanks for the reply clint.

It is not dissimilar to what i had originally but i think it is a definite improvement. I will be trying it as soon as i can work out why the web pages are not loading
 

sigster

Active Member
Licensed User
Longtime User
Hi

on the first Tab the listview don't go all the way to the bottom
on tab 2 and tab 3 it is ok

all the Listview are the same in my code
B4X:
   Listvdagar.Top=0 
   Listvdagar.Left=0
   Listvdagar.Width=100%x    
   Listvdagar.Height=100%y

Regards
Sigster
 

sigster

Active Member
Licensed User
Longtime User
Finish to fix this Thanks

I set this in the end it was in the beginning


B4X:
   Listvdagar.TwoLinesLayout.Label.TextSize = 10dip
    Listvdagar.TwoLinesLayout.SecondLabel.TextSize = 10dip
    Listvdagar.TwoLinesLayout.Label.Gravity = Gravity.LEFT
    Listvdagar.TwoLinesLayout.SecondLabel.Gravity = Gravity.FILL
    Listvdagar.TwoLinesLayout.SecondLabel.Top = 19dip
    Listvdagar.TwoLinesLayout.Label.Height = 19dip
    Listvdagar.TwoLinesLayout.SecondLabel.Height = 19dip
    Listvdagar.ScrollingBackgroundColor = Colors.Transparent
    Listvdagar.TwoLinesLayout.ItemHeight = 50dip     
   Listvdagar.Top=0 
   Listvdagar.Left=0
   Listvdagar.Width=100%x    
   Listvdagar.Height=100%y
 

susu

Well-Known Member
Licensed User
Longtime User
I'm still stuck with dynamic create, destroy pages to reduce the RAM usage. Anybody can give me a help? Thank you.
 

Smee

Well-Known Member
Licensed User
Longtime User
yep and i'm still unable to get the web view working properly

:BangHead::BangHead:
 

bluedude

Well-Known Member
Licensed User
Longtime User
Pager tabs tab does not change color when swiping

Hi,

I noticed on my Galaxy Nexus that when I swipe pages that the tabs text does not change to white (does not get focus). On my other devices (Nexus One, Hero) it works as advertised. Any idea how this can be solved?

Weird thing is that it worked before.

Cheers,
 

volvomann

Active Member
Licensed User
Longtime User
Trouble with slidinpanel

Hallo
I have this sub under main2 and it runing vell:
Sub Sesitrykkknapp_Click
Dim areal,kraft,resultat As Double
Dim i As Long

If Krafttekst.Text="" Then
Msgbox("Mangler verdi kraft","Pulssoft")
Krafttekst.RequestFocus
Else If arealtekst.Text="" Then
Msgbox("Mangler verdi areal","Pulssoft")
arealtekst.RequestFocus
Else
areal=arealtekst.Text
kraft=Krafttekst.Text
resultat= (kraft/(areal*10))
spetrykktekst.Text=resultat & " bar"
End If
if i make one inn main3 i cant read the from textoxes to the var. Can any one tel why
 

logemag

Member
Licensed User
Longtime User
AHviewPager library don't want to initialize with 1.90 B4A program ! :
 

alexposta2

Member
Licensed User
Longtime User
array of views

Hi all,
I've a issue with checkbox array and ahviewer.
I've designed 4 checkboxes in a layout, but i can't intercept event.
this is my code
B4X:
Sub Globals   
   Dim Container As AHPageContainer
        Dim Pager As AHViewPager
   Dim Tabs As AHViewPagerTabs            
   Dim cb101 As CheckBox
   Dim cb102 As CheckBox
   Dim cb103 As CheckBox
   Dim cb104 As CheckBox
   Dim cbs1() As CheckBox
End Sub

Sub Activity_Create(FirstTime As Boolean)

      Dim Pan(2) As Panel
            
            Pan(0).Initialize("")
            Pan(1).Initialize("")

      Container.Initialize
            
......
      cbs1 = Array As CheckBox(cb101,cb102,cb103,cb104)      
End Sub

Sub cbs1_CheckedChange(Checked As Boolean)
    Dim cbx As CheckBox ' used to find which CheckBox raised the event
    cbx = Sender 
   ToastMessageShow("hello",False)
End Sub ----->>>>this don't work


   
Sub cb101_CheckedChange(Checked As Boolean)
   ToastMessageShow("hello2",False)
End Sub  ----->>>>this  work

any idea?

thank you
Alessio
 

corwin42

Expert
Licensed User
Longtime User
I don't think that it has something to do with ViewPager.

How do you initialize the checkboxes? With LoadLayout or manually?
If you do it with LoadLayout() you have to specify the correct EventName for the checkboxes in your layout file. The event sub name has nothing to do with the object name of the checkboxes. Just creating an array for the checkboxes won't change the event name for them.
 
Top