android - (How Should I) embed map 2.0 inside a ribbon that user can expand? -
i want display google map api 2.0 inside ribbon above data ui fragment , give user possibility expand map interact it. illustration: ribbon , expanded
doing so, user has map illustrate position when in ribbon mode while when user ewpands map (covering 4/5 of screen) can use map features.
how should ? though on it?
i thinking about
- a sliding drawer top contains map
- an overlaying "card ui" interface display data on map,
- trying mess heigh , focus (but that's way done screenshots , user interaction cries improvement)
any advice?
thank ideas , looking @ !
disclaimer: know ios-like transforming toward native design, application uses actionbarcompat needed show wanted result ( , not current state).
this how did if need it:
- i define linearlayout intercept user action , control map extension/shrinking.
- i put mapfragment v2.0 inside relative layout.
- i define scroll view dimensions when expanding shrinking map.
layout fragment:
<?xml version="1.0" encoding="utf-8"?> <com.snapcar.rider.utils.lineartoucheventlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:pj="http://schemas.android.com/apk/res/com.snapcar.rider" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg_red" android:orientation="vertical" > <relativelayout android:id="@+id/map_fragment_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </relativelayout> <scrollview android:id="@+id/scrollview1" style="@style/sc_scroll_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="5" > layout content </scrollview> </com.snapcar.rider.utils.lineartoucheventlayout>
extension of linearlayout:
package com.snapcar.rider.utils; import android.content.context; import android.support.v4.app.notificationcompat.action; import android.support.v4.view.motioneventcompat; import android.util.attributeset; import android.view.motionevent; import android.view.view; import android.widget.linearlayout; import android.widget.relativelayout; import android.widget.scrollview; public class lineartoucheventlayout extends linearlayout { private static final string tag = "lineartoucheventlayout"; relativelayout mapcontainer; scrollview mscroll; public lineartoucheventlayout(context context) { super(context); setlineartoucheventlayoutlistener((lineartoucheventlayoutlistener) context); for(int i=0; i<getchildcount(); ++i) { view nextchild = getchildat(i); if (nextchild instanceof relativelayout) mapcontainer = (relativelayout) nextchild; if (nextchild instanceof scrollview) mscroll = (scrollview) nextchild; } dbg.d(tag, "first constructor ended"); // todo auto-generated constructor stub } public lineartoucheventlayout(context context, attributeset aset) { super(context, aset); setlineartoucheventlayoutlistener((lineartoucheventlayoutlistener) context); for(int i=0; i<getchildcount(); ++i) { view nextchild = getchildat(i); if (nextchild instanceof relativelayout) mapcontainer = (relativelayout) nextchild; if (nextchild instanceof scrollview) mscroll = (scrollview) nextchild; } if (mapcontainer == null) dbg.d(tag, "mapcontainer null"); if (mscroll == null) dbg.d(tag, "mscroll null"); dbg.d(tag, "second constructor ended"); } private boolean ismapexpand = false; public boolean ismapexpand() { return ismapexpand; } public void setmapexpand(boolean ismapexpand) { this.ismapexpand = ismapexpand; } public interface lineartoucheventlayoutlistener { void ontouch(); void onshrinkmap(); } private lineartoucheventlayoutlistener mlistener; public void setlineartoucheventlayoutlistener(lineartoucheventlayoutlistener listener) { mlistener = listener; } @override public boolean onintercepttouchevent(motionevent ev) { // dbg.d(tag,"event - onintercepttouchevent"); for(int i=0; i<getchildcount(); ++i) { view nextchild = getchildat(i); if (nextchild instanceof relativelayout) mapcontainer = (relativelayout) nextchild; if (nextchild instanceof scrollview) mscroll = (scrollview) nextchild; } if (mapcontainer != null && ispointinsideview(ev.getx(), ev.gety(), mapcontainer)) dbg.e(tag, "inside mapcontainer"); if (mscroll != null && ispointinsideview(ev.getx(), ev.gety(), mscroll)) dbg.e(tag, "inside mscroll"); switch (ev.getaction()) { case motionevent.action_down: // dbg.d(tag,"action_down"); if (mapcontainer != null && ispointinsideview(ev.getx(), ev.gety(), mapcontainer)) { // dbg.e(tag, "inside mapcontainer"); if (!ismapexpand && mlistener != null) { mlistener.ontouch(); ismapexpand = !ismapexpand; return true; } if (ismapexpand) { return false; } } if (mscroll != null && ispointinsideview(ev.getx(), ev.gety(), mscroll) && ismapexpand && mlistener != null) { mlistener.onshrinkmap(); ismapexpand = !ismapexpand; return true; } break; case motionevent.action_move: // dbg.d(tag,"action_move"); break; case motionevent.action_up: // dbg.d(tag,"action_up"); break; case motionevent.action_scroll: // dbg.d(tag,"action_scroll"); break; } return false; // if (ismapexpand) { // sure sure // ontouchevent(ev); // } // return super.onintercepttouchevent(ev); //return false; //event propagated } @override public boolean dispatchtouchevent(motionevent ev) { // dbg.d(tag, "event - dispatchtouchevent"); // if (ismapexpand) { //in case want stop dispatching & handle ourself. // system.out.println("dispatchtouchevent - map e x p n d e d"); // onintercepttouchevent(ev); // return true; //the consumed // } else { // usual process // system.out.println("dispatchtouchevent - map shrinked"); // return super.dispatchtouchevent(ev); // } return super.dispatchtouchevent(ev); } @override public boolean ontouchevent(motionevent event) { // dbg.d(tag, "event - ontouchevent"); // if (ismapexpand) { // system.out.println("ontouchevent - map e x p n d e d - ontouch"); // //bookingformfragment.this.shrinkmap(); // return true; // } else { // system.out.println("ontouchevent - usual process"); // return super.ontouchevent(event); // } // return super.ontouchevent(event); } /** * determines if given points inside view * @param x - x coordinate of point * @param y - y coordinate of point * @param view - view object compare * @return true if points within view bounds, false otherwise */ boolean ispointinsideview (float x, float y, view view) { int location[] = new int[2]; view.getlocationonscreen(location); int viewx = view.getleft(); int viewy = view.gettop(); // dbg.d(tag,"viewx = "+viewx); // dbg.d(tag,"viewy = "+viewy); // dbg.d(tag,"view.getwidth() = "+view.getwidth()); // dbg.d(tag,"view.getheight() = "+view.getheight()); // dbg.d(tag,"eventx = "+x); // dbg.d(tag,"eventy = "+y); //point inside view bounds if(( x > viewx && x < (viewx + view.getwidth())) && ( y > viewy && y < (viewy + view.getheight()))){ // dbg.d(tag, "point inside view"); return true; } else { // dbg.d(tag, "point out side view"); return false; } } }
and @ least useful method in fragment class:
the oncreate callback:
@override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { dbg.v(tag, "- oncreateview bookingformfragment"); root = inflater.inflate(r.layout.fragment_booking_form, null); root.setonclicklistener(this); mscroll = (scrollview) root.findviewbyid(r.id.scrollview1); /* * map fragment */ fragmentmanager fm = getchildfragmentmanager(); mapfragment = new custommapfragment(); fm.begintransaction().replace(r.id.map_fragment_container, mapfragment).commit(); things need set menu item , scroll content }
the shrink/expand method :
private void shrinkmap() { dbg.d(tag, "shrinkmap"); dropdownanim anim = new dropdownanim(mscroll, false); anim.setduration(300); anim.setanimationlistener(new animationlistener() { @override public void onanimationstart(animation animation) { dbg.d(tag, "dropdownanim - shrink start"); isshrinking = true; } @override public void onanimationrepeat(animation animation) { } @override public void onanimationend(animation animation) { dbg.d(tag, "dropdownanim shrink end"); isshrinking = false; ismapshrinked = true; adjustmapposandzoom(); } }); getview().startanimation(anim); }
and of course animation definition :
private class dropdownanim extends animation { boolean down; float maxratio = 5; float minratio = 0.2f; public dropdownanim(view view, boolean down) { this.down = down; } @override protected void applytransformation(float interpolatedtime, transformation t) { float currentratio; if (down) { currentratio = maxratio - (float) ((maxratio - minratio) * interpolatedtime); } else { currentratio = minratio + (float) ((maxratio - minratio) * interpolatedtime); } linearlayout.layoutparams param2 = new linearlayout.layoutparams( layoutparams.match_parent, 0, (float) currentratio); dbg.d(tag, "--- "+ currentratio); mscroll.setlayoutparams(param2); root.requestlayout(); } @override public void initialize(int width, int height, int parentwidth, int parentheight) { super.initialize(width, height, parentwidth, parentheight); } @override public boolean willchangebounds() { return true; } }
if have questions, stranger digs post up, please feel free ask
Comments
Post a Comment