使用相同样式的地图应用向MapFragment添加自定义按钮

时间:2014-06-09 22:22:18

标签: android google-maps mapfragment

我需要在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)

4 个答案:

答案 0 :(得分:3)

我可以设计的最佳方式如下:

使用ImageButton为您的按钮设置样式,并将android:layout_widthandroid:layout_height设置为40dp。将android:src设置为您自己的drawble,将android:tint设置为#ff595959。将android:background设置为以下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>

答案 1 :(得分:3)

我使用类似Google地图按钮的背景制作了一个9补丁图片:

image

它在gist

答案 2 :(得分:1)

这是我目前对谷歌地图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>

为您的应用量身定制。

答案 3 :(得分:0)

你可以使用android SDK的9Patch工具并使用photoshop来实现它。

white semitrasparent background.

当你想要半透明背景时,你可以使用透明背景透明度eg. 80%对你的9patch图像进行photoshop,这将与地图的缩放按钮具有相同的背景效果。

gray background on click

你可以使用State List的drawable和2张图片,1张图片用于透明度,另一张是灰色背景