Android自定义水波纹底部导航的实现

今天给大家带来一个自定义的底部导航，我不会做动图，只能搞一张图片给大家看看，大家见谅

这个就是自定义的tablayout底部搞好的样式了

TabLayout提供了一个水平布局用于展示tabs，继承自HorizontalScrollView。一般与Viewpager结合使用实现页面和标签联动的效果，是时下APP中非常常用的一个控件

首先我们需要创建一个类或者是模块都可以

package com.example.map.tab;
import android.content.Context;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.FragmentTabHost;
import com.example.map.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by long on 2022/5/10.
* 扩展TabHost
*/
public class XFragmentTabHost extends FragmentTabHost {
   private Context mContext;
   private List<View> mTabViews;
   private List<TabItem> mTabItems;
   // 字体激活颜色
   private int mTextActiveColor;
   private int mTextInactiveColor;
   // 字体激活大小
   private float mTextActiveSize;
   private float mTextInactiveSize;
   // 视图激活对顶部的偏移
   private int mViewActivePaddingTop;
   private int mViewInactivePaddingTop;
   // 波纹模式的前景颜色和后景颜色
   private int mFrontColor;
   private int mBehindColor;
   // TabHost模式
   private TabMode mTabMode;
   public XFragmentTabHost(Context context) {
       super(context);
       _init(context);
   }
   public XFragmentTabHost(Context context, AttributeSet attrs) {
       super(context, attrs);
       _init(context);
   }
   private void _init(Context context) {
       mTabViews = new ArrayList<>();
       mTabItems = new ArrayList<>();
       mContext = context;
       mTextActiveColor = ContextCompat.getColor(mContext, R.color.colorActive);
       mTextInactiveColor = ContextCompat.getColor(mContext, R.color.colorInactive);
       mFrontColor = ContextCompat.getColor(mContext, R.color.colorFront);
       mBehindColor = ContextCompat.getColor(mContext, R.color.colorBehind);
       mTextActiveSize = getResources().getDimension(R.dimen.tab_text_size_active);
       mTextInactiveSize = getResources().getDimension(R.dimen.tab_text_size_inactive);
       mViewActivePaddingTop = (int) getResources().getDimension(R.dimen.tab_padding_top_active);
       mViewInactivePaddingTop = (int) getResources().getDimension(R.dimen.tab_padding_top_inactive);
       mTabMode = TabMode.MoveToTop;
   }
   /**
    * 覆写父类接口，并在这里做些动画特效
    * @param index 当前选中的Tab项
    */
   @Override
   public void setCurrentTab(int index) {
       // 获取之前选中的index
       int lastIndex = getCurrentTab();
       super.setCurrentTab(index);
       // 选中不同的Tab项才做切换处理
       if (lastIndex != index) {
           _switchTab(lastIndex, index);
       }
   }
   @Override
   protected void onAttachedToWindow() {
       super.onAttachedToWindow();
       // 部分机型TabHost带有分割线，同一将分割线设为透明
       getTabWidget().setDividerDrawable(android.R.color.transparent);
   }
   /**
    * 添加TabItem
    * @param item  TabItem
    * @param fragClass fragment类名
    * @param bundle 传给fragment的参数
    */
   public void addTabItem(TabItem item, Class<?> fragClass, Bundle bundle) {
       mTabItems.add(item);
       View view = _getIndicator(item);
       mTabViews.add(view);
       this.addTab(newTabSpec(item.getTitle()).setIndicator(view), fragClass, bundle);
   }
   /**
    * 获取TabItem视图
    * @param item TabItem
    * @return
    */
   private View _getIndicator(TabItem item) {
       View view = LayoutInflater.from(mContext).inflate(R.layout.tab_indicator, null);
       ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon);
       TextView title = (TextView) view.findViewById(R.id.tab_title);
       imageView.setImageResource(item.getImageRes());
       title.setText(item.getTitle());
       title.setTextColor(mTextInactiveColor);
       return view;
   }
   /**
    * 切换Tab
    * @param lastIndex 上一个选中索引
    * @param nextIndex 下一个选中索引
    */
   private void _switchTab(int lastIndex, int nextIndex) {
       for (int i = 0; i < mTabViews.size(); i++) {
           if (i == lastIndex) {
               _switchView(i, false);
           } else if (i == nextIndex) {
               _switchView(i, true);
           }
       }
   }
   /**
    * 切换视图
    * @param index 索引
    * @param isActivated 是否激活
    */
   private void _switchView(int index, boolean isActivated) {
       switch (mTabMode) {
           case MoveToTop:
               _doMoveToTop(index, isActivated);
               break;
           case ClipDrawable:
               _doClipDrawable(index, isActivated);
               break;
           case Ripple:
               _doRipple(index, isActivated);
               break;
       }
   }
   /**
    * 背景展开处理
    * @param index 索引
    * @param isActivated 是否激活
    */
   private void _doClipDrawable(int index, boolean isActivated) {
       View view = mTabViews.get(index);
       View tabView = view.findViewById(R.id.tab_layout);
       if (isActivated) {
           TabAnimHelper.clipDrawable(tabView, mTabItems.get(index).getDrawable(), true);
       } else {
           TabAnimHelper.clipDrawable(tabView, mTabItems.get(index).getDrawable(), false);
       }
   }
   /**
    * 波纹处理
    * @param index 索引
    * @param isActivated 是否激活
    */
   private void _doRipple(int index, boolean isActivated) {
       View view = mTabViews.get(index);
       View tabView = view.findViewById(R.id.tab_layout);
       TextView title = (TextView) view.findViewById(R.id.tab_title);
       if (index == 0) {
           TabAnimHelper.rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_LEFT, isActivated);
       } else if (index == (mTabViews.size() - 1)){
           TabAnimHelper.rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_RIGHT, isActivated);
       } else {
           TabAnimHelper.rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_MIDDLE, isActivated);
       }
       if (isActivated) {
           title.setTextColor(mTextActiveColor);
       } else {
           title.setTextColor(mTextInactiveColor);
       }
   }
   /**
    * 上移动画处理
    * @param index 索引
    * @param isActivated 是否激活
    */
   private void _doMoveToTop(int index, boolean isActivated) {
       View view = mTabViews.get(index);
       TextView title = (TextView) view.findViewById(R.id.tab_title);
       ImageView icon = (ImageView) view.findViewById(R.id.tab_icon);
       if (isActivated) {
           TabAnimHelper.changeTextColor(title, mTextInactiveColor, mTextActiveColor);
           TabAnimHelper.changeTextSize(title, mTextInactiveSize, mTextActiveSize);
           TabAnimHelper.changeTopPadding(view, mViewInactivePaddingTop, mViewActivePaddingTop);
           TabAnimHelper.changeImageSize(icon, 1.0f, 1.1f);
       } else {
           TabAnimHelper.changeTextColor(title, mTextActiveColor, mTextInactiveColor);
           TabAnimHelper.changeTextSize(title, mTextActiveSize, mTextInactiveSize);
           TabAnimHelper.changeTopPadding(view, mViewActivePaddingTop, mViewInactivePaddingTop);
           TabAnimHelper.changeImageSize(icon, 1.1f, 1.0f);
       }
   }
   /**
    * 属性设置
    * @return
    */
   public int getTextActiveColor() {
       return mTextActiveColor;
   }
   public void setTextActiveColor(int textActiveColor) {
       mTextActiveColor = textActiveColor;
   }
   public int getTextInactiveColor() {
       return mTextInactiveColor;
   }
   public void setTextInactiveColor(int textInactiveColor) {
       mTextInactiveColor = textInactiveColor;
   }
   public int getFrontColor() {
       return mFrontColor;
   }
   public void setFrontColor(int frontColor) {
       mFrontColor = frontColor;
   }
   public int getBehindColor() {
       return mBehindColor;
   }
   public void setBehindColor(int behindColor) {
       mBehindColor = behindColor;
   }
   public TabMode getTabMode() {
       return mTabMode;
   }
   public void setTabMode(TabMode tabMode) {
       mTabMode = tabMode;
   }
   /**
    * Tab的模式
    * MoveToTop：向上偏移
    * Ripple：波纹
    * ClipDrawable：逐步展示背景
    */
   public enum TabMode {
       MoveToTop(1),
       Ripple(2),
       ClipDrawable(3);
       private int tabMode;
       TabMode(int tabMode) {
           this.tabMode = tabMode;
       }
       public int getTabMode() {
           return tabMode;
       }
   }
}

