Android imitation immediate home page vertical scroll chart, cool to the end!

Project address: https://github.com/JeasonWong/JikeGallery

If you don't say much, get the effect first.

This effect was seen on the instant app. I thought it was very good, so I imitated it.

Let's talk about my implementation idea first (take the picture scrolling at the top as an example, and the text at the bottom has a similar implementation effect):

The custom ViewGroup loads two imageviews and a shadow view, and controls the two imageviews and their margintops alternately through a certain law. The specific value of margintop is controlled by attribute animation in onlayout(), and requestlayout() is called continuously

Next, it will be explained in turn

1、 Custom ViewGroup

Let's first understand the member variables. The most important one is msmoothmargintop. I believe many people know that a view's margintop can be set to a negative number, which can bring us too much convenience.

Figure 0 in the above figure is the ImageView we show on the screen, and figure 1 is the ImageView with margintop - height off the screen. This must be understood before we can continue to implement it.

2、 Load two imageviews and one shadow view

Key point description:

Marginlayoutparams for later convenience, get the margin value addviewinlayout() for absolute control of requestlayout getimgpath() for circular scrolling. In this way, all the views we need have been created.

3、 Two imageviews and their margintops are alternately controlled by a certain rule, which is implemented in onlayout()

The above implementation is to constantly replace Figure 1 and Figure 2, who goes up and who goes down, and keep the shadow synchronized with the figure below.

4、 The specific value of margintop is controlled by the attribute animation, and requestlayout() is called continuously

First look at the base class ViewGroup

Key point description:

Attribute animation controls the change of msmoothmargintop in [- mheight, 0]. Mrepeattimes increases by 1 for each circle

Let's look at the gallery implementation class

Key point description:

The transparency of shadow view is controlled by the ratio of msmoothmargintop to mheight. Each time the animation is completed, the lower figure (at this time, the lower figure has exceeded the screen, while the upper figure is displayed on the screen) needs to load the third figure, and use getimgpath() to take out pic1

The above is the realization of picture scrolling. 90% of text scrolling is the same. The difference is that the text needs to be vertically centered under control. I won't repeat it.

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.