Android imitation Red Book welcome interface

1. I feel that the welcome interface of xiaohongshu is very beautiful, so I want to learn to achieve a similar effect. The original renderings are as follows:

2. Let's make a little analysis according to the effect

Step 1: first take a look at our main interface layout file. The view effect is as follows:

main_ The code of activity.xml file is as follows:

You can see that the layout file of our main interface mainly consists of two controls, one is the ImageView containing the walking effect of the villain above, and then a custom parallelaxcontainer control. We don't care about the specific content of this custom control, and we'll explain it later

Step 2: take a look at the code of mainactivity in our main interface

MainActivity.java

We can see that the code is very simple, mainly these useful Codes:

① Add the ImageView where we walk to the custom control parallelaxcontainer

② Set each of our layout files into the parallelcontainer control

R.layout.view is given here_ intro_ 1. The XML file code is similar to others, but it will not be given (note the x_in, x_out, y_in and other attributes here)

Step 3: OK, now we must be curious about the contents of parallelaxcontainer. Let's take a look at the above methods. First, take a look at the SETIMAGE () method in parallelaxcontainer. The code is as follows:

There seems to be nothing, just assign it to the member variable IV. let's move on to the next setupchildren () method

Let's analyze the code line by line

First, look at this code. It's just if to judge whether the setupchildren () method has been called. It's not important. We're looking at the creation of the parallellayoutinflator pump object. Let's take a look at the specific code of parallellayoutinflator. It's not important. There's just a parallelfactory class in it. We haven't seen it before. Pay attention!

Let's look at the following code, which mainly adds all layout files to the viewlist collection and fills them into our layout. Let's continue to look at it

The following code is mainly to get all the corresponding sub views. The key is our addparallelaxview() method. The specific code is as follows:

Recursively save the smallest cell view in each layout file to the parallaxview collection, but wait, here we have found a new class parallaxviewtag. Let's specify the code

It seems very simple. Xin and xout seem to be familiar with the layout file attribute app: X_ In and other attributes correspond, so we can understand that this class is equivalent to a tag class, which is used to record some special attributes we set. However, we have a question here. The following code is to get to tag. Where are the attributes in set?

ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);

At this time, let's take a look at a strange class parallelaxfactory we mentioned earlier and look at the specific code

We mainly look at the onviewcreated () method. We can see that here we set the values of each corresponding attribute to our parallelaxviewtag. We then look at the following code and call the updateadaptercount () method to let the adapter update the number of adapters. Here we can see that the adapter inherits the pageradapter class and is used for viewpager, Here, LinkedList is used to store views. This method is very good. I like it

Let's continue to look down. The next step is to create a viewpager object, add addview to the main control, and add the sliding listener of viewpager in the attachonpagerchanglelister () method

Here, we use the onpagescrollstatechanged() method to judge whether to start the animation of the following villain walking, monitor the specific offset of sliding through the onpagescrolled() method, and change the corresponding properties through the view. Settranslationx() method

4. The source code is basically analyzed here. So, now that we have analyzed other people's source code, the following is to integrate it into our own project. When we want to realize a view that flips pages and flies obliquely from the top, our layout file code can be as follows:

Take a look at our results:

This is the GitHub download address. Students who want the source code can download it. See you next time!!!

The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. At the same time, I also hope to support a lot of programming tips!