仿掌阅实现 TabLayout 切换时的字体和 Indicator 动画

前言

最近在做的一个小说阅读 APP,打算模仿掌阅实现 TabLayout 切换时的动画效果。

首先看下掌阅的切换效果:

接下来是我的实现效果:

分析

切换动画主要有两部分组成:

  1. 字体的缩放动画:进入页面的字体逐渐放大,移除页面的字体逐渐缩小
  2. Indicator 的长度变化动画:在进行页面滑动时,Indicator 的长度由短边长再变短。以页面移出一半为分界线,前半部分 Indicator 由短变长,后半部分 Indicator 由长变短。

接下来的实现也分这两部分进行。

实现字体缩放动画

这里的重点是获取到当前页面移出屏幕和旁边页面进入屏幕的比例,我采用的方法是实现 ViewPager.PageTransformer 接口,通过里面 transformPage 方法的 position 参数获取页面移出(进入)屏幕的比例。

这里的难点是如何理解 position 参数的变化规律,怎么理解就不在这里讲了,要解释清楚需要很大篇幅,想要了解的话可以另外查资料,或者看下我写的这篇分析:ViewPager.PageTransformer 的 position 分析

具体的接口实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
* @author Feng Zhaohao
* Created on 2019/11/2
*/
public class MyPageTransformer implements ViewPager.PageTransformer {

public static final float MAX_SCALE = 1.3f;

private TabLayout mTabLayout;
@SuppressLint("UseSparseArrays")
private HashMap<Integer, Float> mLastMap = new HashMap<>();

public MyPageTransformer(TabLayout mTabLayout) {
this.mTabLayout = mTabLayout;
}

@Override
public void transformPage(@NonNull View view, float v) {
if (v > -1 && v < 1) {
int currPosition = (int) view.getTag(); // 获取当前 View 对应的索引
final float currV = Math.abs(v);
if (!mLastMap.containsKey(currPosition)) {
mLastMap.put(currPosition, currV);
return;
}
float lastV = mLastMap.get(currPosition);
// 获取当前 TabView 的 TextView
LinearLayout ll = (LinearLayout) mTabLayout.getChildAt(0);
TabLayout.TabView tb = (TabLayout.TabView) ll.getChildAt(currPosition);
View textView = tb.getTextView();

// 先判断是要变大还是变小
// 如果 currV > lastV,则为变小;如果 currV < lastV,则为变大
if (currV > lastV) {
float leavePercent = currV; // 计算离开屏幕的百分比
// 变小
textView.setScaleX(MAX_SCALE - (MAX_SCALE - 1.0f) * leavePercent);
textView.setScaleY(MAX_SCALE - (MAX_SCALE - 1.0f) * leavePercent);
} else if (currV < lastV) {
float enterPercent = 1 - currV; // 进入屏幕的百分比
// 变大
textView.setScaleX(1.0f + (MAX_SCALE - 1.0f) * enterPercent);
textView.setScaleY(1.0f + (MAX_SCALE - 1.0f) * enterPercent);
}
mLastMap.put(currPosition, currV);
}
}
}

有几点说明一下。

  1. 为了通过 View 获取到其对应的位置,在给 Fragment 创建视图的时候,给它设置一个 tag,值为它的位置索引:

    1
    2
    3
    4
    5
    6
    7
    8
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_test, null);
    view.setTag(index); // index 为该 Fragment 的位置索引

    return view;
    }
  2. 在获取当前 TabView 的 TextView 时,我通过当前位置获取到的 TabView 可以直接进行转换:

    1
    2
    LinearLayout ll = (LinearLayout) mTabLayout.getChildAt(0);
    TabLayout.TabView tb = (TabLayout.TabView) ll.getChildAt(currPosition);

如果使用官方 TabLayout,是不能这样做的,因为它内部的 TabView 不是 public,你在外界不能访问到。我这里能这样做是因为这个 TabLayout 是我拷贝官方 TabLayout 到我的项目中,并对它进行了一些修改(之所以要修改官方 TabLayout,是为了实现 Indicator 的动画效果,之后会说到)。这里只需将内部类 TabView 的访问等级修改为 public 就行了。

  1. 这里我是通过 setScaleX 和 setScaleY 方法对 TextView 进行缩放操作。

其实一开始我是直接使用 setTextSize 来进行缩放的,不过这样做的话会很发生很明显的文字抖动,所以放弃了这种做法。

