B4A Library AHViewPager library - Sliding panels now perfect

corwin42 · Jan 18, 2012

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.

susu · Nov 10, 2013

Without reading all 15 pages, I want to ask a question:
I want to use AHViewPager to display an ebook with more than 300 pages. I know we can load all pages when it first run but it's too slow and/or it will be crashed because low memory. Is it possible to load only 3 pages: Previous page, Current page, Next page. When user is reading Current page, only the Previous and Next page will be load. Is there any sample code to do that? Sorry for my laziness

ernschd · Nov 11, 2013

In my opinion there are just 3 pages in memory. When the scrolling event fires, one page will be destroyed and the new one is loading into memory.

ernschd · Nov 11, 2013

@klaus: Thank you very much. I'll have a look on this.

susu · Nov 11, 2013

ernschd said:
In my opinion there are just 3 pages in memory. When the scrolling event fires, one page will be destroyed and the new one is loading into memory.

I want to ask how to execute it? I tried to load all 300 pages when it runs first time and it takes to long.

ernschd · Nov 11, 2013

How do you get the content of your ebook? Is it stored in a file or in a database?
Maybe you could load just the needed 3 pages (current, previous, next) into memory...

susu · Nov 11, 2013

The content is in a database. I created a small app before, it's only 100 pages but it took too long to load at first run. Now with 300 pages I can't imagine how long it will take to finish loading. So I ask about another way to do. And I'm so lazy to read all 15 pages of this thread.

ernschd · Nov 12, 2013

You could do a database query to get 3 pages. In the Pager_PageChanged-Event you get the actual position, which you can use for the next query:

B4X:

SELECT * FROM TABLE LIMIT X,Y

With this you have just 3 pages in memory.

luke2012 · Nov 21, 2013

corwin42 said:
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 with a very nice tab selector and page indicator like in some google apps (Market etc)

There are four objects in this library:

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.

AHViewPagerTabs - This (optional) object provides a nice tab selector and indicator for the sliding panels. This object is based on the ViewPagerTabs implementation from Andreas Stütz and you can find it here.

AHViewPagerFixedTabs - This (optional) object provides a nice tab selector with fixed tabs. This object is based on the ViewPagerExtensions library from Andreas Stütz See here
For a detailed usage explanation see the example project.

Installation:
You need at least B4A 1.8.
Copy the jar file and the xml file to your custom libs folder.
Copy the android-support-v4.jar from the Android SDK to your custom libs folder (see below)

Attention: This library uses the android-support-v4.jar library. You have to install it with the Android SDK Manager. Please add the Extras/Android Support package. Then you will find the jar under <SDK root folder>\extras\android\support\v4. Please copy the android-support-v4.jar file to your custom libs folder!

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

My compliments! Very good work !
I'm using this library with satisfaction!

gmartano68 · Nov 27, 2013

Hi, i'm tryng AHViewer 2.02 .. I download library and put "xml" and "jar" AHV under B4 libraries plus "android-support-v4"

but when I compile B4 give me following error:

Parsing code. 0.03
Compiling code. 0.38
Compiling layouts code. 0.03
Generating R file. 0.71
Compiling generated Java code. Error
javac 1.6.0_25
src\de\amberhome\viewpagerexample\main.java:274: package de.amberhome.viewpager does not exist
public de.amberhome.viewpager.AHPageContainer _container = null;

1 error

Any idea what's my problem? thnks, giovanni

PaulD · Dec 3, 2013

I started my project building off of the AHViewPagerExample1_0.zip and it works GREAT... however as my project grew.. I needed to simply things... so I used NJDude's example... much simpler way to use the pager...

The problem that I am having is that I wanted to keep the GoToPage button on the bottom... but I cannot get the panels to re-size to fit the container....

I figure the secret is in this line of code... but I have changed everything I can think of and nothing seems to make the panel shorter...

Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height -35dip -2dip)
or
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height -44dip,-35dip -2dip)

The size settings from the first example (AHViewPagerExample) is the second line of code... so you would think it would work ... but no

HELP! Please!

klaus · Dec 3, 2013

You set the Top property to 35dip + 2dip and the Height to Activity.Height - 35dip - 2dip.
This means that the bottom of the pager is at the bottom of the screen !
Try this:
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height -35dip -2dip - Button.Height - 4dip)
You shoud adapt these values.

