Android中如何实现Floating Action Button展开为EditText的交互？

要实现FAB平滑展开为带图标EditText的效果，核心是把FAB和EditText整合到同一个可动画的容器中，通过属性动画让两者的过渡看起来无缝，以下是具体实现方案：

1. 布局设计（核心） #

用ConstraintLayout作为父容器，将FAB和EditText放在同一水平线上，默认EditText宽度为0且不可见，让它和FAB视觉上融合。布局示例：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/fab_input_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/fab_background"
    android:clickable="true"
    android:focusable="true">

    <!-- 输入框，默认宽度为0 -->
    <EditText
        android:id="@+id/input_edit_text"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@null"
        android:hint="输入内容..."
        android:textColor="@color/white"
        android:textColorHint="@color/white_alpha"
        android:paddingHorizontal="16dp"
        android:visibility="invisible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/action_fab"/>

    <!-- FAB，始终显示在右侧 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

说明：

• 父容器的fab_background要和FAB的背景样式一致（比如圆角、颜色），确保展开后视觉统一
• EditText设置透明背景，和容器融合，避免看起来是独立组件

2. 动画逻辑实现 #

用ValueAnimator控制容器宽度、EditText的宽度和透明度，同时切换FAB的图标：

class MainActivity : AppCompatActivity() {
    private var isExpanded = false
    private lateinit var container: ConstraintLayout
    private lateinit var editText: EditText
    private lateinit var fab: FloatingActionButton
    // 展开后的目标宽度（可根据需求调整，比如屏幕宽度的70%）
    private val targetWidth by lazy { (resources.displayMetrics.widthPixels * 0.7).toInt() }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        container = findViewById(R.id.fab_input_container)
        editText = findViewById(R.id.input_edit_text)
        fab = findViewById(R.id.action_fab)

        container.setOnClickListener {
            toggleExpandState()
        }
    }

    private fun toggleExpandState() {
        isExpanded = !isExpanded
        if (isExpanded) {
            expandFabToEditText()
        } else {
            collapseEditTextToFab()
        }
    }

    private fun expandFabToEditText() {
        // 切换FAB图标为对勾
        fab.setImageResource(R.drawable.ic_check)
        // 显示EditText
        editText.visibility = View.VISIBLE
        // 动画展开容器宽度
        ValueAnimator.ofInt(container.width, targetWidth).apply {
            duration = 300
            addUpdateListener { animator ->
                val width = animator.animatedValue as Int
                container.layoutParams.width = width
                container.requestLayout()
                // 同时调整EditText的宽度（跟随容器扩展）
                editText.layoutParams.width = width - fab.width
                editText.requestLayout()
            }
            start()
        }
        // 渐变显示EditText
        editText.animate().alpha(1f).duration = 300
        // 自动获取焦点
        editText.requestFocus()
    }

    private fun collapseEditTextToFab() {
        // 切换FAB图标为加号
        fab.setImageResource(R.drawable.ic_add)
        // 动画收缩容器宽度
        ValueAnimator.ofInt(container.width, fab.width).apply {
            duration = 300
            addUpdateListener { animator ->
                val width = animator.animatedValue as Int
                container.layoutParams.width = width
                container.requestLayout()
                editText.layoutParams.width = width - fab.width
                editText.requestLayout()
            }
            doOnEnd {
                // 收缩完成后隐藏EditText
                editText.visibility = View.INVISIBLE
                editText.alpha = 0f
                // 收起键盘
                val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
                imm.hideSoftInputFromWindow(editText.windowToken, 0)
            }
            start()
        }
    }
}

3. 细节优化 #

• 给父容器添加和FAB一致的圆角背景，确保展开后整体样式统一
• 调整动画时长（比如300ms），让过渡更自然
• 处理EditText的输入样式（文字颜色、提示语颜色），适配FAB的主题色
• 折叠时自动收起软键盘，提升交互体验

这个方案的优势是完全自定义过渡逻辑，视觉上FAB和EditText是一个整体，完美实现你要的平滑过渡效果，比ExtendedFAB和独立布局的方案更贴合需求。

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