TabLayout 文字/图标/背景动画

最新推荐文章于 2024-07-26 21:24:56 发布

置顶

yukun314

最新推荐文章于 2024-07-26 21:24:56 发布

阅读量1k

点赞数 1

分类专栏： android android Studio 文章标签： android TabLayout 动画 TabView

本文链接：https://blog.csdn.net/yukun314/article/details/108918352

版权

这篇博客介绍了如何在TabLayout基础上添加文字、图标和背景的动画效果，包括Indicator动画、文字缩放及颜色过渡、图标大小及颜色过渡和背景颜色过渡。文章详细讲解了实现这些功能的步骤，并提供了源码链接。

摘要由CSDN通过智能技术生成

介绍

在Tablayout的基础上添加字体或图标的缩放及颜色过渡动画等。

使用的Tablayout的版本：com.google.android.material:material:1.2.1

实现效果如下：

实现功能：

1.修改Indicator动画

2.添加文字缩放及颜色过渡动画

3.添加自定义图标大小及缩放和颜色过渡动画

4.添加背景颜色过渡动画

说明：

文中所有代码块中的 //… 代表省略多行代码

准备：

从库中复制TabLayout、TabItem，TabLayoutMediator三个类到Tabs库并处理掉错误。

Tabs也是需要附加material库，这里主要是修改import和加@SuppressLint(“RestrictedApi”)注解

1.修改Indicator动画

分析下改Indicator动画的特点，在页面滑动的前一半Indicator 的宽度由短逐渐变长，滑动的后一半Indicator 的宽度再由长逐渐变短。

我们知道Indicator动画是由SlidingTabIndicator来完成的。首先分析下draw方法

@Override
    public void draw(@NonNull Canvas canvas) {
   
     //...
      // Draw the selection indicator on top of tab item backgrounds
      if (indicatorLeft >= 0 && indicatorRight > indicatorLeft) {
   
        Drawable selectedIndicator;
        //...
        selectedIndicator.setBounds(indicatorLeft, indicatorTop, indicatorRight, indicatorBottom);
        //...
        selectedIndicator.draw(canvas);
      }
	//...
    }

由此看出只要我们按需求修改indicatorLeft和indicatorRight两个成员变量的值就可以实现需要的效果了。

经过一番努力找到

1.当左右滑动时，onPageScrolled时会调用TabLayout的setScrollPosition方法

public void setScrollPosition(int position,
      float positionOffset,
      boolean updateSelectedText,
      boolean updateIndicatorPosition) {
   
    //...
    // Set the indicator position, if enabled
    if (updateIndicatorPosition) {
   
      slidingTabIndicator.setIndicatorPositionFromTabPosition(position, positionOffset);
    }
    //...
}

最终需要在updateIndicatorPosition方法中修改即可。修改如下

private void updateIndicatorPosition() {
    
    //...
    //下面注释的是原本代码
    //left = (int) (selectionOffset * nextTitleLeft + (1.0f - selectionOffset) * left);
    //right = (int) (selectionOffset * nextTitleRight + (1.0f - selectionOffset) * right);
    if (selectionOffset >=0.5){
   
        left = (int) (left + (2*(selectionOffset - 0.5f)*(nextTitleLeft - left)));
        right = right+(nextTitleRight - right);
    }else{
   
        right = (int) (right + 2*selectionOffset