How to add a sliding drawer a MapView/View that

2019-06-13 19:14发布

问题:

I've tried to approach this from different angles without luck. Maybe asking a general question can help.

Technically I'm using osmdroid's MapView implementation, not Google's Maps API, but I think this question is a more general programmatic Views vs main_activity.xml defined views in onCreate.

Basically in my MainActivity if I onCreate a View, like MapView, then set it as the ContentView programmatically, I have to also programmatically add in any other Views I want to display in my app:

public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.mapView = new MapView(this, 256);
    ...
    this.setContentView(this.mapView);
}

If I attempt to set the ContentView as activity_main, the MapView can't be adjusted onCreate. Maybe I'm missing something: (note that I have methods that handle loading a custom offline tile set, and place markers on the map, etc...)

public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    this.mapView = (MapView)findViewById(R.id.mapview);
    ...
    this.intializeMapTiles();
    this.mapView.setBuiltInZoomControls(true);
    this.mapView.setMultiTouchControls(true);
    this.mapController.setCenter(new GeoPoint((int)(50.349622 * 1E6), (int)(-71.823700 *1E6)));
    ...
    this.mapView.invalidate();
}

Here's my activity_main.xml in this case:

<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=".MainActivity" >

    <org.osmdroid.views.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mapview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:clickable="false"/>

</RelativeLayout>

When trying to get the MapView from the ContentView (acitivty_main), none of my method changes to it make any affect. It's as if I don't have access the exact MapView that's being rendered. I've tried invalidating my MapView but it doesn't matter. I get a default looking and behaving MapView.

The reason I'm trying to solve this is naturally I'm looking for my app to include more than a single MapView. I would like to include a SlidingDrawer, or some method of displaying a View with buttons that is only displayed when you long press on a map marker. (note that I have Toast pop ups being displayed on map marker long presses, so I'm good in this regard)

I'd have to add these other Views (SlideingDrawer, etc...) programmatically and not from the main_activity.xml. Even that has a catch-22, where the SlidingDrawer constructor needs an AttributeSet from xml that's painful to build yourself. (I tried) Then you also have to worry about the layout as well.

Anyone have any suggestions? General or otherwise? Thanks!

回答1:

This might actually be useful to others for a number of reasons.

If you're stuck having to use a View that can only be configured the way to need via its programmatic constructor (e.g. you could just include the View from your activity_main.xml, but the View isn't what you need it to be unless you construct it yourself, like with offline tile maps using OSMDroid's MapView) then you're stuck extending that View and implementing that View's constructor that includes the AttributeSet. The AttributeSet is basically a structure parsed from the activity_main.xml xml for that view. That constructor will be called automatically in Activity when you this.setContentView(R.layout.activity_main) from onCreate(). So any custom constructor stuff needs to go in that constructor for your extended View.

For example, I had to extend the OSMDroid MapView, then implement my offline map tile source from the super entirely. NOTE you have to super() the 1st line in an extended constructor because object methods aren't available until after the inherited constructor is complete, so any super() method calls have to be to static methods.

public class FieldMapView extends MapView {
    public FieldMapView(Context context, AttributeSet attrs) throws Exception {
        super(
            context, 
            256, 
            new DefaultResourceProxyImpl(context), 
            FieldMapView.getOfflineMapProvider(context, MainActivity.mapTileArchiveFilename),
            null,
            attrs); 
        this.setUseDataConnection(false);
        this.setBuiltInZoomControls(false);
        this.setMultiTouchControls(true);
    }

Then in my activity_main.xml I point to the extended version of the View: (e.g. FieldMapView)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.test.FieldMapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="false"/>

So now I have my extended View taking care of any programmatic style requirements, how did I get a SlidingDrawer working with it? I created a SlidingDrawer with a 0dip height View as the handle. I then included a LinearLayout that contains buttons, whatever you want, etc...

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.test.FieldMapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="false"/>

    <SlidingDrawer
        android:layout_width="wrap_content"
        android:id="@+id/slidingDrawerActions"
    android:content="@+id/action_content"
    android:padding="10dip"
    android:layout_height="75dip"
        android:handle="@+id/handle2"
        android:layout_alignBottom="@id/mapview"
    android:orientation="vertical"
    android:clickable="false">

        <LinearLayout
            android:layout_width="wrap_content"
            android:id="@+id/action_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:padding="10dip"
            android:background="#FF999999"
            android:layout_height="wrap_content"
            android:clickable="false">

            <View
                android:id="@id/handle2"
                android:layout_width="0dip"
                android:layout_height="0dip" />
            <ImageButton
                android:id="@+id/chatActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="2dip"
                android:src="@drawable/ic_action_edit"
                android:text="Chat">
            </ImageButton>
    </LinearLayout>
    </SlidingDrawer>
</RelativeLayout>

In my MainActivity onCreate() I just find the SlidingDrawer View and assign any listeners accordingly. For opening the drawer when long pressing a Marker in the MapView (this is getting more OSMDroid specific now) I naturally have an OnItemGestureListener to open the drawer:

class NodeGestureListener implements OnItemGestureListener<NodeOverlayItem> {
    @Override
    public boolean onItemLongPress(int index, NodeOverlayItem node) {
        if(slidingDrawerActions.isOpened() || slidingDrawerActions.isMoving()) {
            return false;
        }
        slidingDrawerActions.animateOpen();
        return false;
    }

The tricky part is I wanted to close it via a click on the MapView (not by touching a close button that takes up space) so I had to assign SlidingDrawer.OnDrawerOpenListener and OnDrawerCloseListener classes. They simply flipped a boolean indicating if the drawer was open or closed. I then set a simple onClickListener for the MapView that closed the drawer if it was open based on the isActionDrawerOpen set by the SlidingDrawer listeners.

public void onCreate(final Bundle savedInstanceState) {
    ...
    this.mapView.setOnClickListener(new MapViewClickListener());
    ...
    this.slidingDrawerActions = (SlidingDrawer)findViewById(R.id.slidingDrawerActions);
    this.slidingDrawerActions.setOnDrawerOpenListener(new SlidingDrawerOpenListener());
    this.slidingDrawerActions.setOnDrawerCloseListener(new SlidingDrawerCloseListener());
    ...
}

...

private boolean isActionDrawerOpen = false;
class SlidingDrawerOpenListener implements SlidingDrawer.OnDrawerOpenListener {
    @Override
    public void onDrawerOpened() {
        isActionDrawerOpen = true;
    }
}
class SlidingDrawerCloseListener implements SlidingDrawer.OnDrawerCloseListener {
    @Override
    public void onDrawerClosed() {
        isActionDrawerOpen = false;
    }
}

private boolean skippedMapViewClickListener = false;
class MapViewClickListener implements OnClickListener {
    public void onClick(View view) {
        if(isActionDrawerOpen) {
            if(skippedMapViewClickListener) {
                slidingDrawerActions.animateClose();
                skippedMapViewClickListener = false;
            } else {
                skippedMapViewClickListener = true;
            }
        }
    }
}

Note the skippedMapViewClickListener boolean. The problem I had was that the MapView OnClickListener would be called immediately after the SlidingDrawer listener when long pressing the Marker. Meaning the long press would be considered a MapView click, plus the long press itself would open the drawer before OnClickListener was called, so OnClickListener would always see the drawer as open, and would close it. What I did was effectively skip the 1st onClick this way, so the drawer would stay open until you clicked on the MapView. Seems to work great.

I hope this helps someone. There are like 4 problems I solved with this approach.