Android进阶：手把手教你实现高仿微信底部导航栏动画

// tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“40dp”

android:gravity=“center_horizontal”

android:orientation=“vertical”>

<FrameLayout

android:layout_width=“wrap_content”

android:layout_height=“0dp”

android:layout_weight=“1”>

<ImageView

android:id=“@+id/tab_image”

android:layout_width=“wrap_content”

android:layout_height=“match_parent” />

<ImageView

android:id=“@+id/tab_image_top”

android:layout_width=“wrap_content”

android:layout_height=“match_parent” />

<TextView

android:id=“@+id/tab_title”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textSize=“12sp” />

android:id=“@+id/tab_title"的TextView显示标题。android:id=”@+id/tab_image"的ImageView显示的是一个轮廓图片，也就是未选中时候的图片。android:id=“@+id/tab_image_top"的ImageView在android:id=”@+id/tab_image"的ImageView之上，显示的是选中时候的图片。轮廓图片和选中的图片，可以看下如下的图片例子

第一图片就是轮廓图片，第二个图片就是选中后的图片。为什么布局要这么设计呢？这当然是根据微信的动画而设计的布局(废话!)，首先默认显示的是轮廓图片，当接收到一个进度值后，会让轮廓图片的轮廓变色，当进度值超过某个阈值的时候，让轮廓图片的透明度渐渐变为0(也就是完全透明，看不见)，而让选中的图片的透明度渐渐变为255(也就是慢慢变清晰)。

TabView

既然知道了变色的原理，现在就来写TabView的代码吧。首先为TabView抽取自定义属性

// res/values/tabview_attrs.xml

<?xml version="1.0" encoding="utf-8"?>

• tabColor代表变色最终显示的颜色。

• tabImage代表默认显示的轮廓图。

• tabSelectedImage代表选中后的图。

• tabTitle代表要显示的标题。

然后，在TabView中加载布局，并且获取自定义属性

public TabView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

// 加载布局

inflate(context, R.layout.tab_layout, this);

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TabView);

for (int i = 0; i < a.getIndexCount(); i++) {

int attr = a.getIndex(i);

switch (attr) {

case R.styleable.TabView_tabColor:

// 获取标题和轮廓最终的着色

mTargetColor = a.getColor(attr, DEFAULT_TAB_TARGET_COLOR);

break;

case R.styleable.TabView_tabImage:

// 获取轮廓图

mNormalDrawable = a.getDrawable(attr);

break;

case R.styleable.TabView_tabSelectedImage:

// 获取选中图

mSelectedDrawable = a.getDrawable(attr);

break;

case R.styleable.TabView_tabTitle:

// 获取标题

mTitle = a.getString(attr);

break;

}

}

a.recycle();

}

当加载完布局后，需要为各个控件设置相应的属性

@Override

protected void onFinishInflate() {

super.onFinishInflate();

// 1.设置标题，默认着色为黑色

mTitleView = findViewById(R.id.tab_title);

mTitleView.setTextColor(DEFAULT_TAB_COLOR);

mTitleView.setText(mTitle);

// 2.设置轮廓图片，不透明，默认着色为黑色

mNormalImageView = findViewById(R.id.tab_image);

mNormalDrawable.setTint(DEFAULT_TAB_COLOR);

mNormalDrawable.setAlpha(255);

mNormalImageView.setImageDrawable(mNormalDrawable);

// 3.设置选中图片，透明，默认着色为黑色

mSelectedImageView = findViewById(R.id.tab_selected_image);

mSelectedDrawable.setAlpha(0);

mSelectedImageView.setImageDrawable(mSelectedDrawable);

}

第二步中，为轮廓图调用了Drawable.setTint()方法为轮廓着色，默认着色为黑色。

Drawable.setTint() 其实就是利用 PorterDuff.Mode.DST_IN 来进行颜色混合。

然后我还需要一个接收进度值(范围为0.f 到 1.f)的方法，从而利用这个进度值做动画

/**

• 根据进度值进行变色和透明度处理。

• @param percentage 进度值，取值[0, 1]。

*/

public void setXPercentage(float percentage) {

if (percentage < 0 || percentage > 1) {

return;

}

// 1. 颜色变换

int finalColor = evaluate(percentage, DEFAULT_TAB_COLOR, mTargetColor);

mTitleView.setTextColor(finalColor);

mNormalDrawable.setTint(finalColor);

// 2. 透明度变换

if (percentage >= 0.5 && percentage <= 1) {

// 原理如下

// 进度值: 0.5 ~ 1

// 透明度: 0 ~ 1

// 公式: percentage - 1 = (alpha - 1) * 0.5

int alpha = (int) Math.ceil(255 * ((percentage - 1) * 2 + 1));

mNormalDrawable.setAlpha(255 - alpha);

mSelectedDrawable.setAlpha(alpha);

} else {

mNormalDrawable.setAlpha(255);

mSelectedDrawable.setAlpha(0);

}

// 3. 更新UI

invalidateUI();

}

第一步是根据进度值来计算颜色值。在属性动画中，有一个ArgbEvaluator类，这是一个对颜色做动画的类，它里面有一个方法如下

public Object evaluate(float fraction, Object startValue, Object endValue) {

int startInt = (Integer) startValue;

float startA = ((startInt >> 24) & 0xff) / 255.0f;

float startR = ((startInt >> 16) & 0xff) / 255.0f;

float startG = ((startInt >> 8) & 0xff) / 255.0f;

float startB = ( startInt & 0xff) / 255.0f;

int endInt = (Integer) endValue;

float endA = ((endInt >> 24) & 0xff) / 255.0f;

float endR = ((endInt >> 16) & 0xff) / 255.0f;

float endG = ((endInt >> 8) & 0xff) / 255.0f;

float endB = ( endInt & 0xff) / 255.0f;

// convert from sRGB to linear

startR = (float) Math.pow(startR, 2.2);

startG = (float) Math.pow(startG, 2.2);

startB = (float) Math.pow(startB, 2.2);

endR = (float) Math.pow(endR, 2.2);

endG = (float) Math.pow(endG, 2.2);

endB = (float) Math.pow(endB, 2.2);

// compute the interpolated color in linear space

float a = startA + fraction * (endA - startA);

float r = startR + fraction * (endR - startR);

float g = startG + fraction * (endG - startG);

float b = startB + fraction * (endB - startB);

// convert back to sRGB in the [0…255] range

a = a * 255.0f;

r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
5491936740)]

[外链图片转存中…(img-3zP7e3nJ-1715491936741)]

[外链图片转存中…(img-elFZYTOE-1715491936742)]

[外链图片转存中…(img-9zZpYh7u-1715491936743)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！