Google Maps API Android v2 - Interactive InfoWindow (comme dans Google maps android original))

je cherchais une solution à ce problème moi-même avec pas de chance, j'ai donc dû rouler pour moi et j'aimerais partager ici avec vous. (S'il vous plaît excuser mon mauvais anglais) (C'est un peu fou pour répondre à un autre tchèque gars en anglais :-) )

La première chose que j'ai essayé était d'utiliser un bon vieux PopupWindow . C'est assez facile - on n'a qu'à écouter le OnMarkerClickListener et ensuite afficher une coutume PopupWindow au-dessus du marqueur. D'autres gars sur StackOverflow suggéré cette solution et il semble en fait assez bon à première vue. Mais le problème avec cette solution s'affiche lorsque vous commencez à déplacer la carte autour. Vous devez déplacer le PopupWindow d'une façon ou d'une autre vous-même ce qui est possible (en écoutant certains événements onTouch) mais IMHO vous ne pouvez pas le faire paraître assez bon, surtout sur certains appareils lents. Si vous le faites de la manière simple, il "saute" autour d'un endroit à un autre. Vous pouvez également utiliser quelques animations pour polir ces sauts, mais de cette façon PopupWindow sera toujours "un pas en arrière" là où il devrait être sur la carte que je n'aime pas.

à ce moment-là, je pensais à une autre solution. Je me suis rendu compte que je n'ai pas vraiment besoin de beaucoup de liberté - pour montrer mes vues personnalisées avec toutes les possibilités qui viennent avec elle (comme les barres de progrès animés etc.). Je pense qu'il y a une bonne raison pour laquelle même les ingénieurs de google ne le font pas de cette façon dans L'application Google Maps. Tout ce que je besoin est un bouton ou deux sur la fenêtre InfoWindow qui affichera un état pressé et déclenchera quelques actions lorsque cliqué. J'ai donc trouvé une autre solution qui se divise en deux parties:

première partie:

La première partie est d'être en mesure d'intercepter les clics sur les boutons pour déclencher une action. Mon idée est la suivante:

1. conserver une référence à l'infoWindow personnalisé créé dans le InfoWindowAdapter.
2. envelopper le MapFragment (ou MapView ) à l'intérieur d'un groupe de vue personnalisé (mine est appelé MapWrapperLayout)
3. remplace le dispatchTouchEvent de MapWrapperLayout et (si L'InfoWindow est actuellement affiché) achemine d'abord les événements de mouvement à L'InfoWindow précédemment créé. S'il ne consomme pas les événements de mouvement (comme parce que vous n'avez pas cliqué sur une zone cliquable à L'intérieur de InfoWindow etc.) puis (et seulement alors) laisser les événements descendre à la MapWrapperLayout superclass donc il sera éventuellement livré à la carte.

voici le code source de MapWrapperLayout:

package com.circlegate.tt.cg.an.lib.map;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.model.Marker;

import android.content.Context;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;

public class MapWrapperLayout extends RelativeLayout {
    /**
     * Reference to a GoogleMap object 
     */
    private GoogleMap map;

    /**
     * Vertical offset in pixels between the bottom edge of our InfoWindow 
     * and the marker position (by default it's bottom edge too).
     * It's a good idea to use custom markers and also the InfoWindow frame, 
     * because we probably can't rely on the sizes of the default marker and frame. 
     */
    private int bottomOffsetPixels;

    /**
     * A currently selected marker 
     */
    private Marker marker;

    /**
     * Our custom view which is returned from either the InfoWindowAdapter.getInfoContents 
     * or InfoWindowAdapter.getInfoWindow
     */
    private View infoWindow;    

    public MapWrapperLayout(Context context) {
        super(context);
    }

    public MapWrapperLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MapWrapperLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * Must be called before we can route the touch events
     */
    public void init(GoogleMap map, int bottomOffsetPixels) {
        this.map = map;
        this.bottomOffsetPixels = bottomOffsetPixels;
    }

    /**
     * Best to be called from either the InfoWindowAdapter.getInfoContents 
     * or InfoWindowAdapter.getInfoWindow. 
     */
    public void setMarkerWithInfoWindow(Marker marker, View infoWindow) {
        this.marker = marker;
        this.infoWindow = infoWindow;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        boolean ret = false;
        // Make sure that the infoWindow is shown and we have all the needed references
        if (marker != null && marker.isInfoWindowShown() && map != null && infoWindow != null) {
            // Get a marker position on the screen
            Point point = map.getProjection().toScreenLocation(marker.getPosition());

            // Make a copy of the MotionEvent and adjust it's location
            // so it is relative to the infoWindow left top corner
            MotionEvent copyEv = MotionEvent.obtain(ev);
            copyEv.offsetLocation(
                -point.x + (infoWindow.getWidth() / 2), 
                -point.y + infoWindow.getHeight() + bottomOffsetPixels);

            // Dispatch the adjusted MotionEvent to the infoWindow
            ret = infoWindow.dispatchTouchEvent(copyEv);
        }
        // If the infoWindow consumed the touch event, then just return true.
        // Otherwise pass this event to the super class and return it's result
        return ret || super.dispatchTouchEvent(ev);
    }
}

tout cela va rendre les vues à l'intérieur de L'InfoView" live " à nouveau - les OnClickListeners vont commencer à déclencher, etc.

deuxième partie: Le problème qui reste est, qu'évidemment, vous ne pouvez pas voir de modifications de L'interface utilisateur de votre InfoWindow à l'écran. Pour ce faire vous devez marqueur d'appel manuel.showInfoWindow. Maintenant, si vous effectuez un changement permanent dans votre InfoWindow (comme changer l'étiquette de votre bouton pour quelque chose d'autre), c'est suffisant.

mais montrer un bouton appuyé sur l'état ou quelque chose de cette nature est plus compliqué. Le premier problème est ,que (au moins) je n'ai pas été en mesure de faire le bouton InfoWindow montre l'état du bouton normal pressé. Même si j'ai appuyé sur le bouton pendant une longue période, Il est juste resté non appuyé sur l'écran. Je croyez que c'est quelque chose qui est géré par le cadre de la carte lui-même qui s'assure probablement de ne pas montrer n'importe quel état transitoire dans les fenêtres d'information. Mais je pourrais me tromper, je n'ai pas essayé de le découvrir.

ce que j'ai fait est un autre méchant hack - j'ai attaché un OnTouchListener au bouton et changé manuellement son arrière - plan lorsque le bouton a été pressé ou relâché à deux tirables personnalisés-un avec un bouton dans un état normal et l'autre dans un état pressé. Ce n'est pas très joli, mais il fonctionne :). Maintenant j'ai pu voir le bouton PASSER d'un état normal à un état pressé sur l'écran.

