如何在Map Autocomplete Fragment及XML文件中添加图片与文本？

嘿，我来帮你搞定这两个问题，这在自定义地点搜索的UI体验时非常实用～

1. 为Map Autocomplete Fragment添加图片与文本（代码+布局结合） #

这里分两种常见场景，你可以根据自己的需求选择：

场景1：自定义下拉搜索结果项（带图片+文本） #

这是最常用的需求，让地点搜索的结果更直观，每个下拉项都能展示对应地点的图标和名称：

• 第一步：创建自定义结果项布局res/layout/item_autocomplete_custom.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="12dp"
    android:gravity="center_vertical">

    <!-- 地点类型图标 -->
    <ImageView
        android:id="@+id/img_place_type"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:src="@drawable/ic_default_location" />

    <!-- 地点名称文本 -->
    <TextView
        android:id="@+id/tv_place_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:textSize="16sp"
        android:textColor="@android:color/black" />
</LinearLayout>

• 第二步：在代码中替换Autocomplete Fragment的适配器
  推荐使用AutocompleteSupportFragment（比旧版PlaceAutocompleteFragment更灵活），初始化后自定义适配器绑定布局：

// 获取Autocomplete Fragment实例
val autocompleteFragment = supportFragmentManager.findFragmentById(R.id.autocomplete_fragment) as AutocompleteSupportFragment

// 设置需要获取的地点字段（可选）
autocompleteFragment.setPlaceFields(listOf(Place.Field.ID, Place.Field.NAME, Place.Field.TYPES))

// 自定义适配器，加载我们的布局
class CustomPlaceAdapter(
    context: Context,
    private val predictions: List<AutocompletePrediction>
) : ArrayAdapter<AutocompletePrediction>(context, 0, predictions) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = convertView ?: LayoutInflater.from(context)
            .inflate(R.layout.item_autocomplete_custom, parent, false)
        
        val prediction = getItem(position) ?: return view
        
        // 绑定地点名称文本
        view.findViewById<TextView>(R.id.tv_place_name).text = prediction.getPrimaryText(null)
        // 根据地点类型设置对应图标（比如餐厅、酒店、公园等）
        val placeType = prediction.types?.firstOrNull()
        val iconRes = when(placeType) {
            "restaurant" -> R.drawable.ic_restaurant
            "hotel" -> R.drawable.ic_hotel
            "park" -> R.drawable.ic_park
            else -> R.drawable.ic_default_location
        }
        view.findViewById<ImageView>(R.id.img_place_type).setImageResource(iconRes)
        
        return view
    }
}

// 监听输入变化，获取预测结果并设置自定义适配器
autocompleteFragment.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
    override fun onQueryTextSubmit(query: String?): Boolean {
        return true
    }

    override fun onQueryTextChange(newText: String?): Boolean {
        newText?.takeIf { it.isNotEmpty() }?.let { query ->
            Places.getGeoDataClient(requireContext())
                .getAutocompletePredictions(query, null, null)
                .addOnSuccessListener { response ->
                    val adapter = CustomPlaceAdapter(requireContext(), response.autocompletePredictions)
                    // 获取Fragment内部的搜索输入框，设置自定义适配器
                    val autoCompleteTv = autocompleteFragment.view?.findViewById<AutoCompleteTextView>(com.google.android.libraries.places.R.id.places_autocomplete_search_input)
                    autoCompleteTv?.setAdapter(adapter)
                }
        }
        return true
    }
})

场景2：在Fragment界面添加额外图片/文本（比如标题、搜索框图标） #

如果是想在Autocomplete Fragment的上方加标题，或者搜索框左侧加自定义图标，可以把Fragment放在一个布局容器里（比如ConstraintLayout），然后添加对应的View：

<!-- 主布局文件 -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 自定义标题文本 -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="搜索地点"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:margin="16dp"/>

    <!-- 自定义搜索图标 -->
    <ImageView
        android:id="@+id/img_search_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_search"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        app:layout_constraintStart_toStartOf="parent"
        android:margin="16dp"/>

    <!-- Map Autocomplete Fragment -->
    <fragment
        android:id="@+id/autocomplete_fragment"
        android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        app:layout_constraintStart_toEndOf="@id/img_search_icon"
        android:marginStart="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2. 在XML文件中为Map Places Autocomplete Fragment组件添加图片与文本 #

注意：XML中的<fragment>标签不能直接包含子View，因为Fragment是一个独立的组件。所以要实现这个需求，你需要把Fragment和想要添加的图片、文本放在同一个父布局容器中，通过布局约束来调整它们的位置，就像上面场景2的示例那样。

另外，如果你想自定义Autocomplete Fragment内部的搜索框样式（比如替换默认的搜索图标、修改提示文本），可以通过以下方式：

• 在XML中设置提示文本：

<fragment
    android:id="@+id/autocomplete_fragment"
    android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入地点"/>

• 代码中替换搜索图标：

val searchInput = autocompleteFragment.view?.findViewById<AutoCompleteTextView>(com.google.android.libraries.places.R.id.places_autocomplete_search_input)
searchInput?.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_custom_search, 0, 0, 0)

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