Android custom swiperefreshlayout high imitation wechat circle of friends drop-down refresh

In the last article, I briefly explained the principle of swiperefreshlayout and got a general understanding of its working principle. Those unfamiliar with it can take a look: https://www.oudahe.com/p/16766/

At the end of the previous article, it was mentioned that the customizability of swiperefreshlayout is relatively poor. Looking at the source code, you will find that several classes related to style are private, and the methods are dead, and only a few color setting methods are exposed. This makes the use of swiperefreshlayout relatively simple. The main thing is to set up a listener to complete the refresh logic in the onrefresh method. It makes sense that the style of swiperefreshlayout is very beautiful. If you use this drop-down refresh style in the future, the programmer will be quiet, but it is also unlikely. What if you want to use the official swiperefreshlayout, do not want to use third-party controls, and want to customize the style? Basically, we can only change the source code. Here is the idea of custom style from the perspective of modifying the source code.

First, you need to copy the swiperefreshlayout and the source code of the internally used circleimageview and materialprogressdrawable into a package for easy modification. As can be seen from the source code, there are two main classes related to styles in swiperefreshlayout:

1、 Circleimageview inherits from ImageView, and the source code will not be pasted. It is mainly to draw the background. The progress circle is drawn on it. If you want to modify the position of the progress circle, you should modify the position of circleimageview.

2、 Materialprogressdrawable inherits drawable and implements the animatable interface. It also defines a ring class internally, which is mainly used to draw the progress circle. If you want to modify the picture and animation of the progress circle, you should operate from here.

The following takes the boss wechat of social app as an example to emulate the pull-down refresh effect of the circle of friends.

First, the renderings can be compared with the wechat in the mobile phone. The overall feeling is OK. The first time I recorded GIF, it was too long, and some intermediate frames were deleted during processing)

During this period of time, in the high imitation wechat, the overall effect is also displayed conveniently. Readers can pay attention to refreshing the page. The layout is mainly a swiperefreshlayout with a recyclerview embedded. When you slide to the top and drag down, the progress circle is the rainbow circle of the circle of friends, which is located on the left, and will continue to turn around the center as you drag down. In addition, the progress circle will not go down after reaching a certain position. Different from the default effect, there is recyclerview. By default, the main layout will not drag, while wechat has a drag rebound effect with a black background. After the refresh, the main layout bounces back to the head, and the progress circle turns around. After the refresh, the progress circle disappears. That's the whole process. Then take it step by step

1. To adjust the position of the progress circle, first adjust the progress circle to the left. According to the drawing principle of view, the position of the progress circle should be determined by the parent layout, that is, the onlayout method in swiperefreshlayout. See the source code:

Among them, mtarget is the main layout, that is, recyclerview, and mcircleview is the view of reprinting the progress circle. Therefore, the last sentence should be commented out and changed to:

Then you will be happy to find that the progress circle has been turned to the left.

2. To achieve the drag rebound effect, first modify the drag rebound effect of recyclerview. The default effect of swiperefreshlayout is not to drag. If you want to modify it, it is simple, just record the distance of finger movement and let recyclerview set translation. Then find the ontouchevent method and modify the action_ Move and action_ Part of up:

I've skipped all the irrelevant, and I've also annotated the changes, which is very clear. This solves the problem of drag rebound. Thanks to the framework of swiperefreshlayout, it is easy to modify without considering conflict.

3. Modify icons and animation when dragging

Next is the more troublesome icons and animation. It's not difficult to modify the icon, because circleview inherits from ImageView. You can get the instance variable of circleview through reflection, and then pass your icon in setbitmap. But then there will be no animation, which is obviously meaningless. Readers can take a general look at the source code of materialprogressdrawable. To realize the default animation is still relatively complex. I want to change it to the effect of wechat. It's still relatively simple to turn around and around. Let's see how to modify it in combination with the process analyzed in the previous article. First, create a customprogressdrawable class and inherit it from materialprogressdrawable (you need to copy the source code). You also need to add a set method in swiperefreshlayout to facilitate the transfer of custom classes.

To draw custom icons in customprogressdrawable, you need to expose a setbitmap method for drawing. As mentioned in the previous article, when a finger moves, it will call the movespinner method and pass in the moving distance. In this method, a rotation will be obtained through a pile of mathematical processing, and then it will be passed into the setprogressrotation of mprogress, that is, the setprogressrotation method turns around through the incoming angle. The effect of the circle of friends is to keep the center turning, so it is easy to rewrite:

Just rotate the canvas and draw the bitmap. Then you will be happy to find that the circle turns when you pull down.

4. Set the pull-down limit of the progress circle and realize the animation during loading. At this time, the circle will not rotate when it is being refreshed, and the circle is dragged with the finger by default, without limit. The effect of the circle of friends is that the circle will not continue to pull down after it is pulled down to a position. First, solve the problem of the pull-down position. In the moveSpinner method, after calling the setProgressRotation method to turn around, the setTargetOffsetTopAndBottom will be called to change the location of mProgress, and the code will not be pasted. Since we want to limit the drop-down position, we should limit it here. When we move down to the refresh position, we will not move down. The code is as follows:

Here, we first calculate an endtarget, which is the final position. We won't talk about other comments in detail, which limits the downward position. Next, if you want to continue to rotate in circles during refresh, you need to know where the animation is executed during refresh. The previous article also mentioned that the animation of turning is in the start method of mprogress. Let's take a look at the source code:

In fact, it's the last sentence. Pass in the circle animation. Mmanimation is the default rotation animation. You can see it yourself if you are interested. We just need to customize the circle animation and pass in this method. With the setprogressrotation method just now, you only need to define an animation, constantly change the value of rotation and execute this method. The code is as follows:

That's OK!

5. The modified loaded animation has been basically completed. Finally, there is an end animation. The default is scale animation, while wechat moves upward to disappear. The final animation is completed by executing the startscaledownanimation method of swiperefreshlayout. A scale animation is defined inside the method, We just need to comment out and define an animation ourselves:

That is, an offset animation ~ make some settings in the activity. After passing in the icon of the circle of friends, you can get the initial effect:

The above basically imitates the drop-down refresh effect of the circle of friends by modifying the source code of swiperefreshlayout. From the source code, we can see that the swiperefreshlayout is really closed, and it is basically impossible to customize the style without modifying the source code, but it will be clearer to follow the source code. Try again later if you have a chance~

Finally, attach the complete code of customprogressdrawable. The swiperefreshlayout is too long and will not be issued. All the changes should be mentioned.

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.