在图形页面顶部动画菜单按钮 [英] Animated Menu Buttons on top of MapView

问题描述

我有我想有从屏幕左侧滑入选项的动画菜单和覆盖在一个图形页面，当用户点击顶部导航栏中图标的图形页面。

I have a MapView that I would like to have an animated Menu of options that slide in from the left of screen and overlays the a MapView when the user clicks an icon on the top navbar.

期望的行为是：
1.用户点击顶部导航栏上的图标
2.菜单从左侧滑出，显示不同的选项按钮。
3.如果用户选择取消或返回​​图形页面，菜单滑出的权利和消失。

The desired behavior is: 1. User clicks icon on top nav bar 2. Menu slides in from the left, displays buttons with different options. 3. If user select to cancel or return to Mapview, the Menu slides out to the right and disappears.

什么是实现一个图形页面顶部这种行为最好的办法？

What is the best approach to implement this behavior on top of a MapView?

推荐答案

首先，你需要添加的按钮在同一个XML的布局，你有你的图形页面：

First you need to add the buttons in the same XML layout where you have your mapview:

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

    <view
        android:id="@+id/mv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        class="com.google.android.maps.MapView"
        android:apiKey="your key"
        android:clickable="true" />

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_layout_buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:orientation="vertical"
    android:paddingRight="5dp" >

    <Button
        android:id="@+id/button_overlay_show_zoom_all"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:paddingBottom="10dp" />

    <Button
        android:id="@+id/button_overlay_previous"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:paddingBottom="10dp" />

    <Button
        android:id="@+id/button_overlay_next"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:paddingBottom="10dp" />
</LinearLayout>
</RelativeLayout>

然后，你需要初始化按钮（我假设你知道这部分）

Then you need to initialize the buttons (I assume you know this part)

然后定义动画的方法：

//Buttons Fadein / Fadeout-------------------------------------------------------------------------------

private void buttonFadeOut() {
        linear_layout_buttons.startAnimation(AnimationUtils.loadAnimation(MyMapActivity.this, android.R.anim.slide_out_right));
        linear_layout_buttons.setVisibility(View.GONE);
}


private void buttonFadeIn() {
    if(linear_layout_buttons.getVisibility() == View.GONE){
        linear_layout_buttons.startAnimation(AnimationUtils.loadAnimation(MyMapActivity.this, android.R.anim.slide_out_left));
        linear_layout_buttons.setVisibility(View.VISIBLE);
}

最后，你只需要调用buttonFadeIn（）和ButtonFadeOut（），您所需要的。

Finally, you just need to call buttonFadeIn() and ButtonFadeOut() where you need.

祝你好运。

这篇关于在图形页面顶部动画菜单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！