Android Tab 底部指示器滑動效果實現思路

效果描述

點擊不同 Tab 時，底部紅色條平滑滑動到對應位置，寬度佔單個 Tab 1/4。

核心實現：動態修改 LayoutParams

// mTabSelector 為底部指示器 ImageView，寬度 = 螢幕寬 / Tab數量
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mTabSelector.getLayoutParams();
params.leftMargin = (currentIndex - 1) * params.width; // 0-based index
mTabSelector.setLayoutParams(params);

進階：加入動畫

ObjectAnimator animator = ObjectAnimator.ofInt(mTabSelector, "leftMargin",
        mTabSelector.getLeft(), targetLeft);
animator.setDuration(300);
animator.addUpdateListener(animation -> {
    RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) mTabSelector.getLayoutParams();
    lp.leftMargin = (int) animation.getAnimatedValue();
    mTabSelector.setLayoutParams(lp);
});
animator.start();

完整架構建議

1. 自訂 ViewGroup 繼承 HorizontalScrollView 或 LinearLayout，內部包含 Tab 按鈕與指示器。
2. 指示器寬度 在 onSizeChanged 計算：width = getMeasuredWidth() / tabCount。
3. 點擊/滑動同步：
   - OnClickListener 切換 Tab 並啟動指示器動畫。
   - 若搭配 ViewPager，在 OnPageChangeListener.onPageScrolled 即時更新 leftMargin = positionOffset * indicatorWidth + position * indicatorWidth。

常用開源庫

• PagerSlidingTabStrip（經典）
• MaterialTabStrip
• Google 官方 TabLayout（app:tabIndicator、tabGravity、tabMode）

核心只需一行：根據索引計算 leftMargin 並套用 LayoutParams，再包裝動畫即得絲滑體驗。