Android uses listview to realize the animation effect of scroll wheel

I received a request before that a data display list page should be animated like a scroll wheel: the middle is the largest, and then gradually shrink up and down. I thought about it. IOS comes with its own wheel component. Android has to implement it by itself. At present, there are some wheel components imitating IOS on the Internet, but I don't feel it is suitable for me. My requirements are not so complex, so I decided to implement them by myself.

Before you start, analyze what you should do. In the final analysis, you just want to achieve the zoom effect. It becomes smaller from the middle to both sides. The closer an item is to the middle, the larger it will be, and the farther it is away from the middle, the smaller it will be. Then you can calculate a scale by first obtaining the midpoint of the listview, then obtaining the vertical distance between all currently visible items and the midpoint of the listview, and then scale the size of items according to this scale. If the vertical distance between each item and the midpoint of the listview is different, the calculated scale will be different, and then calculate the scale every time you scroll, This should be able to achieve the effect we want.

At the beginning, my list display was made with listview. There are other effects in it, and it is not convenient to change other components, so I still want to use listview to implement it. Because we need to zoom every time we scroll, listview provides an onscrolllistener, and its onscroll method will be called every time we start scrolling, so we choose to override it. When it is called, we start to get the midpoint of the listview, and then start to calculate the distance of each item for scaling

I don't want to add a demo later, so go directly to the code of the whole listview

In this way, we basically achieve the effect we want

But now there is a problem that the first item and the last item cannot be scrolled to the middle to zoom in and highlight. I think of two ways to solve this temporarily: 1. Add some blank items at the beginning and end so that the data we need to display can be scrolled to the middle. That's what I'm doing now; 2. Make the whole list scroll circularly.

If you add a blank item, I implement it by modifying the adapter. The data source is an array. I add some special data before and after the array. When the adapter implements getview, if it is found that the data of the current item is special data, the item becomes transparent, so that the data we originally want to display can be scrolled to the middle;

Start with the data source and fill in special data from the beginning to the end

Then, the adapter identifies the special data at the beginning and end to make the item transparent.

So we can implement the first solution

The second method is to make the whole listview realize circular scrolling. There are many ways to realize it. You can baidu by yourself. Here, I will implement it by modifying the getcount method of the adapter, that is, return a large value in the getcount method. When getview obtains data, it should simulate the original array size, otherwise the array will cross the boundary. Then the listview scrolls to the middle, so that the pseudo loop scrolling is realized

In this way, we realize the circular scrolling of the list, so that each item can be scrolled to the middle and highlighted

Now that we have done all the animation effects, we can also directly make a wheel selector. We only need to add two more steps: 1. Scroll the item closest to the middle to the middle; 2. Return the serial number of the intermediate item through an interface. I'll just post the code. It's not difficult anyway.

To scroll the items closest to the middle to the middle, I do this: first, determine the number of items visible to the whole listview, which must be odd, so that only one item is in the middle, then calculate the required height of each item according to the height of the listview, then change the height of the existing item and zoom the content at the same time (without scaling the content, the layout will be disordered if the height becomes smaller) Finally, we use the smoothscrolltoposition method to correct the first item in the visual item, so as to realize the effect of rolling back the item in the middle to the middle. Because we calculate the height of the item according to the height of the listview, all the visual items are just covered with the listview, so as long as the top item is corrected, other items will also be corrected. So You can override the onscrollstatechanged method of onscrolllistener to perform a rollback at the end of each scroll

If the item closest to the middle is scrolled to the middle, the selected item is the item in the middle after scrolling. For this, we need to rewrite the onscrollstatechanged method of onscrolllistener again. After each scrolling, take the serial number of the first item in the visual item plus half of the number of visual items we set before (rounding off the decimal part) to be the serial number of the middle item and the serial number of the current selection.

Here I use an interface to return the latest data in real time

The method of using the wheel selector is also very simple. In addition to initializing and binding the adapter with the normal listview, you only need to call two additional methods

In this way, we realize the effect of roller digital selector

Now paste the complete code for the entire wheel selector

The notes are very detailed. I believe Xiaobai has no difficulty reading them.

There are many ways to realize the roller effect. There are also many ways to solve the problem that the two items at the head and tail cannot scroll to the middle. The methods I said are for reference only. There is no best method, only the method that best meets your own needs.

Demo download 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.