il y a encore un dernier bug - si vous cliquez trop vite sur le bouton, il ne montre pas l'état pressé - il reste juste dans son état normal (bien que le clic lui-même est allumé de sorte que le bouton"fonctionne"). Au moins, c'est comme ça que ça se voit sur mon Nexus galactique. Donc la dernière chose que j'ai faite c'est que j'ai retardé le bouton dans son état un peu pressé. C'est en outre assez laid et je ne suis pas sûr comment cela fonctionnerait sur certains vieux, appareils lents, mais je soupçonne que même le cadre de carte lui-même fait quelque chose comme cela. Vous pouvez l'essayer vous - même - lorsque vous cliquez sur L'ensemble InfoWindow, il reste dans un état pressé un peu plus longtemps, puis boutons normaux font (encore-au moins sur mon téléphone). Et c'est en fait comme ça que ça marche même sur L'application Google Maps originale.

quoi qu'il en soit, je me suis écrit une classe personnalisée qui gère les changements d'état de boutons et toutes les autres choses que j'ai mentionnées, donc voici le code:

package com.circlegate.tt.cg.an.lib.map;

import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

import com.google.android.gms.maps.model.Marker;

public abstract class OnInfoWindowElemTouchListener implements OnTouchListener {
    private final View view;
    private final Drawable bgDrawableNormal;
    private final Drawable bgDrawablePressed;
    private final Handler handler = new Handler();

    private Marker marker;
    private boolean pressed = false;

    public OnInfoWindowElemTouchListener(View view, Drawable bgDrawableNormal, Drawable bgDrawablePressed) {
        this.view = view;
        this.bgDrawableNormal = bgDrawableNormal;
        this.bgDrawablePressed = bgDrawablePressed;
    }

    public void setMarker(Marker marker) {
        this.marker = marker;
    }

    @Override
    public boolean onTouch(View vv, MotionEvent event) {
        if (0 <= event.getX() && event.getX() <= view.getWidth() &&
            0 <= event.getY() && event.getY() <= view.getHeight())
        {
            switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN: startPress(); break;

            // We need to delay releasing of the view a little so it shows the pressed state on the screen
            case MotionEvent.ACTION_UP: handler.postDelayed(confirmClickRunnable, 150); break;

            case MotionEvent.ACTION_CANCEL: endPress(); break;
            default: break;
            }
        }
        else {
            // If the touch goes outside of the view's area
            // (like when moving finger out of the pressed button)
            // just release the press
            endPress();
        }
        return false;
    }

    private void startPress() {
        if (!pressed) {
            pressed = true;
            handler.removeCallbacks(confirmClickRunnable);
            view.setBackground(bgDrawablePressed);
            if (marker != null) 
                marker.showInfoWindow();
        }
    }

    private boolean endPress() {
        if (pressed) {
            this.pressed = false;
            handler.removeCallbacks(confirmClickRunnable);
            view.setBackground(bgDrawableNormal);
            if (marker != null) 
                marker.showInfoWindow();
            return true;
        }
        else
            return false;
    }

    private final Runnable confirmClickRunnable = new Runnable() {
        public void run() {
            if (endPress()) {
                onClickConfirmed(view, marker);
            }
        }
    };

    /**
     * This is called after a successful click 
     */
    protected abstract void onClickConfirmed(View v, Marker marker);
}