后来参考一个开源库(MagicIndicator)的实现,使用 setScaleX 和 setScaleY 方法进行缩放,发现这样做效果好了很多。最终采用了这种方式实现文字的缩放。

以下是我对于这种差别的原因猜测(不知道对不对):setScaleX 和 setScaleY 内部使用 invalidate(false) 重绘视图,而 setTextSize 使用 invalidate()(即 invalidate(true))重绘视图, invalidate 方法传入的参数表示是否让此视图的缓存无效,也就是说传入 true 时不使用缓存。所以我觉得是因为 setScaleX 和 setScaleY 使用了缓存,所以效率更高,特别是进行动画时需要重绘多次,使用缓存对于效率的提高就更加明显了。

实现 Indicator 的长度变化动画

实现这个还是挺不容易的。要实现长度变化动画,你首先就要改变它的长度,但 TabLayout 并没有直接提供设置 Indicator 宽度的方法,只能通过其他方式来设置。

总的来说有这几种方法:反射实现、自定义 View、sdk28+ 属性配置、layer-list。但是这几种方法都不能实现最终的动画效果。

反射不能让 Indicator 的宽度小于文本宽度,不然会压缩文本。sdk28+ 属性配置虽然简单,但 Indicator 的宽度只能等于文本宽度。自定义 View 实现麻烦,并且很难实现动画效果。layer-list 实现简单,但缺点是 Indicator 没有动画效果。

以上方法除了自定义 View,我都一一尝试过,后来发现很难满足自己的需求。后来看到这篇文章骚操作之改造TabLayout,修改指示线宽增加切Tab过渡动画,里面讲到可以通过修改官方 TabLayout 来实现功能,受此启发,我最终通过修改官方 TabLayout 实现了 Indicator 的长度变化动画。

下面看下具体过程:

一、准备工作

  1. 导入相关类

这里我使用的是 API26 的 TabLayout。

  1. 一开始发现 Indicator 不显示,需在 xml 文件设置 Indicator 的颜色和高度

    1
    2
    3
    4
    5
    6
    <com.feng.tablayoutdemo.tablayout.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@android:color/holo_blue_light"
    app:tabIndicatorHeight="3dp" />
  2. 一些分析

TabLayout 包含一个 SlidingTabStrip,SlidingTabStrip 中包含 n 个 TabView,TabView 包含:

1
2
3
private Tab mTab;
private TextView mTextView;
private ImageView mIconView;

通过 TabView 的 update() 方法添加 mIconView 和 mTextView

TextView 不能放大到整个 tab,是因为它的父 View(TabView)默认设置了 padding。

二、让 TextView 撑满 TabView

默认情况下,TabView 是有 padding 的,所以文本之间才会有间距。但是这样会影响到我放大字体,字体放大是需要空间的,所以要在 TextView 内部设置 padding,但是由于 TabView 也有 padding,两个 padding 加起来会使得文本间距很大,很难看。所以我要取消 TabView 的 padding,让 TextView 撑满整个 TabView,然后在 TextView 内部设置 padding,留下放大的空间。

实现过程如下:

  1. 取消 TabView 默认的 padding:

    1
    2
    3
    4
            public TabView(Context context) {
    // ViewCompat.setPaddingRelative(this, mTabPaddingStart, mTabPaddingTop,
    // mTabPaddingEnd, mTabPaddingBottom);
    }
  2. 给 TabView 的 TextView 加上自己的布局:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
            final void update() {

    if (mTextView == null) {
    // TextView textView = (TextView) LayoutInflater.from(getContext())
    // .inflate(R.layout.design_layout_tab_text, this, false);
    TextView textView = (TextView) LayoutInflater.from(getContext())
    .inflate(com.feng.tabdemo.R.layout.tab_text, this, false);
    }

    }

R.layout.tab_text:

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="center"
android:maxLines="2"
android:paddingStart="10dp"
android:paddingEnd="10dp"/>

通过 paddingStartpaddingEnd 设置字体间的间距。

  1. TabView 设置了一个最小宽度,为了防止 TextView 比较短时不能撑满,把它取消掉:
    1
    2
    3
    4
    5
        private TabView createTabView(@NonNull final Tab tab) {

    // tabView.setMinimumWidth(getTabMinWidth());

    }

三、实现滑动时 Indicator 的动画效果

动画效果:当从一个页面滑向另一个页面时,Indicator 的宽度由短变长再变短。

