I’ve been waiting a long time to say that. Android engineers pay attention to me, and I can get you to a master level, not interview bragging, not self-deception, but real development strength. I used to have this confidence, but not this proof. But now I have the proof, too.

As those of you who follow me know, I’ve been sharing Android custom drawing technology for more than three months, and a little over a week ago I held an online “Copy cool App” event, where I asked my fans to copy some of the classic features of Instant, Mint Health, Xiaomi Sport and Flipboard. Let me verify my learning achievements in the past three months.

In short, it was a success (blush).

After a week of submission, I received 97 submissions from my followers (a lot, unexpected), and I did well. After a painstaking process of sifting through the four original developers, one winner was chosen for each effect. Here are the four winners’ work and comments from the original developers.

Copy written works

Copy write a: instant

Let’s see the result first.

The original effect:

Imitation effect:

It’s a good imitation. Moreover, the effect of this imitation seems simple, but it is actually an illusion. The number to the right of it skips out character by character, rather than the entire string, which requires familiarity with the literal drawing API.

The copywriter’s name is Liu Jinwei. After informing Liu jinwei that he was the “chosen one,” I conducted a short wechat interview with him. Liu jinwei told me this about the process of imitation writing:

By this time, the HenCoder column had produced eight articles on the technique of drawing views. After reading each article carefully, I followed up with examples and applied some of the lessons I learned to my projects. As the article explains, I became more comfortable with customizing views.

After seeing the copywriting activity of HenCoder this time, I was a little excited to have a try and found that these results were quite good. After chatting with my friends, I chose this frequently used “like” function to practice. After my analysis of this “like” effect, I found that although there were a lot of internal animations, the technical points used were all mentioned in HenCoder, so I began to write after a simple analysis. It took about half a day to complete the process, and there were no too many technical difficulties. I showed off to my friends after I made it.

Finally, I would like to thank HenCoder again for what he has done to improve your technical level.

No thanks no thanks, haha.

Original author’s comments

Commenting on his work was Jike’s Android Leader, Jean Luo. His assessment of the parody seems to be good:

Copy write the comment of the effect, mainly for the following points

  1. The degree of originality
  • Sample completeness (testability)
  • The project specification
  • Code implementation

The degree of originality

This student carefully observed the effect of instant likes

  • The resources used should be obtained after decompilating immediate APK
  • To achieve the point and cancel the point like two effects
  • To achieve the left part of the picture animation
  • The realization of the right part of the digital animation

Unimplemented parts

  • The handling of the touch operation by liking (only the click operation is handled)
  • The “like” effect on the image enlarges and then shrinks
  • The amplification effect of scattered points
  • Overall animation detail optimization

The completeness of the examples

This one is better done

  • Can directly set the specific number, so convenient to do the boundary conditions (carry and abdication) test.
  • App-release. apk, which can be installed directly, has been uploaded.
  • The README has instructions for the animation implementation.

The project specification

  • There is no.idea folder that should not be uploaded
  • .gitignore has also been specially modified

The parts that can be optimized

  • Don’t rely on the Alpha version of the Android Support package. Rely on the stable version
  • Code files need to be formatted, including XML
  • Mdpi resources are no longer needed
  • Custom View attr naming, needs its own namespace (prefix)
  • Custom View variable naming is not standard, in a moment m, in a moment underline

Code implementation

The author has put pictures and words in one category, which is not very flexible. Now, the “like” effect of Jike app under some themes is not a thumb, for example, the theme of the deceased is a candle, so it is suggested that pictures and words be divided into two categories.

There seems to be a problem with the anti-reweighting of click events, and whether consecutive clicks cancel the previous animation directly needs to be considered.

There is a lot of redundant logic in the overall implementation code, and every line of statements inside each function is not completely considered. For example, for the switch case of specMode, all possible values are not exhausted.

Images of the implementation, the overall train of thought is through painting beforehand all sorts of elements, and then through the way of attribute animation, but the custom attributes animation method is through reflection calls, the whole class did not show the call, for animation > this is not very complex, advice or a system’s own property is better.

The implementation of the text involves offsets, colors, and the separation of what changes and what doesn’t (the author dissects the text well), but the code doesn’t reuse very much.

In general, the completion of the project is relatively high, congratulations on winning the champion of the imitation write instant praise effect, but there are still many need to be considered in real commercial, especially the code specification needs to be strengthened, and then good implementation and algorithm, if the code is not standard, I am afraid that people will also be more tired, hope to make continuous efforts.

The evaluation is very detailed, I read this review process many times encountered “wow, so fine, if it is me here must be deducted points” situation.

Copy write two: mint health

Still the first effect:

The original effect:

Imitation effect:

Did you pass for the real thing?

The author of the parody is Yan Jikai. His review of the copy-writing process goes like this:

I think copy is written, the first is to understand the clear copy write the details of the object, so still experience yourself better, so I downloaded the mint health APP, found a ruler the UI has changed (it reminds me to do a suitable for varied demand control), but some features and rendering the same: After touching and sliding, the cursor with inertia scrolling will stay in the middle, and without scrolling with the ruler, the selected scale will only be 0.1 hour. After touching and sliding, the ruler will roll back to the nearest scale with the hour. If you slide to the right between 66.5 and 66.6 at last, it will roll back to 66.6.

Once you know the features, you want to think about how to implement them: First is to draw the scale and Numbers, here is suddenly draw all calibration method, and then by the method of sliding scrollBy () to move the picture (don’t know this system will be the ruler who is not part of the screen painting calculated, after I was combined with sliding, found very can slide smoothly, so that’s it. Now think also can deal with it). As for touch control, since WE have analyzed GestureDetector before and understood its implementation, we will try to directly rewrite onTouchEvent() and OverScroller to achieve inertial sliding together. For the scale calculation, the current scale is calculated by the slide position getScrollX(), and the ScrollX is calculated by rounding the end of the slide to the nearest 0.1 point scale. For cursor drawing, since we’re using the scrollBy() method to move the screen, we didn’t find a good way to keep the cursor from moving with the ruler, so we put a ViewGroup on the outer layer and override the dispatchDraw() method to draw here (this method executes after onDraw(), Draw here so that the scale on the ruler will not be overwritten).

The main idea is to achieve this, there are some details, such as code encapsulation these more common is not detailed, you can see the code, has written comments, welcome to teach little brother.

“Welcome to teach little brother.” High imitation to such a degree should still ask for advice, this modest attitude is not to ask for beating? Does anyone want to give him a little face-time?

Original author’s comments

To review this work, I’m joined by Mint Health’s Android engineer Loody.

Degree of reduction

99 points. One more point makes you proud.

Implementation approach

  1. Background Draw top base line + solid color background.
  2. Scale, scale including long and short and long scale under text rendering This is the most complex part of the whole tape, the tape measure has a maximum minimum boundary, so the scale of the map will be based on the maximum and minimum values, and define the minimum scale units to drawn from left to right, at the same time to ensure that the position of the currently selected the middle of the screen.
  3. Baseline draws are in the middle of the screen, can have a variety of styles, and must be drawn in order.
  4. Gesture gliding and inertial gliding monitor the gliding distance to redraw by monitoring ACTION_DOWN, ACTION_MOVE, ACTION_UP and ACTION_CANCEL events in the MotionEvent. If the events meet Fling, The OverScroller is used to calculate the speed for inertial sliding.
  5. After sliding, precise positioning is required. It must return to the nearest scale of the reference line. In the author’s words, sliding to the right between 66.5 and 66.6 will roll back to 66.6.

advantages

The whole implementation is very good, all the points are implemented, especially the precise positioning experience is very good, in terms of extendability, many custom properties are defined, and also uploaded to Maven repository for others to call.

Deficiency in

  1. Background and baseline drawing are separated from scale drawing, which is not necessary because they do not conflict with each other.
  2. On scale drawing, off-screen scales don’t have to be drawn;
  3. The small scale mode of the tape measure can be more abundant. Generally, there are 10 small scale between the two large scale, of course, there are also 2, 5 cases;
  4. The open initialization method should be richer because many times our boundary values are not fixed.

There is a lot of detail in the peppermint tape measure to achieve. Loody had to pick this one out of dozens of parodies, and to write such a detailed review, I don’t want to say anything else, except to say: hard on you. In addition, I also want to say to yan Jikai, the copywriter above: You are too bitter!

Copy write three: millet movement

The original effect:

Imitation effect:

The imitation is also very good. The author, Chen Hao, gives a serious and poignant review of the process:

I didn’t have much experience doing UI, so I was optimistic at first, but it took me five nights to finish.

I’m one of the more verbose types of programmers, so to prepare, I took down the GIFs and watched them frame by frame on my computer, and I borrowed a friend’s Mi Band to watch the actual animations (the latest version is a little different). Then write down the animation process, do not do any module planning, began to program.

When I started, I only had the idea that the animation parameters could be configured and that I wanted to create an animation state machine. The entire structure of the code was refactored several times during the writing process. After all, code is a programmer’s second face (I say), and I want to write better when I’m showing it to others. However, there were some instances of overdesign, which made the completion time much longer. For example, I saw that the rotation of the fireworks ring line is not invariable, so I designed a set of animation motion formula: this line is an ellipse arc, the center of the circle, the width and the height of the offset are random parameters, the change of d is determined by the speed of change V, the speed of change V by the external force 1. Attenuation constant force, 2. Velocity is proportional to the square of resistance, 3. Timing trigger random force decisions (play really many). As a result, the animation parameters took too long to adjust and took several iterations to stabilize.

If the writing is good, I will consider the encapsulation, maintainability, and extensibility because of the work. I think these aspects are well done.

To tell the truth, in the release of copy write draft article when I know, certainly each effect can be completed by someone, but Chen Hao’s work or let me a little surprise: you copy is too true! But after reading this review, I think I know why he writes so well.

Original author evaluation

I’m glad to have the original author of the effect, Bu Dongxu from the Xiaomi Sports team, comment on the work:

The overall evaluation

Pretty good… (originally want this four word end comments, because the imitation of the effect of the similarity is very high, and only with a GIF, in a very short time to make such an effect, really very powerful. At the same time, the comments in the code provided by the UP master are clear and canonical, making it easy to understand the implementation principle. But in the spirit of being truly responsible, let’s carp.

Details of the contrast

This dynamic effect is the effect of the mi sports app home page. The sample GIF contains two parts of the effect. One is the Mi Band connection effect, which is a jumbled bunch of white gradient circles rotating, and the starting position of the circles has a scattering particle effect. The other part is the effect after the Mi Bracelet is successfully connected, that is, several white and gradient rings with different transparencies are superimposed together, and the outermost circle’s gradient halo effect rotates around the rings. The following specific analysis and comparison of these several animation effects.

Overlay of circles

I used 8 circles on this side, each circle has a slight difference in centerX, centerY, and radius. Set its gradient with SweepGradient, from pure white to about 20% transparency white, and the Angle of each circle canvas.rotate is slightly different. Of course, all the above parameters can be adjusted arbitrarily, to achieve the uneven effect, as long as the overall effect is not outrageous. I’m using random for some of the parameters, there’s no standard here. That’s all you need to do

Effect of particle

The tricky part is the particle effect. On the one hand, the function should be realized, and on the other hand, the performance should also be satisfied. The imitation effect is a little bit of a problem in this area, one is that the radius is a little big, and then the transparency can be reduced a little bit faster, and then the effect will be better. This one is a lot of trouble to mix. This particle is created in the brightest part of the circle in the first effect, where the opacity is lowest. The exact location can be seen in the diagram.

img

The position of the particle is the position of the vertical line, that is, randomly forming the initial particle on that line. The Angle of launch is about two lines to the left. The first one is not a horizontal line. The angles of these two lines can be adjusted slowly to find the right effect. It should be noted that the Angle of particle emission needs to be carefully controlled. To be specific, the position of particle emission is not a point, but a very short line, so try not to make the extension line of particle emission intersect at a very short position, as shown in the figure

img

.

The principle of particle generator is not detailed here. I control it by regenerating a particle when the distance exceeds a certain number. Of course, it can also be controlled by the radius or transparency. Up is controlled by transparency, and that’s ok. The radius of the particles near the generator is slightly larger, and then the radius decreases. Transparency is also diminishing. Performance issues are beyond the scope of this article. Take a look at the up main code.

The ring effect

The main body of the ring is five gradual rings superplaced on top of each other. In fact, it does not count as a ring. It should be one ring and four elliptic rings. When drawing, the first gradient ring is drawn normally, and the ellipse ring behind is drawn with drawArc. Make sure that the left,right, and ‘bottom of the five rings are the same, and the top parameter is incrementing by a certain size. At the same time, it should be noted that the circle with the deepest color, that is, the ring with the lowest transparency, is drawn at the end, not the elliptical ring, so as to cover other rings with slightly higher transparency, so that the superposition effect caused by using the SweapGradient will not be seen. It feels like the subject is a whole system, and the halo is a separate system. Otherwise you can see the effect of the five rings more clearly.

Redundant effect

In fact, the overall effect, the one with a little up and down vibration is caused by the pull down and push up of the program, which does not belong to the animation effect of this section, but I did not expect to make it. (over your face. JPG)

This effect looks pretty cool, in fact, using the basic knowledge of drawing in HenCoder can be achieved, the trouble lies in the details of the adjustment, may adjust a parameter to re-run the program, or quite painful. To see the full animation, you can see it in the faux code or check it out here.

Finally was actually dongxu brothers hit me a caught off guard advertising…

Flipboard

The original effect:

Imitation effect:

This effect is extremely popular. I’ve shown this effect in a couple of previous articles or videos, but just said “I can do it with the techniques I’m teaching” without showing the actual code. Many people ask me to achieve, I have not given, for this day, let my readers to achieve, I only help you show.

The author of this imitation is called Jia Yuanbin, and the process of its imitation is reviewed as follows:

The idea to copy the “page turning effect (enhanced version)” came from an animated chestnut mentioned in The section on geometric transformation by Kai, which was very cool and greatly stimulated my curiosity.

The process of animation is actually a typical process of “finding problems, analyzing problems and solving problems”. So the general process is to deconstruct and analyze how the animation “moves”, and then to solve the problem of how to use the Android Api to achieve the “move”. By placing the GIF on the phone and taking screenshots frame by frame, and then looking at them one by one, you can see that the animation is made up of three parts: – Start animation, a 3d rotation of Y-axis -45 ° motion effect – middle animation, more complex, the right side of the picture is 3d rotation, while the 3d rotation of the “axis of rotation” plane is rotated -270 °, the left side of the picture is unchanged – end animation, a 3D rotation of 30 ° motion effect about Y-axis start and end animation is simpler, When the right half is rotated in 3D, the Canvas first rotates, then cuts, then uses the camera to perform the 3D motion effect, then saves the camera effect, and finally rotates back. Problem analysis is clear, specific to the code, take canvas and camera geometric transformation + range cutting, can be implemented.

Pit to pay attention to: When the camera performs geometric transformation, we will move the center point of the canvas to the origin, so at this time, the canvas will perform other transformations (such as range cutting), which should be calculated with the moved coordinate system. Last but not least, don’t forget to do paste correction, otherwise the image will be unreadable when it gets bigger…

Jia Yuanbin mentioned at the end of the “paste face correction” is my own word, I think good image ah, admire yourself.

In addition, I have been looking for to achieve, please at the end of the text from brother Jia’s source code.

Original author evaluation

I know this reviewer, my former colleague jianhua Duan from Flipboard, we used to sit next to each other when I was at Flipboard.

Overall comments on

The operation effect is good and the thinking is clear. Overall good.

2) Idea and implementation

  • In the readME file, the detailed implementation scheme is given and split step by step. At the same time, the theoretical analysis and some matters needing attention are given
  • Provides the implementation of setting image resources in the layout file, but also supports setting in code. Strong scalability
  • Keeping the execution implementation of the animation separate from the View makes it easy to change the configuration of the animation, such as duration and delay, without changing the code

The code quality

  • With the necessary notes, easy to understand.
  • In MainActivity, handler.postDelayed is already in the UI thread and does not need to make a runOnUiThread call
  • DegreeY and other methods were annotated using Keep, which not only solved the compiler alarm but also avoided some potential problems caused by the Proguard optimization to remove useless methods. This shows the author’s consideration.

other

  • The Flipboard Logo with the auspicious cloud icon is great
  • The alternative Google_map provides three dPI resources, +1

Improvement and perfection

  • The Javadoc of the MapView class is incorrectly written as “the whole animation is divided into three parts”, which is usually the function introduction of the class
  • The commit information for each commit needs to summarize the changes, and a simple update is not an option
  • The View is named MapView, and there may be room for further optimization
  • Repo’s naming suggestions are more relevant to the entries so that the screeners can identify them quickly and distribute them to the appropriate judges.

Read jianhua’s evaluation, my biggest feeling is, he is still so serious indeed, some very details of the place he also mentioned. Perhaps out of caution, JHF didn’t compare the copycat implementation to Flipboard’s internal code implementation. And as a former employee, I… Of course, it will not leak the source code of the former company. But I should note that jia’s implementation in the faux code, while not exactly the same as Flipboard’s internal implementation, is as efficient and readable as Flipboard’s.

As for Flipboard’s internal implementation, what exactly is it? I won’t tell you…

The best of the best