voici un fichier de mise en page InfoWindow personnalisé que j'ai utilisé:

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginRight="10dp" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Title" />

        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="snippet" />

    </LinearLayout>

    <Button
        android:id="@+id/button" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

Test de l'activité mise en page du fichier ( MapFragment être à l'intérieur de la MapWrapperLayout ):

<com.circlegate.tt.cg.an.lib.map.MapWrapperLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

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

</com.circlegate.tt.cg.an.lib.map.MapWrapperLayout>

et enfin code source d'une activité d'essai, qui colle tout cela ensemble:

package com.circlegate.testapp;

import com.circlegate.tt.cg.an.lib.map.MapWrapperLayout;
import com.circlegate.tt.cg.an.lib.map.OnInfoWindowElemTouchListener;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {    
    private ViewGroup infoWindow;
    private TextView infoTitle;
    private TextView infoSnippet;
    private Button infoButton;
    private OnInfoWindowElemTouchListener infoButtonListener;

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

        final MapFragment mapFragment = (MapFragment)getFragmentManager().findFragmentById(R.id.map);
        final MapWrapperLayout mapWrapperLayout = (MapWrapperLayout)findViewById(R.id.map_relative_layout);
        final GoogleMap map = mapFragment.getMap();

        // MapWrapperLayout initialization
        // 39 - default marker height
        // 20 - offset between the default InfoWindow bottom edge and it's content bottom edge 
        mapWrapperLayout.init(map, getPixelsFromDp(this, 39 + 20)); 

        // We want to reuse the info window for all the markers, 
        // so let's create only one class member instance
        this.infoWindow = (ViewGroup)getLayoutInflater().inflate(R.layout.info_window, null);
        this.infoTitle = (TextView)infoWindow.findViewById(R.id.title);
        this.infoSnippet = (TextView)infoWindow.findViewById(R.id.snippet);
        this.infoButton = (Button)infoWindow.findViewById(R.id.button);

        // Setting custom OnTouchListener which deals with the pressed state
        // so it shows up 
        this.infoButtonListener = new OnInfoWindowElemTouchListener(infoButton,
                getResources().getDrawable(R.drawable.btn_default_normal_holo_light),
                getResources().getDrawable(R.drawable.btn_default_pressed_holo_light)) 
        {
            @Override
            protected void onClickConfirmed(View v, Marker marker) {
                // Here we can perform some action triggered after clicking the button
                Toast.makeText(MainActivity.this, marker.getTitle() + "'s button clicked!", Toast.LENGTH_SHORT).show();
            }
        }; 
        this.infoButton.setOnTouchListener(infoButtonListener);


        map.setInfoWindowAdapter(new InfoWindowAdapter() {
            @Override
            public View getInfoWindow(Marker marker) {
                return null;
            }

            @Override
            public View getInfoContents(Marker marker) {
                // Setting up the infoWindow with current's marker info
                infoTitle.setText(marker.getTitle());
                infoSnippet.setText(marker.getSnippet());
                infoButtonListener.setMarker(marker);

                // We must call this to set the current marker and infoWindow references
                // to the MapWrapperLayout
                mapWrapperLayout.setMarkerWithInfoWindow(marker, infoWindow);
                return infoWindow;
            }
        });

        // Let's add a couple of markers
        map.addMarker(new MarkerOptions()
            .title("Prague")
            .snippet("Czech Republic")
            .position(new LatLng(50.08, 14.43)));

        map.addMarker(new MarkerOptions()
            .title("Paris")
            .snippet("France")
            .position(new LatLng(48.86,2.33)));

        map.addMarker(new MarkerOptions()
            .title("London")
            .snippet("United Kingdom")
            .position(new LatLng(51.51,-0.1)));
    }

    public static int getPixelsFromDp(Context context, float dp) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int)(dp * scale + 0.5f);
    }
}

C'est ça. Jusqu'à présent, je n'ai testé cela que sur mon Nexus Galaxy. (4.2.1) et Nexus 7 (aussi 4.2.1), je vais l'essayer sur un téléphone en pain d'épice quand j'ai une chance. Une limitation que j'ai trouvé jusqu'à présent est que vous ne pouvez pas faire glisser la carte où est votre bouton sur l'écran et déplacer la carte. Ça pourrait probablement être surmonté, mais pour l'instant, je peux vivre avec ça.

je sais que c'est un horrible piratage mais je n'ai rien trouvé de mieux et j'ai tellement besoin de ce modèle de conception que ce serait vraiment une raison de revenir à la carte V1 framework (qui btw. Je voudrais vraiment éviter pour une nouvelle application avec des fragments etc.). Je ne comprends pas pourquoi Google ne propose pas aux développeurs un moyen officiel d'avoir un bouton sur InfoWindows. C'est un modèle de conception commune, en outre ce modèle est utilisé même dans L'application officielle de Google Maps :). Je comprends les raisons pour lesquelles ils ne peuvent pas simplement faire de vos vues "live" dans les InfoWindows - cela tuerait probablement la performance en se déplaçant et en faisant défiler la carte autour. Mais il devrait y avoir un moyen comment pour obtenir cet effet sans utiliser de vues.