然后在res下的value中的color中加入以下颜色

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#3F51B5</color>
   <color name="colorPrimaryDark">#303F9F</color>
   <color name="colorAccent">#FF4081</color>
   <color name="black">#000000</color>
   <color name="white">#FFFFFF</color>
   <color name="custcolor">#FBD794</color>
   <color name="translate">#00000000</color>
   <color name="trans">#70000000</color>
   <color name="white_trans">#99ffffff</color>
   <color name="ef">#efefef</color>
   <color name="c4">#333333</color>
   <color name="c9">#999999</color>
   <color name="coloritem">#cccccc</color>
   <color name="black_bg">#66333333</color>
   <color name="c1">#111111</color>
   <color name="c6">#666666</color>
   <color name="c5">#eeeeee</color>
   <color name="c2">#ff6700</color>
   <color name="cfcc">#cccccc</color>
   <color name="app_color_f6">#f6f6f6</color>
   <color name="btn_not_click_color">#a8a8a8</color>
   <color name="btn_click_color">#dc5900</color>
   <color name="c7">#171717</color>
   <color name="c3">#cccccc</color>
   <color name="c33">#333333</color>
   <color name="test_blue">#338BFF</color>
   <color name="red1">#f94244</color>
   <color name="green1">#45cdd5</color>
   <color name="blue">#5e8cef</color>
   <color name="blue1">#4980f6</color>
   <color name="c_c1e4ff">#c1e4ff</color>
   <color name="c_eff4f8">#eff4f8</color>
   <color name="e5">#e5e5e5</color>
   <color name="f6">#f6f6f6</color>
   <color name="red_normal">#FF0000</color>
   <color name="red_pressed">#FF6666</color>
   <color name="blue_bg">#e6fffe</color>
   <color name="blue_text">#00e8df</color>
   <color name="org_bg">#ffefe5</color>
   <color name="green_bg">#e6fff2</color>
   <color name="green_text">#01e48c</color>
   <color name="red_bg">#ffeeee</color>
   <color name="red_text">#ff1901</color>
   <color name="org1">#fff4ea</color>
   <color name="org2">#ffa96e</color>
   <color name="org3">#ff8430</color>
   <color name="org4">#ff9d5c</color>
   <color name="org5">#ff802c</color>
   <color name="org6">#f2c279</color>
   <color name="org7">#fcf1ea</color>
   <color name="org8">#fed2c0</color>
   <color name="org9">#ffece5</color>
   <color name="green2">#68ffc4</color>
   <color name="green">#31c088</color>
   <color name="blue2_trans">#587ed6ff</color>
   <color name="blue2">#7ed6ff</color>
   <color name="blue3">#75fff7</color>
   <color name="blue5">#2d9ef5</color>
   <color name="photopicker_background">#181819</color>
   <color name="color1">#00a6b6</color>
   <color name="c99">#282e35</color>
   <!-- QR_Code -->
   <color name="viewfinder_mask">#60000000</color>
   <color name="result_view">#b0000000</color>
   <color name="possible_result_points">#c0ffff00</color>
   <color name="result_image_border">#ffffffff</color>
   <color name="result_minor_text">#ffc0c0c0</color>
   <color name="result_points">#c000ff00</color>
   <color name="system_bar_color">#fed952</color>
   <color name="red">#eb2127</color>
   <color name="c_red">#ff4200</color>
   <color name="red3">#f03030</color>
   <color name="c_f8">#f8f8f8</color>
   <color name="c_yellow">#daba7f</color>
   <color name="c_85">#858585</color>
   <color name="c_b2">#b2b2b2</color>
   <color name="c_light_purple">#58ffc8d1</color>
   <color name="c_purple">#ff6e6b</color>
   <color name="c_agent_position">#97a8bc</color>
   <color name="c_agent_name">#143660</color>
   <color name="c_44db09">#44db09</color>
   <color name="c_75">#757575</color>
   <color name="c_f5">#f5f5f5</color>
   <color name="c_76">#767676</color>
   <color name="c_d1">#d1d1d1</color>
   <color name="c_d2">#d2d2d2</color>
   <color name="c_d3">#d3d3d3</color>
   <color name="c_yellow3">#ffba16</color>
   <color name="c_mei_red">#f73954</color>
   <color name="yellow">#ffbd0a</color>
   <color name="org">#ff6600</color>
   <color name="org_trans">#fff6f3</color>
   <color name="c_d">#dddddd</color>
   <color name="c_e0">#e0e0e0</color>
   <color name="red7">#f70c38</color>
   <color name="green7">#47b81b</color>
   <color name="deal_bg">#38c595</color>
   <color name="f1">#f1f1f1</color>
   <color name="f5">#f5f5f5</color>
   <color name="c_3c5c8c">#3c5c8c</color>
   <color name="cus_phone_color">#094691</color>
   <color name="cus_follow_record_item_name_color">#002553</color>
   <color name="praise_item_default">#333333</color>
   <color name="praise_item_selector_default">#cccccc</color>
   <color name="default_clickable_color">#cccccc</color>
   <color name="praise_item">#8290AF</color>
   <color name="im_font_color_text_hint">#abb1b6</color>
   <color name="ffd1c0">#ffd1c0</color>
   <color name="fdf0eb">#fdf0eb</color>
   <color name="e4e9ec">#e4e9ec</color>
   <color name="d3">#d3d3d3</color>
   <color name="ffae00">#ffae00</color>
   <color name="e9eef3">#e9eef3</color>
   <color name="ecf0f4">#ECF0F4</color>
   <color name="ac677">#1ac677</color>
   <color name="ecf1f7">#ECF1F7</color>
   <color name="cace6">#3cace6</color>
   <color name="d282">#35d282</color>
   <color name="ff2a00">#ff2a00</color>
   <!-- 其它背景色或分割线相关 -->
   <color name="bg_content">#f3f3f3</color>
   <color name="divider_line">#d9d9d9</color>
   <!-- 字体色 -->
   <color name="text_title">#1b1b1b</color>
   <color name="text_content">#818181</color>
   <color name="text_sub">#919191</color>
   <color name="text_hint">#c7c7c7</color>
   <color name="text_black">#404040</color>
   <color name="main_tab_bg">#fcfcfc</color>
   <color name="black_need">#333333</color>
   <color name="orange_need">#f0420c</color>
   <color name="gray_need">#BEC0C1</color>
   <color name="dialog_content_textcolor">#909090</color>
   <color name="reply_text_color">#666666</color>
   <color name="contents_text">#ff000000</color>
   <color name="encode_view">#ffffffff</color>
   <color name="help_button_view">#ffcccccc</color>
   <color name="help_view">#ff404040</color>
   <color name="result_text">#ffffffff</color>
   <color name="sbc_header_text">#ff808080</color>
   <color name="sbc_header_view">#ffffffff</color>
   <color name="sbc_list_item">#fffff0e0</color>
   <color name="sbc_layout_view">#ffffffff</color>
   <color name="sbc_page_number_text">#ff000000</color>
   <color name="sbc_snippet_text">#ff4b4b4b</color>
   <color name="share_text">#ff000000</color>
   <color name="share_view">#ffffffff</color>
   <color name="status_view">#50000000</color>
   <color name="status_text">#ffffffff</color>
   <color name="transparent">#00000000</color>
   <color name="viewfinder_frame">#ff000000</color>
   <color name="viewfinder_laser">#ffff0000</color>
   <!-- 画TextView横线颜色 -->
   <color name="draw_line_color">#D4D4D4</color>
   <!-- 侧边仿通讯录26字母列表颜色 -->
   <color name="addresslist_textcolor">#A9A9A9</color>
   <color name="car_select_second_child">#999999</color>
   <color name="car_select_second_group_child_bg">#e1e1e1</color>
   <color name="map_poi_list_bg">#d3d3d3</color>
   <!-- 下拉PopupWindow -->
   <color name="pulldown_popupwindow_bg">#5191F2</color>
   <color name="butten_green">#1AAC19</color>
   <color name="check_butten_green">#19ad19</color>
   <color name="title1">#4a4a4a</color>
   <color name="title2">#a2a2a2</color>
   <color name="line">#d1d1d1</color>
   <color name="c_00c679">#00c679</color>
   <color name="F5F6F8">#F5F6F8</color>
   <color name="c65">#656565</color>
   <color name="fff0e5">#FFF0E5</color>
   <color name="f0f1f2">#F0F1F2</color>
   <color name="c7c9d1">#C7C9D1</color>
   <color name="f5f6f8">#f5f6f8</color>
   <color name="fd3341">#fd3341</color>
   <color name="dce1e5">#dce1e5</color>
   <color name="c_9498a4">#9498a4</color>
   <color name="c_202741">#202741</color>
   <color name="c_444861">#444861</color>
   <color name="c_e8">#e8e8e8</color>
   <color name="ff8963">#FF8963</color>
   <color name="c_2a3038">#2a3038</color>
   <color name="c_939">#9398AE</color>
   <color name="c_00a">#00A7FF</color>
   <color name="c_5c6166">#5c6166</color>
   <color name="c_e4e5e6">#e4e5e6</color>
   <color name="c_ffb452">#ffb452</color>
   <color name="c_ff7252">#ff7252</color>
   <color name="c8898A6">#8898A6</color>
   <color name="acb0b9">#ACB0B9</color>
   <color name="caccd0">#CACCD0</color>
   <color name="c_f0f1f3">#f0f1f3</color>
   <color name="eda95b40">#eda95b40</color>
   <color name="c_3257c5">#3257c5</color>
   <color name="c_9d9da3">#9d9da3</color>
   <color name="c_d7d8dc">#d7d8dc</color>
   <color name="c4c6cc">#c4c6cc</color>
   <color name="cdcfd5">#cdcfd5</color>
   <color name="d2d4d9">#d2d4d9</color>
   <color name="c_939499">#939499</color>
   <color name="c_616366">#616366</color>
   <color name="dc">#dcdcdc</color>
   <color name="cc0042ff">#cc0042ff</color>
   <color name="c_97a0ab">#97a0ab</color>
   <color name="ebba8f">#ebba8f</color>
   <color name="a86010">#a86010</color>
   <color name="colorActive">#00BCD4</color>
   <color name="colorInactive">#d2d0d1</color>
   <color name="colorFront">#4db6ac</color>
   <color name="colorBehind">#84ffff</color>
