android高仿微信底部导航栏

最新推荐文章于 2025-07-01 12:32:18 发布

qq_33408235

最新推荐文章于 2025-07-01 12:32:18 发布

阅读量7.5k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： android 文章标签： imageview 导航图片微信 textview

本文链接：https://blog.youkuaiyun.com/qq_33408235/article/details/71429783

这篇博客介绍了如何在Android中实现类似微信底部导航栏的渐变效果，主要利用ArgbEvaluator进行颜色渐变，并自定义ImageView处理图片的透明度渐变。代码简单易懂，适合新手学习，可以直接应用于项目中。文章附带了源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天在公司没什么工作,闲来没事写了一下关于微信底部渐变的导航,textview 是利用 ArgbEvaluator 实现颜色渐变的效果,图片渐变是自定义imageview 来设置透明度进行渐变的

本代码与其他实现的优越性:

代码简单
容易看懂,对新手来说不是问题
直接可以copy到自己的项目中使用

首先看一下效果图

先了解一下ArgbEvaluator的使用,ArgbEvaluator俗称颜色计算器,举个栗子

 float percentage = (float)i/100; //这个就是根据百分比来计算出颜色
 ArgbEvaluator argb = new ArgbEvaluator();
 int  color = (int)argb.evaluate(percentage, Color.parseColor("#ffffff"),Color.parseColor("#000000"));
 findViewById(R.id.tv_simple).setBackgroundColor(color);

此栗子:当percentage为0的时候:color为纯白色,当percentage为1的时候:color为纯黑色, 当percentage从0-1变化的时候,颜色会从白色到黑色逐渐的变化

先看一自定义控件自定义imageView 不用再xml中设置src或者backgroud

在setImages的时候就会传入两张图片, 一个是正常的,一个是选中状态下的图片. 实际上就是在此imageview上面画图片
在 transformPage的时候,就会根据offset(偏移量)的大小来设置透明度,从而效果为渐变.

public class MyImageView extends ImageView {

private Paint mPaint;
private Bitmap mSelectedIcon;
private Bitmap mNormalIcon;
private Rect mSelectedRect;
private Rect mNormalRect;
private int mSelectedAlpha = 0;

public MyImageView(Context context) {
    super(context);
}

public MyImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

public final void setImages(int normal, int selected) {
    this.mNormalIcon = createBitmap(normal);                            // 拿到原图
    this.mSelectedIcon = createBitmap(selected);
    int width = (int)getResources().getDimension(R.dimen.tab_image_weith);
    int heigh = (int)getResources().getDimension(R.dimen.tab_image_heigh);
    this.mNormalRect = new Rect(0, 0, width, heigh);                   //拿到画板的大小 也就是此控件的大小
    this.mSelectedRect = new Rect(0, 0, width, heigh);
    this.mPaint = new Paint();                                         // 拿到画笔
}

private Bitmap createBitmap(int resId) {
    return BitmapFactory.decodeResource(getResources(), resId);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (this.mPaint == null) {
        return;
    }
    this.mPaint.setAlph