如何使用“杆”为 Google 地图创建自定义 InfoWindow 布局/背景

Question

我已设法在 Android 上的 Google 地图应用程序中定义和使用自定义 InfoWindow，但我不知道如何创建与 developer.google 上these examples 右侧所示的自定义布局类似的自定义布局。

我创建了一个带有红色轮廓的简单圆角框作为布局，并将其用作布局的背景可绘制资源：

round_bg_box_white_with_red_border.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="5dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#f00" />
</shape>

custom_info_window.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_bg_box_white_with_red_border"
    android:orientation="horizontal"
    android:padding="5dp">

    <TextView
        android:id="@+id/fixed_prefix"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:maxLines="1"
        android:textColor="#f00"
        android:textSize="14sp"
        android:text="prefix:"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/marker_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:textColor="#000"
        android:textSize="14sp"
        android:textStyle="bold" />

</LinearLayout>

这一切都适用于我的代码，但我想将向下指向的三角形扩展添加到背景/布局中，以便 InfoWindow 位于标记上方一点并指向它 - 就像在标准的 Google InfoWindows 中一样。

我希望将框本身缩放到内容（因此使用矩形），但指向下方的“茎”不缩放。即与标准 InfoWindows 相同的行为。

Answer 1

人们可能会将其视为一种变通方法，但这是我对以下设计结果的处理方法：

自定义窗口由内容、以可绘制为背景的外部布局和具有 0dp 边距的自适应材料向下箭头图标组成。

尽管不会显示边框，但您的背景可以轻松更新为您的背景。如有必要，这将需要一些定制。三角形的矢量代码可能会集成到另一个结合两者的drawable中。

设置 infoWindow 覆盖后

@Override
public View getInfoWindow(@NonNull Marker marker) {
                View infoWindow = getLayoutInflater().inflate(R.layout.info_contents, requireView().findViewById(R.id.map), false);
                TextView title = infoWindow.findViewById(R.id.location_marker_title);
                title.setText(marker.getTitle());

                TextView snippet = infoWindow.findViewById(R.id.location_marker_snippet);
                snippet.setText(marker.getSnippet());
                return infoWindow;
}

我的布局是这样的（重要的是底部0dp边距，布局可能会简化）：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:cropToPadding="true">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="0dp"
        android:background="@drawable/bg_tooltip"
        android:gravity="center_horizontal|center_vertical"
        android:maxWidth="250dp"
        android:maxHeight="200dp"
        android:minWidth="200dp"
        android:orientation="horizontal"
        android:padding="@dimen/activity_vertical_margin"
        app:layout_constraintBottom_toTopOf="@+id/imageView5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/location_marker_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="230dp"
                android:text=""
                android:textColor="@color/textDark"
                android:textFontWeight="600"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/location_marker_snippet"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="230dp"
                android:text=""
                android:textColor="@color/textDark"
                android:textFontWeight="400"
                android:textSize="14sp"

                />

        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="80dp"
        android:layout_height="20dp"
        android:layout_margin="0dp"
        android:cropToPadding="true"
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_baseline_arrow_drop_down_24"
        app:tint="@color/backgroundAltDark"
        tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我的背景是一个简单的圆角形状：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_horizontal">
     <item>
        <shape>
            <solid android:color="@color/backgroundAltDark" />
            <corners android:radius="@dimen/radius_small" />
            </shape>
    </item>
</layer-list>

自定义后的箭头看起来像这样：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="30"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M7,10l5,5 5,-5z"/>
</vector>