代码之家 › 专栏 › 技术社区 › fermoga

在android应用程序中实现类似google maps的搜索栏

search google-maps android

3

fermoga · 技术社区 · 8 年前

我正在构建一个利用google maps api的应用程序,我希望它顶部有一个浮动的搜索栏,与google maps应用程序中的搜索栏一模一样。

我已经发现了PlacesAutoComplete,但是应用程序不会搜索Places,而是搜索用户创建的另一种数据。

我还发现了一个名为float search view的库,但它已经停止了一段时间,因此我想把它传递给您。我还想手动创建它,因为这是我将要构建的第一个android应用程序,我想学习。

我试着实现一个 SearchView 在我的XML中:

<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 ,但结果是一样的。

我想要一个结果就像谷歌地图的搜索栏在顶部。我该怎么做?

2 回复 | 直到 8 年前

1

6

dominicoder 8 年前

谷歌地图用户界面可能没有什么特别之处。我猜这是一个在全屏地图视图之上的自定义视图。您可以通过在与全屏的mappview相同的容器中使用类似工具栏的布局来执行类似的操作。

下面是一个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>

这看起来像这样(假设红色是mappview所在的位置):

从这里开始,你只需要根据需要设计你的“工具栏”。

希望能有帮助!

2

0

max man 7 年前

你可以用这样的东西

<com.google.android.gms.maps.MapView
    android:id="@+id/mapview"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    />

<SearchView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:layout_margin="10dp"
    android:focusable="auto"
    android:iconifiedByDefault="false" />