</resources>

然后是我们的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:id="@+id/tab_layout"
   android:layout_width="match_parent"
   android:layout_height="@dimen/tab_height"
   android:minWidth="@dimen/tab_min_width"
   android:paddingTop="@dimen/tab_padding_top_inactive"
   android:paddingBottom="@dimen/tab_padding_bottom"
   android:background="?selectableItemBackgroundBorderless">
   <ImageView
       android:id="@+id/tab_icon"
       android:layout_width="@dimen/tab_icon"
       android:layout_height="@dimen/tab_icon"
       android:layout_gravity="center_horizontal"/>
   <TextView
       android:id="@+id/tab_title"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal"
       android:lines="1"
       android:text="首页"
       android:textColor="@color/colorInactive"
       android:textSize="@dimen/tab_text_size_inactive"/>
</LinearLayout>

布局中呢会有一些图片这个图片的话就自己搞吧然后在res文件下创建一个dimen

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="tab_elevation">8dp</dimen>
   <dimen name="tab_shadow_height">3dp</dimen>
   <dimen name="tab_shadow_height_without_colored_background">4dp</dimen>
   <dimen name="tab_min_width">104dp</dimen>
   <dimen name="tab_max_width">168dp</dimen>
   <dimen name="tab_height">56dp</dimen>
   <dimen name="tab_line_width">1dp</dimen>
   <dimen name="tab_icon">24dp</dimen>
   <dimen name="tab_padding_top_active">3dp</dimen>
   <dimen name="tab_padding_top_inactive">6dp</dimen>
   <dimen name="tab_padding_top_inactive_without_text">16dp</dimen>
   <dimen name="tab_padding_bottom">3dp</dimen>
   <dimen name="tab_padding_left">12dp</dimen>
   <dimen name="tab_padding_right">12dp</dimen>
   <dimen name="tab_text_size_active">14sp</dimen>
   <dimen name="tab_text_size_inactive">12sp</dimen>
</resources>

我们的底部导航的样式就搞完了，接下里就是我们的动画效果写一个自定义Drawable

package com.example.map.tab;
import android.animation.ValueAnimator;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
/**
* Created by long on 2022/5/10.
* 波纹Drawable
*/
public class RippleDrawable extends Drawable implements Animatable {
   /**
    * 3种模式：左边、中间和右边波纹
    */
   public static final int MODE_LEFT = 1;
   public static final int MODE_MIDDLE = 2;
   public static final int MODE_RIGHT = 3;
   private int mMode = MODE_MIDDLE;
   // 前景色和后景色画笔
   private Paint mPaintFront;
   private Paint mPaintBehind;
   // 用来绘制扇形的矩形框
   private RectF mRect;
   // 目标View的宽高的一半
   private int mHalfWidth;
   private int mHalfHeight;
   // 扩散半径
   private int mRadius;
   // 前景色和背景色的分割距离
   private int mDivideSpace;
   // 扩散满视图需要的距离，中点到斜角的距离
   private int mFullSpace;
   // 动画控制
   private ValueAnimator mValueAnimator;
   public RippleDrawable(int frontColor, int behindColor, int mode) {
       mPaintFront = new Paint(Paint.ANTI_ALIAS_FLAG);
       mPaintFront.setColor(frontColor);
       mPaintBehind = new Paint(Paint.ANTI_ALIAS_FLAG);
       mPaintBehind.setColor(behindColor);
       mRect = new RectF();
       mMode = mode;
   }
   @Override
   public void draw(Canvas canvas) {
       if (mRadius > mHalfWidth) {
           int count = canvas.save();
           canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth, mPaintBehind);
           canvas.restoreToCount(count);
           count = canvas.save();
           canvas.drawCircle(mHalfWidth, mHalfHeight, mDivideSpace, mPaintFront);
           canvas.restoreToCount(count);
       } else if (mRadius > mDivideSpace) {
           int count = canvas.save();
           canvas.drawCircle(mHalfWidth, mHalfHeight, mRadius, mPaintBehind);
           canvas.restoreToCount(count);
           count = canvas.save();
           canvas.drawCircle(mHalfWidth, mHalfHeight, mDivideSpace, mPaintFront);
           canvas.restoreToCount(count);
       } else {
           canvas.drawCircle(mHalfWidth, mHalfHeight, mRadius, mPaintFront);
       }
       // 左右两边才进行扇形绘制
       if (mMode != MODE_MIDDLE) {
           mRect.left = mHalfWidth - mRadius;
           mRect.right = mHalfWidth + mRadius;
           mRect.top = mHalfHeight - mRadius;
           mRect.bottom = mHalfHeight + mRadius;
       }
       if (mMode == MODE_LEFT) {
           canvas.drawArc(mRect, 90, 180, true, mPaintFront);
       } else if (mMode == MODE_RIGHT) {
           canvas.drawArc(mRect, -90, 180, true, mPaintFront);
       }
   }
   @Override
   public void setAlpha(int alpha) {
   }
   @Override
   public void setColorFilter(ColorFilter colorFilter) {
   }
   @Override
   public int getOpacity() {
       return PixelFormat.RGBA_8888;
   }
   @Override
   protected void onBoundsChange(Rect bounds) {
       super.onBoundsChange(bounds);
       mHalfHeight = (bounds.bottom - bounds.top) / 2;
       mHalfWidth = (bounds.right - bounds.left) / 2;
       mDivideSpace = Math.max(mHalfHeight, mHalfWidth) * 3 / 4;
       mFullSpace = (int) Math.sqrt(mHalfWidth * mHalfWidth + mHalfHeight * mHalfHeight);
       // 属性动画
       mValueAnimator = ValueAnimator.ofInt(0, mFullSpace);
       mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator animation) {
               mRadius = (int) animation.getAnimatedValue();
               invalidateSelf();
           }
       });
       mValueAnimator.setDuration(200);
       start();
   }
   @Override
   public void start() {
       mValueAnimator.start();
   }
   @Override
   public void stop() {
       mValueAnimator.end();
   }
   @Override
   public boolean isRunning() {
       return mValueAnimator != null && mValueAnimator.isRunning();
   }
}

然后创建我们的TabFragment

package com.example.map.tab;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.example.map.R;
/**
* Created by long on 2022/5/10.
*/
public class TabFragment extends Fragment {
   public static final String FRAG_KEY = "FragKey";
   private TextView mFragTabText;
   private void assignViews(View view) {
       mFragTabText = (TextView) view.findViewById(R.id.frag_tab_text);
   }
   @Nullable
   @Override
   public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
       View view = inflater.inflate(R.layout.fragment_tab, null);
       assignViews(view);
       return view;
   }
   @Override
   public void onActivityCreated(@Nullable Bundle savedInstanceState) {
       super.onActivityCreated(savedInstanceState);
       if (getArguments() != null) {
           String title = getArguments().getString(FRAG_KEY);
           mFragTabText.setText(title);
       }
   }
}

然后创建一个动画的帮助类

package com.example.map.tab;
import android.animation.AnimatorSet;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
/**
* Created by long on 2022/5/10.
* Tab动画帮助类
*/
public class TabAnimHelper {
   /**
    * 改变Tab的顶部偏移
    * @param view
    * @param fromPadding
    * @param toPadding
    */
   public static void changeTopPadding(final View view, int fromPadding, int toPadding) {
       ValueAnimator animator = ValueAnimator.ofFloat(fromPadding, toPadding);
       animator.setDuration(150);
       animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator valueAnimator) {
               float animatedValue = (float) valueAnimator.getAnimatedValue();
               view.setPadding(view.getPaddingLeft(),
                       (int) animatedValue,
                       view.getPaddingRight(),
                       view.getPaddingBottom());
           }
       });
       animator.start();
   }
   /**
    * 改变字体大小
    * @param textView
    * @param from
    * @param to
    */
   public static void changeTextSize(final TextView textView, float from, float to) {
       ValueAnimator textSizeChangeAnimator = ValueAnimator.ofFloat(from, to);
       textSizeChangeAnimator.setDuration(150);
       textSizeChangeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator valueAnimator) {
               textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, (float) valueAnimator.getAnimatedValue());
           }
       });
       textSizeChangeAnimator.start();
   }
   /**
    * 改变字体颜色
    * @param textView
    * @param fromColor
    * @param toColor
    */
   public static void changeTextColor(final TextView textView, int fromColor, int toColor) {
       ValueAnimator changeTextColorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), fromColor, toColor);
       changeTextColorAnimation.setDuration(150);
       changeTextColorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator animator) {
               textView.setTextColor((Integer) animator.getAnimatedValue());
           }
       });
       changeTextColorAnimation.start();
   }
   /**
    * 改变视图大小
    * @param image
    * @param fromScale
    * @param toScale
    */
   public static void changeImageSize(ImageView image, float fromScale, float toScale) {
       ObjectAnimator scaleX;
       ObjectAnimator scaleY;
       scaleX = ObjectAnimator.ofFloat(image, "scaleX", fromScale, toScale);
       scaleY = ObjectAnimator.ofFloat(image, "scaleY", fromScale, toScale);
       AnimatorSet set = new AnimatorSet();
       set.setDuration(150);
       set.playTogether(scaleX, scaleY);
       set.start();
   }
   /**
    * 从中心展开Drawable
    * @param image
    * @param drawable
    * @param isActivated
    */
   @SuppressWarnings("deprecation")
   public static void clipDrawable(final View image, Drawable drawable, boolean isActivated) {
       if (drawable == null) {
           return;
       }
       if (isActivated) {
           final ClipDrawable scaleDrawable = new ClipDrawable(drawable, Gravity.CENTER,
                   ClipDrawable.HORIZONTAL | ClipDrawable.VERTICAL);
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
               image.setBackground(scaleDrawable);
           } else {
               image.setBackgroundDrawable(scaleDrawable);
           }
           image.setBackgroundDrawable(scaleDrawable);
           ValueAnimator animator = ValueAnimator.ofInt(0, 10000);
           animator.setDuration(200);
           animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
               @Override
               public void onAnimationUpdate(ValueAnimator animation) {
                   scaleDrawable.setLevel((Integer) animation.getAnimatedValue());
               }
           });
           animator.start();
       } else {
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
               image.setBackground(null);
           } else {
               image.setBackgroundDrawable(null);
           }
       }
   }
   /**
    * 波纹动画
    * @param view
    * @param frontColor
    * @param behindColor
    * @param mode
    * @param isActivated
    */
   @SuppressWarnings("deprecation")
   public static void rippleDrawable(final View view, int frontColor, int behindColor, int mode, boolean isActivated) {
       if (isActivated) {
           RippleDrawable rippleDrawable = new RippleDrawable(frontColor, behindColor, mode);
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
               view.setBackground(rippleDrawable);
           } else {
               view.setBackgroundDrawable(rippleDrawable);
           }
       } else {
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
               view.setBackground(null);
           } else {
               view.setBackgroundDrawable(null);
           }
       }
   }
}