corwin42 · Dec 3, 2013

gmartano68 said:
Hi, i'm tryng AHViewer 2.02 .. I download library and put "xml" and "jar" AHV under B4 libraries plus "android-support-v4"

but when I compile B4 give me following error:

Any idea what's my problem? thnks, giovanni

I guess your support library is too old.

PaulD · Dec 3, 2013

klaus said:
You set the Top property to 35dip + 2dip and the Height to Activity.Height - 35dip - 2dip.
This means that the bottom of the pager is at the bottom of the screen !
Try this:
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height -35dip -2dip - Button.Height - 4dip)
You shoud adapt these values.

Thank for your response Klaus... Here is the line with the proper var

Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height -35dip -2dip - Button1.Height - 2dip)

and you are correct, the bottom of the pager is at the bottom of the screen... unfortunately adding the button1 reference did not work... any other thoughts?

klaus · Dec 3, 2013

unfortunately adding the button1 reference did not work...

You need to replace Button1 by the name of your button !

PaulD · Dec 3, 2013

klaus said:
You need to replace Button1 by the name of your button !

button1 is the name of my button...

BTW: adding
Log(pager.Height)
Log( Activity.Height -48dip-35dip -2dip - Button1.Height - 2dip)

Both equal 572

Even stranger is, when I remove the button1 and it's container, the pager panels are still full screen size, just pushed down the 35dip+2dip of the tabs and line... so the panels actually run off the screen

here is my full project on pastebin... http://pastebin.com/EVs7dpir

klaus · Dec 3, 2013

You should post your project as a zip file (IDE menu Files / Export As Zip).
The layout files are missing.

PaulD · Dec 3, 2013

Here is the zip as requested..

Oh, BTW... I am currently on chat as well http://jonsap.com/b4achat/

klaus · Dec 3, 2013

In your code you have:
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height-48dip-35dip-2dip - Button1.Height - 2dip)
This is not what I suggested you, you have -48dip more.
With this line it works:
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height - 35dip - 2dip - Button1.Height - 6dip)
In your DesignerScripts I found several lines like Lab_bizname.Left - 10%x
It should be Lab_bizname.Left = 10%x
Most layouts go bejond the bottom of the container panel.
I changed a bit the rep layout, but it's up to you to change it to your requirements.
You should reconsider all the layouts.
If you set all properties with %x and %y values you don't need AutoScale.
In the coupon layout you set couponbg.SetTopAndBottom(0, 100%y), the image with a height of 100%y will of course go below the bottom of the container panel.

Attached the modified project.

PaulD · Dec 3, 2013

klaus said:
In your code you have:
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height-48dip-35dip-2dip - Button1.Height - 2dip)
This is not what I suggested you, you have -48dip more.
With this line it works:
Activity.AddView(pager, 0, 35dip + 2dip, Activity.Width, Activity.Height - 35dip - 2dip - Button1.Height - 6dip)
In your DesignerScripts I found several lines like Lab_bizname.Left - 10%x
It should be Lab_bizname.Left = 10%x
Most layouts go bejond the bottom of the container panel.
I changed a bit the rep layout, but it's up to you to change it to your requirements.
You should reconsider all the layouts.
If you set all properties with %x and %y values you don't need AutoScale.
In the coupon layout you set couponbg.SetTopAndBottom(0, 100%y), the image with a height of 100%y will of course go below the bottom of the container panel.

Attached the modified project.

THANK YOU!! I am still learning all of the layout stuff.. and thought I was following the tutorial correctly... I see that I still have much to learn! Thanks for the help!!

john mad doe · Jan 1, 2014

Hello

Is there a way to block the lateral scrolling ?

I use AHViewPager (thank you very much for this library) and I'm looking for a way to forbid the lateral movement to change pages; I want to force the user to use the tabs on the top of the pages.

Why this need: when a button is held on a page, if the user does a little , unwanted, movement of scrolling, we never get the information when the button is released. For my application I need to know when the button is released to achieve the action started when the button was held.

John

B4A Library AHViewPager library - Sliding panels now perfect

Attachments

Well-Known Member

Active Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

New Member

Member

Expert

Expert

Member

Expert

Member

Expert

Member

Attachments

Expert

Attachments

Member

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency