The font color of the navigation bar icon is similar to that of the WeChat main interface.

The font color of the navigation bar icon is similar to that of the main interface.
Among all the mobile products, the interface is very simple and simple. What impressed me the most on the main interface is the icon in the bottom navigation bar and the font color change. I always wanted to achieve the following, today we are free, so we have done it for the general imitators. As follows:



Analysis: the bottom is mainly divided into the icon gradient and the font color gradient. Gradient of the icon color: draws two different images through the canvas to control the alpha transparency of the image to achieve the gradient of the icon. Font color: The font color is easy to say. The animation framework of Animator should be familiar with. In the animation framework, a TypeEven is used to calculate the hexadecimal color value, we can use Animator to control the gradient of colors.
Code Description: icon: there are eight icons at the bottom, one blank and the other colored. Key code: bitmapPaint. setAlpha (255-currentAlpha); canvas. drawBitmap (normalBitmap, srcRect, dstRect, bitmapPaint); bitmapPaint. setAlpha (currentAlpha); canvas. drawBitmap (pitchBitmap, srcRect, dstRect, bitmapPaint );

That's right. Two pictures are painted at the same time. The transparency of one painting is high and low. I don't know what the real implementation method is. Haha ......
Let's talk about the implementation of the text: since all the pictures are drawn, we can also draw the text by using the simple code:If(Text! =Null) {TextPaint. setColor (textColor); canvas. drawText (text, textX, textY, textPaint );}

Easy to use. However, the font color is changed by the textColor. During each painting, the textColor value is changed by animation. Let's take a look at the Code:Private void initTextColorAnimator (){ColorAnimator = ValueAnimator. ofInt (DEFULT_TEXT_COLOR, changeColor); colorAnimator. setEvaluator (NewArgbEvaluator (); colorAnimator. addUpdateListener (NewAnimatorUpdateListener () {@ OverridePublic VoidOnAnimationUpdate (ValueAnimator animation) {textColor = (Integer) animation. getAnimatedValue (); Log. I ("bottom", textColor + "=") ;}}); colorAnimator. setDuration (100); colorAnimator. setInterpolator (NewLinearInterpolator ());}
Animation, attribute animation, and attribute animation after Android4.0 are very powerful. Any animation can be easily made.
Use colorAnimator to control the gradient of the color value. Key Point: colorAnimator. setEvaluator (NewArgbEvaluator (); To tell the Animator that it is a gradient of the color value, you need to control the change through TypeEventor. After an animation is executed, do not rush to start. There is no start here. The following code shows the progress change when sliding:Public void setProgress (float progress ){If(Progress> 100 ){Throw NewRuntimeException ("progress do not> 100");} currentAlpha = (Int) (255 * progress); colorAnimator. setCurrentPlayTime ((Long) (Progress * 100); invalidate ();}
Now, we can see that setCurrentPlayTime is used to set the color value of the textColor progress.
OK. This is the key code, which is very simple.
The complete code is as follows:
Github address: https://github.com/flyme2012/EasyWeixin Baidu Network Disk: http://pan.baidu.com/s/1c0jidZq