在Android应用程序中实现类似于Google Maps的搜索栏

时间:2018-07-01 04:19:14

标签: android google-maps search

我正在构建一个使用Google Maps API的应用程序,并且希望它的顶部具有浮动搜索栏,就像Google Maps应用程序中的那个一样。

我已经了解了“地方信息自动填充”功能,但是该应用程序将不会搜索地方信息,而是搜索用户将创建的另一种数据。

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

我尝试在XML中实现var url="<?php echo base_url();?>"; function approve(obj) { var id = $(obj).data('id'); $("#popup-"+id).show(); $('.submit_btn').on('click',function(e) { alert('hi i am working'); window.location = url+"Employee_control/approved_user?key="+id; e.preventDefault(); }); } </script>

class MyDeleteAPIView(APIView):

    def get(self, request, *args, **kwargs):
        # for example
        try:
            user = request.user
            instance = SomeModel.objects.get(user=user)
            instance.delete()
            return Response({"message":"deleted successfuly"}, status=status.HTTP_200_OK)
        except:
            return Response({"message":"delete fail"}, status=status.HTTP_400_BAD_REQUEST)

具有白色背景和高程:

path('delete/', MyDeleteAPIView.as_view(), name='delete'),

看看我是否可以接近它,但是结果很奇怪。

enter image description here

我尝试了其他方式,例如添加SearchView,但结果是相同的。

我想要一个结果,就像顶部的Google Maps的搜索栏一样。我该怎么办?

2 个答案:

答案 0 :(得分:5)

Google Maps UI可能没有什么特别之处。我的猜测是这是全屏MapView之上的自定义视图。通过在与全屏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所在的位置):

Android Studio Preview

在这里,您只需要根据需要设置“工具栏”的样式。

希望有帮助!

答案 1 :(得分:0)

您可以使用类似

<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" />