Android Google Maps API-将自定义按钮与现有按钮对齐 [英] Android Google Maps API - align custom button with existing buttons

问题描述

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

I'm trying to display a custom button on a 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的将相机设置为当前位置"按钮的正下方显示按钮，但显然仅在我的测试设备上.在其他设备上，这些设置无法正确对齐按钮.

This displays the button directly below googlemap's Set Camera to Current location button in the top right of the screen, but obviously only on my test device. On other devices these settings don't align the button correctly.

XXHDPI(星系S4)

XXHDPI (galaxy S4)

XHDPI(Nexus 10)

XHDPI (Nexus 10)

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

What would be a good solution, other then making all the buttons myself? Could I inherit the margins from the google button without knowing the style's name?

我在这里很茫然，任何帮助都会使您感激不已.

I'm pretty much at a loss here, and any help would be Much apreciated.

提前谢谢！

推荐答案

Google Maps地图的父级布局为RelativeLayout，因此使用默认Google Maps控件按钮(适用于所有屏幕)对齐自定义按钮的最佳方法是放置自定义按钮按钮设置为与默认Google Maps控制按钮相同的布局.假设我们在Google Maps上的活动地图的布局如下:

Parent Layout for Google Maps map is RelativeLayout so best approach for custom button alignment with default Google Maps control button (for all screens) is to put that custom button into same layout as default Google Maps control button. Assume our activity with Google Maps map has layout like:

<?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>

作为自定义按钮视图最好使用ImageView，因为默认按钮布局中有9个补丁填充(在此处查看详细信息)，或者有必要将其他填充设置为默认的Google Maps控制按钮.现在，它属于活动布局.因此，在onMapReady(GoogleMap googleMap)中，我们应该:

As custom button View is better to use ImageView, because the default buttons layouts has 9 patches padding in them (details here), or it's necessary to set additional padding to default Google Maps control button. Now it belongs to activity layout. So in onMapReady(GoogleMap googleMap) we should:

1)获取默认Google Maps控件按钮的父视图；

1) get parent View for default Google Maps control button;

2)从根活动布局中删除自定义按钮视图；

2) remove custom button view from root activity layout;

3)将自定义按钮视图添加到默认Google Maps控件按钮(在第1页中定义)的父视图中；

3) add custom button view to parent View for default Google Maps control button (defined in p.1);

4)设置自定义按钮视图相对于默认Google Maps控件按钮的对齐方式.

4) set alignment for custom button view relative to default Google Maps control button.

具有这样的源代码:

...
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选项，您应该会得到类似的内容:

and enabled Show layout boundaries option in Developer Options you should get something like that:

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

As you can see custom button has exactly same size as default button layout and placed exactly below it.

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

For better result it's necessary to adjust custom button glyph (padding, transparency, colors, etc.)

或者是最简单的方法:根本不使用默认的Google Maps "GoogleMapMyLocationButton"按钮-将其Enabled属性设置为false(mGoogleMap.getUiSettings().setMyLocationButtonEnabled(false);)，但使用具有相同图标和功能的按钮的自定义布局，该功能由<模拟a href ="https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap#animateCamera(com.google.android.gms.maps.CameraUpdate)" rel ="nofollow noreferrer > GoogleMap.animateCamera() 使用目标首页"自定义按钮在相同的布局上.

Or may be easiest way: don't use default Google Maps "GoogleMapMyLocationButton" button at all - set it's Enabled property to false (mGoogleMap.getUiSettings().setMyLocationButtonEnabled(false);) but use custom layout with button with same icon and functionality emulated by GoogleMap.animateCamera() on same layout with "target home" custom button.

这篇关于Android Google Maps API-将自定义按钮与现有按钮对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！