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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.