如何在 Android 中将浮动操作按钮展开为 EditText？

Question

我正在尝试创建一个自定义交互，其中

Floating Action Button (FAB)

在单击时展开为

EditText

，并在再次单击时折叠回 FAB。我正在寻找的行为与下图所示类似，其中 FAB 平滑地过渡到输入字段。

这是我想要实现的目标的示例：

展开的 FAB 理想情况下仍会显示一个图标（如复选标记），但它也允许用户在展开后在输入字段中键入内容。

到目前为止我尝试过的：

1. 我尝试使用

   ExtendedFloatingActionButton

   ，它具有内置的展开/折叠方法（

   extend()

   和

   shrink()

   ），但这并不能完全给我将输入字段直接集成到 FAB 中的无缝行为.

2. 我还考虑过在

   EditText

   中的 FAB 旁边放置一个

   LinearLayout

   ，默认隐藏它，然后在单击 FAB 时使其可见。但是，我希望

   EditText

   显示为 FAB 本身的一部分，而不是作为单独的组件。

有更好的方法吗？

Answer 1

您可以使用 ImageView 和 EditText 来实现这一点。

这是 XML 代码示例

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/search_container"
    android:layout_width="wrap_content"
    android:layout_height="70dp"
    android:layout_margin="30dp"
    android:background="@drawable/round_corner"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <ImageView
        android:id="@+id/search_icon"
        android:layout_width="70dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:scaleType="center"
        android:src="@drawable/ic_edit_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/search_edit_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/search_edit_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="start|center_vertical"
        android:hint="Search..."
        android:paddingEnd="20dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/search_icon"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

这是 Kotlin 代码示例

 override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main2)
    
   var searchIcon:ImageView = findViewById(R.id.search_icon)
   var searchEditText:EditText = findViewById(R.id.search_edit_text)
    searchEditText.background = null
    searchEditText.visibility = View.GONE

    searchIcon.setOnClickListener {
        toggleSearchBar()
    }

    val constraintLayout = findViewById<ConstraintLayout>(R.id.search_container)
    val constraintSet = ConstraintSet()
    constraintSet.clone(constraintLayout)

    searchEditText.visibility = View.VISIBLE
    searchEditText.hint = "Search"
    searchEditText.requestFocus()

    val widthAnimator = ValueAnimator.ofInt(
        0,
        (constraintLayout.parent as View).width * 6 / 10
    ) // 60% of parent width
    widthAnimator.addUpdateListener { valueAnimator ->
        val layoutParams = searchEditText.layoutParams
        layoutParams.width = valueAnimator.animatedValue as Int
        searchEditText.layoutParams = layoutParams
    }

    widthAnimator.duration = 400 // Keep the same duration for balance
    widthAnimator.start()

    searchIcon.setImageResource(R.drawable.ic_done_24)
    val imm = getSystemService(INPUT_METHOD_SERVICE) as InputMethodManager
    imm.showSoftInput(searchEditText, InputMethodManager.SHOW_IMPLICIT)


}

这是 Gif 格式的最终输出 在此输入图片描述