还有一个item的实体类

package com.example.map.tab;
import android.graphics.drawable.Drawable;
/**
* Created by long on 2022/5/10.
* Tab项
*/
public class TabItem {
   private String title;
   private Drawable drawable;
   private int imageRes;
   public TabItem(String title, Drawable drawable, int imageRes) {
       this.title = title;
       this.drawable = drawable;
       this.imageRes = imageRes;
   }
   public TabItem(String title, int imageRes) {
       this.title = title;
       this.drawable = null;
       this.imageRes = imageRes;
   }
   public String getTitle() {
       return title;
   }
   public void setTitle(String title) {
       this.title = title;
   }
   public Drawable getDrawable() {
       return drawable;
   }
   public void setDrawable(Drawable drawable) {
       this.drawable = drawable;
   }
   public int getImageRes() {
       return imageRes;
   }
   public void setImageRes(int imageRes) {
       this.imageRes = imageRes;
   }
}

然后在我们的Activity中进行一个引用，首先在是我们Activity的一个布局

<?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="match_parent"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical">
   <FrameLayout
       android:id="@+id/relate_tab_content"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1" />
   <TextView
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:background="@drawable/shadow" />
   <com.example.map.tab.XFragmentTabHost
       android:id="@android:id/tabhost"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <FrameLayout
           android:id="@android:id/tabcontent"
           android:layout_width="0dp"
           android:layout_height="0dp" />
   </com.example.map.tab.XFragmentTabHost>