As I said in the last installment, thanks to the support of sponsor dad Insight. IO, there will be a special winner among the four winners who will get a different prize from the other three. He will get a Google Clips camera:

Vote for the winners will be through the microblogging, vote links: vote.weibo.com/poll/138417…

Links to resources

The copycat code of several copycats is linked here. IO synced from Github. It’s great to read the source code with Insight. IO.

insight.io/github.com/ About the copy writer jin-wei liu: making: github.com/arvinljw Jane books: www.jianshu.com/u/8fcc3372b…

Mint health copy: insight.io/github.com/… About jikai Yan: github: github.com/totond CSDN: blog.csdn.net/totond Email: [email protected]

Xiaomi sports copy: insight.io/github.com/ About copywriter Chen Hao: Github: github.com/SickWorm

Flipboard: insight.io/github.com/… About jia yuanbin: github: github.com/sunnyxibei weibo: weibo.com/812306989 wechat: sun521xibei personal blog: timeriver.com.cn/

About a couple of reviewers

Want to know a few reviewers, want to work with them? Look at this.

immediate

Luo Qiong gave me a very long copy, I think it is too long to give him a point to delete, but also think this copy has been super good, which sentence can not be deleted, so simply put the copy of the most important keywords extracted, attracted by these keywords can click the following link to see the details:

Keywords of instant:

Stray cat, 400 square meters, Bring Gif culture, Gym, pool table, Drone, Video game equipment, football team, Balanced ratio of men to women, Young, Free Domestic and foreign Outing twice a year, La Marzocco Coffee Maker + Volcan beans, Barista, Herman Miller ergonomic chair, Google IO & WWDC at public expense

Well, I only pulled out the keywords in the “benefits” section, because that’s what I care about most… In fact, what jike team does is more interesting, but the space is limited, so I don’t give it the opportunity to show (willful face), if you are interested, you can click the link to see the details:

www.v2ex.com/t/388064

By the way, I work in Shanghai.

Millet movement

Mr. Dongxu tactfully inserted the job advertisement at the end of the review (” Here, you can see it in the faux code or come here to see the full animation effect “). But I’m going to post their recruitment link here again to make it clear to those who need it:

www.huami.com/jobs

“Huami Technology”, another meter. How many types of rice do you think xiaomi has?

Flipboard

My old colleague Jianhua sent me this “advertisement” :

One of the targets of this imitation is the Flipboard folding effect. The Flipboard China team has now carried out the most special and biggest product upgrade in history, and launched a new product — Red Board. It will lead to more personalized content recommendations, a broader perspective on global news, and a more vibrant magazine browsing experience. Through Red Board, we want to present the world’s best quality news content in the most attractive way, and reduce the functionality of the product back to the core mission of reading: news can look good.

Well, jianhua, one of the developers, is very proud of Flipboard’s new name in China and is very keen to recommend it to everyone. As for recruitment links… Jianhua said “What recruitment link?”

Flipboard Beijing office currently has no Android job openings, so JHF is actually advertising himself (ha ha HA I wrote a good App), go hit him.

Mint health

Regarding recruitment, Loody, like JHF, told me that there was no demand at the moment, but told me that “it would be nice to mention mint health”.

A good comrade who gives and expects nothing in return. Ok, I’ll be in charge of their copywriting:

Mint health, really ah really healthy, loaded mint health, thin and healthy. Yeah

Thank you

At last, I would like to thank the four reviewers for their help. The response of this activity was much greater than I expected. It took all the reviewers one day just to review the submissions, and they also came to write some comments for me after the review. This is so hard, you guys. Thank you very much!

I would also like to thank li Chongzhe and Zhao Fuyao, co-founders of Insight. IO, for their material and technical support, which made my first online activity hosted by myself much less frantic. And, of course, to the coders who introduced me to Insight. IO (you’re everywhere).

Next up

At this point, the drawing part of HenCoder’s custom View series ends. From next, the layout part will begin. As is customary, the official leaked a little screenshot:

Layouts are also a little harder to master, in part because the technical concept is much larger than drawing, so be prepared for that. But you can still believe this: Like drawing part before, although there are a lot of people have tried through blogs, look at the document, read the source code to learn the layout of the Android (there are a lot of even tried many times), eventually ended in “it’s too hard to really learn can’t”, but as long as you follow me, after several phase of the content, you will find that the same technology, Just go to HenCoder and learn how it’s so easy.

As I said in the title and at the beginning of this article, pay attention to me and you’ll be a master. I’ve been waiting a long time to say it. Because I did.