android - 在 Android 应用程序中实现类似 Google map 的搜索栏

Question

我正在构建一个使用 Google Maps API 的应用，我希望它在顶部有一个 float 搜索栏，就像 Google Maps 应用中的搜索栏一样。

我发现了地点自动完成功能，但该应用程序不会搜索地点，而是搜索用户创建的另一种数据。

我还发现了一个名为 Float Search View 的库，但它已经停用了一段时间，因此我想继续使用它。我还想手动创建它，因为这是我要构建的第一个 Android 应用程序，我想学习。

我已经尝试在我的 XML 中实现一个 SearchView:

<android.support.v7.widget.SearchView
    android:id="@+id/searchView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:iconifiedByDefault="false"
    app:queryHint="@string/search_hint"
    android:theme="@style/SearchBar"/>

白色背景和高度:

<style name="SearchBar">
    <item name="android:background">@color/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

看看能不能接近它，结果很奇怪。

我试过其他方法，比如添加 Toolbar，但结果是一样的。

我想要一个类似于 Google map 顶部搜索栏的结果。我该怎么做？

Answer 1

Google map 用户界面可能没有什么特别之处。我的猜测是它是全屏 MapView 之上的自定义 View 。您可以通过在与全屏 MapView 相同的容器中使用类似工具栏的布局来做一些类似的事情。

这是一个让您入门的 XML 布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <com.google.android.gms.maps.MapView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_add_24dp" />

            <EditText
                android:hint="Try gas stations, ATMs"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_search_24dp" />

        </LinearLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

这看起来像这样(想象一下红色是 MapView 所在的位置):

从这里开始，您只需根据需要设置“工具栏”的样式。

希望对您有所帮助!