SmartTabLayout实现标签栏滚动动画：视差效果设计-优快云博客

SmartTabLayout实现标签栏滚动动画：视差效果设计

【免费下载链接】SmartTabLayout A custom ViewPager title strip which gives continuous feedback to the user when scrolling 项目地址: https://gitcode.com/gh_mirrors/smar/SmartTabLayout

痛点与解决方案

你是否曾为Android应用中标签栏滚动生硬、缺乏反馈而困扰？用户滑动页面时，标签栏若不能提供流畅过渡，会严重影响体验。SmartTabLayout通过自定义ViewPager标题栏，实现滚动时的连续视觉反馈，完美解决这一问题。本文将详解如何利用其视差效果设计，打造丝滑标签切换动画。

核心原理：动态边缘计算

SmartTabLayout的视差效果源于对滚动偏移值的精确计算。其核心实现位于SmartTabIndicationInterpolator.java，通过左右边缘不同的插值器实现非对称动画：

// SmartIndicationInterpolator核心实现
@Override
public float getLeftEdge(float offset) {
  return leftEdgeInterpolator.getInterpolation(offset); // 加速插值
}

@Override
public float getRightEdge(float offset) {
  return rightEdgeInterpolator.getInterpolation(offset); // 减速插值
}

动画效果对比

图1：默认线性插值器效果

图2：智能插值器实现的视差效果

实现步骤

1. 添加依赖

在build.gradle中添加依赖：

dependencies {
  implementation 'com.ogaclejapan.smarttablayout:library:2.0.0@aar'
  implementation 'com.ogaclejapan.smarttablayout:utils-v4:2.0.0@aar'
}

2. 布局文件配置

在XML中定义带视差效果的标签栏：

<com.ogaclejapan.smarttablayout.SmartTabLayout
  android:id="@+id/viewpagertab"
  android:layout_width="match_parent"
  android:layout_height="48dp"
  app:stl_indicatorInterpolation="smart"  // 启用视差插值器
  app:stl_indicatorColor="#40C4FF"
  app:stl_indicatorThickness="4dp"
  app:stl_titleOffset="auto_center"       // 标题居中偏移
  app:stl_defaultTabTextSize="12sp"
  />

<androidx.viewpager.widget.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@id/viewpagertab"
  />

代码来源：activity_main.xml

3. 代码初始化

在Activity中绑定ViewPager与SmartTabLayout：

ViewPager viewPager = findViewById(R.id.viewpager);
SmartTabLayout viewPagerTab = findViewById(R.id.viewpagertab);

// 使用工具类快速创建适配器
FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
  getSupportFragmentManager(), FragmentPagerItems.with(this)
  .add("首页", HomeFragment.class)
  .add("发现", DiscoveryFragment.class)
  .add("我的", ProfileFragment.class)
  .create());

viewPager.setAdapter(adapter);
viewPagerTab.setViewPager(viewPager);

// 可选：自定义插值器强度
viewPagerTab.setIndicationInterpolator(new SmartTabIndicationInterpolator(2.5f));

代码参考：DemoActivity.java

4. 高级自定义

通过TabProvider实现带图标的视差标签：

viewPagerTab.setCustomTabView(new SmartTabLayout.TabProvider() {
  @Override
  public View createTabView(ViewGroup container, int position, PagerAdapter adapter) {
    View view = LayoutInflater.from(container.getContext())
      .inflate(R.layout.custom_tab_icon_and_text, container, false);
    
    // 标题与图标设置
    TextView title = view.findViewById(R.id.tab_title);
    ImageView icon = view.findViewById(R.id.tab_icon);
    title.setText(adapter.getPageTitle(position));
    icon.setImageResource(ICONS[position]);
    
    return view;
  }
});

布局文件：custom_tab_icon_and_text.xml

关键属性配置

属性名	作用	推荐值
stl_indicatorInterpolation	插值器类型	"smart"（视差）/"linear"（线性）
stl_titleOffset	标题偏移量	"auto_center"（居中对齐）
stl_indicatorThickness	指示器厚度	3-5dp
stl_distributeEvenly	均匀分布	false（保留视差效果）