仿微信主界面导航栏图标字体颜色的变化
来源:互联网 发布:200万网络摄像机一夜 编辑:程序博客网 时间:2024/06/05 10:01
在所有的移动产品中,微信的界面做的很简洁,简单,我对微信主界面影响最深的就是微信底部导航栏的图标,以及字体颜色的变化,一直都想实现以下,今天有空,就大体的模仿者做了一遍。
效果图如下:
分析:
底部主要分为图标的渐变,字体颜色的渐变。
图标的颜色的渐变:主要是通过canvas绘制两个不同的图片,控制其图片的alpha透明度,来达到图标的渐变。
字体颜色:字体颜色就很好说了,Animator动画框架应该很熟悉了,在Animator框架中,有一个TypeEven是来计算十六进制色值的,我们可以通过Animator来控制颜色的渐变。
通过代码来说明:
图标:底部一共是有八个图标,一个空白状态,一个是带颜色的状态。
关键代码:
bitmapPaint.setAlpha(255 - currentAlpha );
canvas.drawBitmap(normalBitmap, srcRect , dstRect , bitmapPaint);
bitmapPaint.setAlpha(currentAlpha );
canvas.drawBitmap(pitchBitmap, srcRect , dstRect , bitmapPaint); 没错,就是两个图片同时画,一个画的透明度高 一个低。 不知道微信真正的实现方式是啥样的。哈哈……
再说文字的实现:
既然都把图片给画出来了,就顺带把文字也给画了吧,很简单的代码:
if (text != null ) {
textPaint.setColor(textColor);
canvas.drawText(text, textX, textY, textPaint);
} 多简单。然而字体颜色的变化那,就是通过textColor的变化,在每次绘制的时候,动画改变textColor的值,看一下代码:
private void initTextColorAnimator(){
colorAnimator = ValueAnimator.ofInt(DEFULT_TEXT_COLOR,changeColor) ;
colorAnimator.setEvaluator(new ArgbEvaluator());
colorAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
textColor = (Integer) animation.getAnimatedValue();
Log.i("bottom", textColor + " = ") ;
}
});
colorAnimator.setDuration(100) ;
colorAnimator.setInterpolator(new LinearInterpolator());
Animator,属性动画,Android4.0之后的属性动画是很强大的,任何的动画都可以很方便的做出来。
通过colorAnimator来控制色值的渐变,关键点: colorAnimator.setEvaluator(new ArgbEvaluator());
要告诉Animator这个是色值的渐变,要通过TypeEventor来控制变化。
动画执行之后,不要急着去start,这里面是没有start的。
看在一点一点滑动的时候的progress的变化代码:
public void setProgress(float progress){
if (progress > 100) {
throw new RuntimeException("progress do not > 100") ;
}
currentAlpha = (int) (255 * progress) ;
colorAnimator.setCurrentPlayTime((long) (progress * 100));
invalidate();
} 这个看到了吧,通过setCurrentPlayTime来给textColor相应的进度的色值。
OK 这就是这个关键代码了,很简单的代码。
完整代码如下:
github地址: https://github.com/flyme2012/EasyWeixin
百度网盘下载地址: http://pan.baidu.com/s/1c0jidZq
0 0
- 仿微信主界面导航栏图标字体颜色的变化
- 设置Android通知栏Notification的字体/图标颜色随背景色变化而变化
- 导航栏图标背景颜色随点击发生变化
- iOS导航栏标题字体的颜色字体的大小
- 导航--状态栏和导航栏颜色变化
- 修改导航栏颜色及title的字体颜色
- 自定义导航栏字体、颜色
- js控制导航背景与字体颜色变化
- 导航栏背景颜色,字体颜色
- DataGridView的Cell的字体颜色变化
- 字符串中间一部分字体颜色的变化
- Tab栏图标和字体颜色渐变的实现
- 设置全局导航栏的title颜色和字体
- iOS:如何修改导航栏按钮或者字体的颜色
- iOS 导航栏标题字体的颜色和大小
- iOS结合导航栏的状态栏字体颜色设置
- [Object-C] 导航栏 title 字体颜色的修改
- swift设置导航栏的颜色和字体
- Tomcat部署web项目
- RNote__Reshape2
- GridView实现超链接列和图片列,跳转页面并传递参数
- ios周刊 第四期
- ckeditor和ckfinder结合使用时问题的解决办法
- 仿微信主界面导航栏图标字体颜色的变化
- 欢迎使用CSDN-markdown编辑器
- Elastic Search使用
- C++运算符重载代码分析
- Java Socket应用(三)——java中URL的应用
- pixhawk学习笔记---创建新的应用程序
- 最大流 ISAP
- dubbox+oceanus
- 随着ScrollView的滑动,渐渐的执行动画View