下面简单分析下动画过程

以页面滑出一半(另一个页面进来一半)为分界线,在前半段,由短变长:

页面滑动一半时,Indicator 的宽度达到最长:

在后半段,由长变短:

实现步骤:

  1. SlidingTabStrip 的修改
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    public class SlidingTabStrip extends LinearLayout {

    // Indicator 的左右边界
    private float left;
    private float right;

    @Override
    public void draw(Canvas canvas) {
    super.draw(canvas);

    canvas.drawRect(left, getHeight() - mSelectedIndicatorHeight,
    right, getHeight(), mSelectedIndicatorPaint);
    }
    }

在 SlidingTabStrip 中增加两个变量表示 Indicator 的左右边界,并且改写它的 draw 方法,这样做是为了方便滑动监听器修改 Indicator 的左右边界。

  1. 修改 TabLayoutOnPageChangeListener 的 onPageScrolled 方法

TabLayoutOnPageChangeListener 的 onPageScrolled 方法在页面滑动时回调,可以从中知道偏移页面和页面偏移量。知道偏移量就可以重新设置 Indicator 的左右边界并进行动画重绘。具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* @param position 当前显示的第一页的索引(右侧页面进入时显示的是当前页面,左侧页面进入时显示的是左侧页面)
* @param positionOffset 取值范围 [0, 1),表示 position 页面的偏移量(在屏幕外的比例)
* @param positionOffsetPixels
*/
@Override
public void onPageScrolled(final int position, final float positionOffset,
final int positionOffsetPixels) {
// ... 原有代码不用删,保留即可

if (tabLayout == null) {
return;
}
// Indicator 的宽度占 TabView 的比例
float scale = 0.3f;

// 左滑(右侧页面进入)的第一阶段
// 以及右滑(左侧页面进入)的第二阶段
if (positionOffset > 0 && positionOffset < 0.5) {
tabLayout.mTabStrip.left = tabLayout.mTabStrip.getChildAt(position).getLeft()
+ scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
float lr = tabLayout.mTabStrip.getChildAt(position).getRight()
- scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
float rr = tabLayout.mTabStrip.getChildAt(position + 1).getRight()
- scale * tabLayout.mTabStrip.getChildAt(position + 1).getWidth();
tabLayout.mTabStrip.right = lr + (positionOffset / 0.5f) * (rr - lr);
ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
}
// 左滑(右侧页面进入)的第二阶段
// 以及右滑(左侧页面进入)的第一阶段
if (positionOffset > 0.5) {
float rr = tabLayout.mTabStrip.getChildAt(position + 1).getRight()
- scale * tabLayout.mTabStrip.getChildAt(position + 1).getWidth();
// 先确保 Indicator 滑动最右
if (tabLayout.mTabStrip.right < rr) {
tabLayout.mTabStrip.right = rr;
ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
}
float ll = tabLayout.mTabStrip.getChildAt(position).getLeft()
+ scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
float rl = tabLayout.mTabStrip.getChildAt(position + 1).getLeft()
+ scale * tabLayout.mTabStrip.getChildAt(position + 1).getWidth();
tabLayout.mTabStrip.left = ll + ((positionOffset - 0.5f) / 0.5f) * (rl - ll);
ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
}
// 滑动开始或结束
if (positionOffset == 0) {
tabLayout.mTabStrip.left = tabLayout.mTabStrip.getChildAt(position).getLeft()
+ scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
tabLayout.mTabStrip.right = tabLayout.mTabStrip.getChildAt(position).getRight()
- scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
}
}

到此为止,就实现了完整的 Indicator 动画效果。

字体的缩放动画和 Indicator 的动画是分开实现的,把它们两者合并起来就是最后的动画效果了,合并的时候并不会产生什么冲突,毕竟它们的实现原理不同,也没有什么耦合。

写在最后

实现完整的动画效果花了我三天时间,这三天包括还周末的两天,时间还是花了挺久的。不过总的来说还是值得的,因为在实现过程不断地发现问题不断地解决,学到了不少。对反射的作用有了新的理解,对 TabLayout 的布局更加清晰了,也体会到了改官方源码的快感(笑)。写这篇文章更多是为了趁刚写完把自己的理解记录下来,方便以后回看。如果能够帮助到有需要的人,那就更好了。

参考

-------------    本文到此结束  感谢您的阅读    -------------
0%