Android Google Maps API - 将自定义按钮与现有按钮对齐

Question

我正在尝试在 googlemap 上显示自定义按钮。

<Button
        android:id="@+id/button_backHome"
        android:layout_alignParentRight="true"
        android:layout_marginTop="50dp"
        android:layout_marginRight="11.5dp"
        android:layout_height="39dp"
        android:layout_width="39dp"
        android:background="@drawable/custom_button"
         />

这会在屏幕右上角的 googlemap 的 Set Camera to Current location 按钮正下方显示按钮，但显然只在我的测试设备上。在其他设备上，这些设置不会正确对齐按钮。

XXHDPI(银河 S4)

XHDPI(连结 10)

除了自己制作所有按钮之外，还有什么好的解决方案？我可以在不知道样式名称的情况下继承 google 按钮的边距吗？

我在这里几乎不知所措，我们将不胜感激。

提前致谢!

Answer 1

Google Maps map 的父布局是 RelativeLayout 因此自定义按钮与默认 Google Maps 控件按钮(对于所有屏幕)对齐的最佳方法是将该自定义按钮放入与默认 Google Maps 控件相同的布局中按钮。假设我们使用 Google map 的 Activity 布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="<YOUR_PACKAGE>.MainActivity">

    <fragment
        android:id="@+id/map_fragment"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ImageView
        android:id="@+id/custom_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:visibility="gone"
        android:src="@drawable/ic_home_target"/>

</RelativeLayout>

由于自定义按钮 View 最好使用 ImageView，因为默认按钮布局中有 9 个补丁填充(details here)，或者有必要为默认的 Google map 控制按钮设置额外的填充.现在它属于 Activity 布局。所以在 onMapReady(GoogleMap googleMap) 中我们应该:

1) 获取默认谷歌地图控制按钮的父 View ；

2) 从根 Activity 布局中删除自定义按钮 View ；

3) 将自定义按钮 View 添加到默认 Google map 控制按钮的父 View (在 p.1 中定义)；

4) 设置自定义按钮 View 相对于默认 Google map 控制按钮的对齐方式。

像这样的源代码:

...
private GoogleMap mGoogleMap;
private MapFragment mMapFragment;
private ImageView mCustomButton;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mCustomButton = (ImageView) findViewById(R.id.custom_button);

    mMapFragment = (MapFragment) getFragmentManager()
            .findFragmentById(R.id.map_fragment);

    mMapFragment.getMapAsync(this);
}

@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;

    // don't forget to allow LOCATION permission
    if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        int locationPermission = ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION);
        if (locationPermission == PackageManager.PERMISSION_GRANTED) {
            setConrolsPositions();
        } 
    } else {
        setConrolsPositions();
    }
}

void setConrolsPositions() {
    try {
        mGoogleMap.setMyLocationEnabled(true);
        mGoogleMap.getUiSettings().setMyLocationButtonEnabled(true);

        // get parent view for default Google Maps control button
        final ViewGroup parent = (ViewGroup) mMapFragment.getView().findViewWithTag("GoogleMapMyLocationButton").getParent();
        parent.post(new Runnable() {
            @Override
            public void run() {
                try {
                    // get view for default Google Maps control button
                    View defaultButton = mMapFragment.getView().findViewWithTag("GoogleMapMyLocationButton");

                    // remove custom button view from activity root layout
                    ViewGroup customButtonParent = (ViewGroup) mCustomButton.getParent();
                    customButtonParent.removeView(mCustomButton);

                    // add custom button view to Google Maps control button parent
                    ViewGroup defaultButtonParent = (ViewGroup) defaultButton.getParent();
                    defaultButtonParent.addView(mCustomButton);

                    // create layout with same size as default Google Maps control button
                    RelativeLayout.LayoutParams customButtonLayoutParams = new RelativeLayout.LayoutParams(defaultButton.getHeight(), defaultButton.getHeight());

                    // align custom button view layout relative to defaultButton
                    customButtonLayoutParams.addRule(RelativeLayout.ALIGN_LEFT, defaultButton.getId());
                    customButtonLayoutParams.addRule(RelativeLayout.BELOW, defaultButton.getId());

                    // add other settings (optional)
                    mCustomButton.setAlpha(defaultButton.getAlpha());
                    mCustomButton.setPadding(defaultButton.getPaddingLeft(), defaultButton.defaultButton(),
                            defaultButton.getPaddingRight(), defaultButton.getPaddingBottom());

                    // apply layout settings to custom button view
                    mCustomButton.setLayoutParams(customButtonLayoutParams);
                    mCustomButton.setVisibility(View.VISIBLE);


                } catch (Exception ex) {
                    ex.printStackTrace();
                }
            }
        });
    } catch (Exception ex) {
        ex.printStackTrace();
    }
}

并在 Developer Options 中启用了 Show layout boundaries 选项，你应该得到类似的东西:

如您所见，自定义按钮的大小与默认按钮布局完全相同，并恰好位于其下方。

为了获得更好的结果，有必要调整自定义按钮字形(填充、透明度、颜色等)

或者可能是最简单的方法:根本不使用默认的 Google map "GoogleMapMyLocationButton" 按钮 - 将其 Enabled 属性设置为 false (mGoogleMap.getUiSettings ().setMyLocationButtonEnabled(false);) 但使用具有相同图标和功能的按钮的自定义布局由 GoogleMap.animateCamera() 模拟在与“目标主页”自定义按钮相同的布局上。