为MapFragment添加自定义按钮,与地图应用的风格相同[英] Add custom button to MapFragment with the same style of Maps app

本文是小编为大家收集整理的关于为MapFragment添加自定义按钮,与地图应用的风格相同的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

我需要在mapfragment上添加一些自定义按钮.

我使用此代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--suppress AndroidDomInspection -->

<fragment
    android:id="@+id/map"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true">

    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="10sp"
        android:layout_marginTop="10sp"
        android:src="@android:drawable/ic_menu_mylocation"/>

    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="60sp"
        android:layout_marginTop="10sp"
        android:src="@android:drawable/ic_menu_mylocation"/>

</RelativeLayout>

我想要这些按钮具有相同的缩放按钮:白色半骨质背景,灰色边框和灰色背景.

如何设置相同的样式? 有更简单的方法吗? (例如官方API)

推荐答案

这是我目前对Google Map API V2按钮的近似值.一切都在XML中.我很高兴分享这项技术.

<fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    class="com.google.android.gms.maps.SupportMapFragment" />


<Button
    android:id="@+id/btnFollow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="34dp"
    android:background="@drawable/mapbutton"
    android:padding="14dp"
    android:text="@string/btnFollowText"
    android:textColor="@color/black" />


/drawable/mapbutton

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="2dp" />

    <stroke
        android:width="1dp"
        android:color="#CC444444" />

    <solid android:color="#88FFFFFF" />

</shape>

/color/black

<color name="black">#000000</color>

为您的应用程序量身定制它.

其他推荐答案

我能设定的最好的,如下所示:

使用ImageButton样式的按钮,并将android:layout_width和android:layout_height设置为40dp.将android:src设置为您自己的绘图,android:tint android:tint to #ff595959.将android:background设置为以下绘制.

/drawable/mapbutton_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#77888888" />
            <solid android:color="#44FFFFFF" />
        </shape>
    </item>
    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A95badce" />
        </shape>
        </item>
    <item
        android:state_focused="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A9FFFFFF" />
        </shape>
    </item>
    <item
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A9FFFFFF" />
        </shape>
        </item>
</selector>

其他推荐答案

我制作了一个9点图像,具有Google Maps按钮的类似背景:

gist gist

本文地址:https://www.itbaoku.cn/post/102770.html

问题描述

I need add some custom buttons on my MapFragment.

I use this code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--suppress AndroidDomInspection -->

<fragment
    android:id="@+id/map"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true">

    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="10sp"
        android:layout_marginTop="10sp"
        android:src="@android:drawable/ic_menu_mylocation"/>

    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="60sp"
        android:layout_marginTop="10sp"
        android:src="@android:drawable/ic_menu_mylocation"/>

</RelativeLayout>

I'd like that these button have the same style of zoom buttons: white semitrasparent background, gray border and gray background on click.

How can I set the same style? Is there a more simple way? (for example official api)

推荐答案

This is my current approximation of a button for the google map api v2. It's all in the XML. I'm happy to share this technique.

<fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    class="com.google.android.gms.maps.SupportMapFragment" />


<Button
    android:id="@+id/btnFollow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="34dp"
    android:background="@drawable/mapbutton"
    android:padding="14dp"
    android:text="@string/btnFollowText"
    android:textColor="@color/black" />


/drawable/mapbutton

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="2dp" />

    <stroke
        android:width="1dp"
        android:color="#CC444444" />

    <solid android:color="#88FFFFFF" />

</shape>

/color/black

<color name="black">#000000</color>

Tailor it for your app.

其他推荐答案

The best that I could style it is as follows:

Style your button with ImageButton, and set the android:layout_width and android:layout_height to 40dp. Set android:src to your own drawble, and android:tint to #ff595959. Set the android:background to the following drawable.

/drawable/mapbutton_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#77888888" />
            <solid android:color="#44FFFFFF" />
        </shape>
    </item>
    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A95badce" />
        </shape>
        </item>
    <item
        android:state_focused="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A9FFFFFF" />
        </shape>
    </item>
    <item
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A9FFFFFF" />
        </shape>
        </item>
</selector>

其他推荐答案

I made a 9-patch image with a similar background of Google Maps button:

image

It's on my gist