Android uses viewpager to achieve slidable zoom in and out Gallery effect

Galleries are available in many app designs, as shown in the following figure:

This example is a small project I wrote when I was free. Please visit the specific source code address https://github.com/AlexSmille/YingMi 。

The gallery is similar to the effect of the cover. The picture sliding to the middle will slowly grow larger, and the view leaving will slowly shrink. At the same time, sliding monitoring and click monitoring can be set.

Many examples on the Internet are implemented through Gallery, while the implementation of the above example is implemented through viewpager, which solves the problem of performance optimization. Today, I hereby take it out and package it for easy use in the future. The final results are as follows:

Mode of use

Add the custom control to the layout

Set in code

The setting in the code is divided into the following steps: • find the control • initialize data • set the data to be displayed on the control • set sliding listening

Implementation principle

There are two difficulties in the implementation process: • how to zoom in and out in the sliding process • how to display the pages that are not displayed in the viewpager

How to zoom in and out during sliding?

When setting the page of each viewpager, set a fixed padding value for each page, so that each page will display the zoom out status. At the same time, viewpager sets addonpagechangelistener(), which will call back the sliding state and sliding offset of viewpager, and zoom in and out according to the sliding offset. And setting the display size of the control according to the padding value

How to display pages that are not displayed in the viewpager

There is an uncommon attribute Android: clipchildren in XML. Whether to restrict the display of child views. Set to false, the display of child views is not limited by the parent control.

code implementation

Write a layout file for the control

A viewpager is embedded in a relative layout. The relative layout is used to determine the display range. The viewpager is used to slide, zoom in and out, etc.

Create coverflowviewpager and load the layout

Find the control and load the layout.

Write the adapter to realize sliding monitoring

Now that you have a viewpager, you must have an adapter. Because we need to operate each sub element according to the offset to enlarge or reduce in the sliding listening, and for the sub elements, of course, the adapter is the easiest to obtain, so the adapter implements the sliding listening interface of viewpager.

The code is divided into two parts, the implementation of pageradapter and the implementation of sliding monitoring. The implementation of pageradapter is not the most basic thing. The focus is on the implementation of sliding monitoring.

There are three callback methods for sliding monitoring: the callback of onpagescrolled (int position, int positionoffsetpixels) is the sliding offset of viewpager. We dynamically set the padding value of the corresponding element again to zoom in and out.

Onpageselected() is the selected callback, which is called back to its caller through a custom interface. I'll mention it later.

Initialize viewpager

Now that you have an adapter, it's natural to start writing the part of the adapter:

The notes are very detailed, and the only thing to explain is the distribution of events.

The size of our viewpager is fixed and there is only the middle display area. When the finger slides on two sides, the viewpager naturally cannot accept the touch event. By setting the touch event monitoring of the outer layer relative layout, the touch event is transmitted to the viewpager. When sliding the area outside the viewpager, the viewpager can still realize the corresponding sliding.

Packaging of data sources

With the adapter and viewpager, only the data source is left.

Because we set the padding value, the background of the control to be displayed cannot be enlarged or reduced. Therefore, the control is wrapped with a layer of external controls. By setting the padding value of the external control, the control to be displayed will naturally be enlarged or reduced.

Select the callback to listen to

When we slide, different data may be displayed according to different slides.

After setting sliding listening, implement layer by layer interface callback for onpageselected.

Interface definition onpageselectlistener

Add callback in coverflowadapter

Add callback in coverflowviewpager

Click event settings

You can directly set the loop monitoring for the data source

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.