</LinearLayout>

然后在我们的Activity中进行一个应用控件

package com.example.map.ui.activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.bumptech.glide.Glide;
import com.bumptech.glide.RequestBuilder;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
import com.example.map.api.ApiService;
import com.example.map.base.GlideImageLoader;
import com.example.map.bean.WallPaperResponse;
import com.example.map.ui.fragment.Fragment1;
import com.example.map.ui.fragment.Fragment2;
import com.example.map.ui.fragment.Fragment3;
import com.example.map.ui.fragment.Fragment4;
import com.example.map.ui.fragment.Fragment5;
import com.example.map.R;
import com.example.map.tab.TabFragment;
import com.example.map.tab.TabItem;
import com.example.map.tab.XFragmentTabHost;
import com.llw.network.NetworkApi;
import com.llw.network.observer.BaseObserver;
import com.llw.network.utils.KLog;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class QihooActivity extends AppCompatActivity {
   private XFragmentTabHost mTabHost;
   //底部导航的名称
   String[] mTabTitle = new String[]{"首页", "游戏", "软件", "应用圈", "管理"};
   //文字上的图片
   int[] mImageResId = new int[]{R.drawable.sel_360_home, R.drawable.sel_360_game, R.drawable.sel_360_software,
           R.drawable.sel_360_app, R.drawable.sel_360_mag};
   //创建的几个fragment
   Class[] mFragClass = new Class[]{Fragment1.class, Fragment2.class,
           Fragment3.class, Fragment4.class, Fragment5.class};
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_qihoo);
       initTabHost();
   }
   private void initTabHost() {
       mTabHost = (XFragmentTabHost) findViewById(android.R.id.tabhost);
       mTabHost.setup(this, getSupportFragmentManager(), R.id.relate_tab_content);
       mTabHost.setTabMode(XFragmentTabHost.TabMode.Ripple);
       mTabHost.setTextActiveColor(Color.WHITE);
       mTabHost.setTextInactiveColor(Color.GRAY);
//        mTabHost.setFrontColor(Color.RED);
//        mTabHost.setBehindColor(Color.GREEN);
       for (int i = 0; i < mFragClass.length; i++) {
           Bundle bundle = new Bundle();
           bundle.putString(TabFragment.FRAG_KEY, mTabTitle[i]);
           mTabHost.addTabItem(new TabItem(mTabTitle[i], mImageResId[i]),
                   mFragClass[i], bundle);
       }
   }
}

这样我们的一个自定义的水波纹动画的底部导航就完成了

来源：https://blog.csdn.net/weixin_53760974/article/details/124692887