Viewpager create a rotation chart banner / guide page

preface

Last July, an open source banner library was released in GitHub. Although there are not many stars, it is still used by a small number of people.

Banner effect:

GitHub link address: https://github.com/Allure0/LMBanners

Yesterday, a classmate who used this library put forward a demand and wanted to use this library on the guide page, and there was an entry button on the last page. In order to meet his demand and facilitate more developers to implement it quickly. It is simply extended to support the use of guide mode.

Guide renderings:

OK, the effect is as shown in the figure. Therefore, our library can be used not only on the banner, but also on the boot page when installing the application for the first time.

What is the difference between banner and guide?

There are buttons on the last page of the guide page, but banners doesn't

The origin distance at the bottom of the guide page is large, and banners can be almost fixed

The first step of extension based on banner: Add button

Compared with the original buttons, we run according to this layout and include buttons in each interface, while the boot page mode only needs to display buttons on the last page.

Step 2: button control and mode support

Mode support

New custom attribute in attrs.xml

Button control

In viewpager, the control button can be controlled by onpagescrolled in the interface method of viewpager.onpagechangelistener

In the above code, we judge which mode it is. If it is not the guide guide page mode, the direct setting button will not be displayed, and the program will jump out. If it is the guide guide page mode, we judge the display of the button according to the sliding distance between the penultimate page and the last control.

Core points:

Positionoffset: indicates the sliding distance. Slide 1 - > > 0.5 > > 0 to the left and 0 - > > 0.5 > > 1 to the right. A gradient display of the button is performed according to the sliding distance.

The third step of extension based on banner: button click callback

Click the button to execute the developer's own logic jump. We use the interface callback to complete it

Expand the implementation based on banner step 4: guide mode usage

Compared with banner, you only need to add the following code. If you need other properties, you can set them yourself (for example, no automatic scrolling, no circular playback, etc.)

At this point, we will upgrade our banner map to the guide mode library.

Guide address

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.