Compose中自定义可滚动标签间距及选中过渡动画方案问询

方案一：Jetpack Compose 自定义 Row 实现（替代 ScrollableTabRow） #

针对 Compose 场景，完全自定义标签间距与过渡动画：

• 核心逻辑：用HorizontalScroll包裹自定义Row，通过Arrangement.spacedBy直接控制标签间距；维护选中状态与背景偏移量，借助Animatable实现平滑过渡动画。
• 代码示例：

@Composable
fun CustomSpacedTabRow(
    tabs: List<String>,
    selectedTabIndex: Int,
    onTabClick: (Int) -> Unit,
    tabSpacing: Dp = 16.dp, // 自定义标签间距
    indicatorColor: Color = Color.Blue
) {
    val scrollState = rememberScrollState()
    val indicatorOffset = remember { Animatable(0f) }
    val tabWidths = remember { mutableStateListOf<Int>() }

    // 选中项切换时，计算并执行背景偏移动画
    LaunchedEffect(selectedTabIndex) {
        indicatorOffset.animateTo(
            targetValue = tabWidths.take(selectedTabIndex).sum() + tabSpacing.value * selectedTabIndex,
            animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
        )
    }

    Box(modifier = Modifier.fillMaxWidth()) {
        HorizontalScroll(scrollState = scrollState) {
            Row(horizontalArrangement = Arrangement.spacedBy(tabSpacing)) {
                tabs.forEachIndexed { index, title ->
                    val tabModifier = Modifier
                        .onGloballyPositioned { coordinates ->
                            // 记录每个标签的宽度，用于计算背景位置
                            if (tabWidths.size <= index) {
                                tabWidths.add(coordinates.size.width)
                            } else {
                                tabWidths[index] = coordinates.size.width
                            }
                        }
                        .clickable { onTabClick(index) }
                        .padding(horizontal = 16.dp, vertical = 12.dp)

                    Text(
                        text = title,
                        modifier = tabModifier,
                        color = if (index == selectedTabIndex) Color.White else Color.Gray
                    )
                }
            }
        }

        // 自定义过渡背景指示器
        Box(
            modifier = Modifier
                .offset(x = indicatorOffset.value.dp)
                .width(tabWidths.getOrElse(selectedTabIndex) { 0 }.dp)
                .height(40.dp)
                .background(indicatorColor, RoundedCornerShape(8.dp))
                .alpha(0.3f)
        )
    }
}

• 关键说明：
  • tabSpacing参数可自由调整标签间的距离，完全满足自定义需求
  • 通过监听标签位置获取宽度，确保背景指示器的尺寸与偏移准确匹配选中标签

方案二：参考 Plantix 实现的自定义 View（Android 传统 View 系统） #

针对传统 View 系统项目，采用HorizontalScrollView+FrameLayout结合贝塞尔曲线优化动画：

• 核心逻辑：
  • 外层用HorizontalScrollView实现水平滚动
  • FrameLayout作为容器，下层放置背景指示器，上层放置标签按钮
  • 监听标签点击与滚动事件，通过ValueAnimator结合贝塞尔曲线插值器实现平滑过渡动画
• 代码示例（关键部分）：

public class CustomTabLayout extends HorizontalScrollView {
    private FrameLayout tabContainer;
    private View indicatorView;
    private int selectedTabIndex = 0;
    private int tabSpacing = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics());
    private ValueAnimator indicatorAnimator;

    public CustomTabLayout(Context context) {
        super(context);
        init();
    }

    private void init() {
        tabContainer = new FrameLayout(getContext());
        addView(tabContainer);
        indicatorView = new View(getContext());
        indicatorView.setBackgroundColor(getResources().getColor(R.color.blue));
        indicatorView.setAlpha(0.3f);
        indicatorView.setCornerRadius(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics()));
        tabContainer.addView(indicatorView);
    }

    public void setTabs(List<String> tabs) {
        tabContainer.removeAllViews();
        tabContainer.addView(indicatorView); // 确保指示器在最下层

        for (int i = 0; i < tabs.size(); i++) {
            final int index = i;
            TextView tab = new TextView(getContext());
            tab.setText(tabs.get(i));
            tab.setPadding(
                dpToPx(16), dpToPx(12), dpToPx(16), dpToPx(12)
            );
            tab.setOnClickListener(v -> selectTab(index));

            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.WRAP_CONTENT,
                FrameLayout.LayoutParams.WRAP_CONTENT
            );
            if (i > 0) params.leftMargin = tabSpacing;
            if (i == 0) params.leftMargin = dpToPx(8);
            if (i == tabs.size() - 1) params.rightMargin = dpToPx(8);
            params.topMargin = dpToPx(4);
            params.bottomMargin = dpToPx(4);
            tabContainer.addView(tab, params);
        }
        selectTab(0);
    }

    private void selectTab(int index) {
        if (index == selectedTabIndex) return;

        View oldTab = tabContainer.getChildAt(selectedTabIndex + 1);
        View newTab = tabContainer.getChildAt(index + 1);

        int oldLeft = oldTab.getLeft();
        int newLeft = newTab.getLeft();
        int oldWidth = oldTab.getWidth();
        int newWidth = newTab.getWidth();

        if (indicatorAnimator != null && indicatorAnimator.isRunning()) {
            indicatorAnimator.cancel();
        }

        // 贝塞尔曲线插值器实现自然过渡
        indicatorAnimator = ValueAnimator.ofFloat(0f, 1f);
        indicatorAnimator.setDuration(300);
        indicatorAnimator.setInterpolator(new PathInterpolator(0.4f, 0f, 0.2f, 1f));
        indicatorAnimator.addUpdateListener(animation -> {
            float fraction = (float) animation.getAnimatedValue();
            int currentLeft = (int) (oldLeft + (newLeft - oldLeft) * fraction);
            int currentWidth = (int) (oldWidth + (newWidth - oldWidth) * fraction);
            FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) indicatorView.getLayoutParams();
            params.leftMargin = currentLeft;
            params.width = currentWidth;
            indicatorView.setLayoutParams(params);
        });
        indicatorAnimator.start();

        selectedTabIndex = index;
        scrollToTab(index);
    }

    private void scrollToTab(int index) {
        View tab = tabContainer.getChildAt(index + 1);
        int scrollX = tab.getLeft() - (getWidth() - tab.getWidth()) / 2;
        smoothScrollTo(scrollX, 0);
    }

    private int dpToPx(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }
}

• 关键说明：
  • 通过LayoutParams的leftMargin直接设置标签间距，自由度极高
  • 贝塞尔曲线插值器让背景过渡动画更流畅自然，接近原生系统的动效质感

方案对比 #

• Compose 自定义 Row：适合现代 Compose 项目，代码简洁，动画 API 易用，开发效率高
• 自定义 View 方案：适合传统 View 系统项目，可精细控制每个细节，兼容性更强

内容的提问来源于stack exchange，提问作者Raghunandan