android - Best solution to draw responsive areas on image -
i'm wondering best solution result shown below. here i've found far:
an imageview forest , transparent surfaceview (to handle touch) on draw rectangles? or... 1 surfaceview image set background , rectangles directly drawn on...?
for 2 i've chosen relativelayout.
which of 2 efficient , easiest do? or maybe there way haven't think about.
in case advice, here tend to...
i've implemented placing image in relativelayout (framelayout work too), , adding each outlined view programatically. if know x , y origin (perhaps ratio image) , size each area, can inflate each view/area (with black border, transparent center), make clickable , set listener, , set it's origin adjusting it's margins. may want perform of after image has finished laying out:
i put in onactivitycreated
of fragment
, other lifecycle methods work too...
viewtreeobserver vto = image.getviewtreeobserver(); vto.addongloballayoutlistener(new ongloballayoutlistener() { @override public void ongloballayout() { if (image.getmeasuredheight() > 0) { addhotspots(); viewtreeobserver obs = image.getviewtreeobserver(); obs.removeglobalonlayoutlistener(this); } } });
and how place hotspots/areas:
protected void addhotspots() { hotspot[] hotspots = res.hotspots; (hotspot hs : hotspots) { addhotspottoimage(hs); } private void addhotspottoimage(hotspot hs) { int height = image.getmeasuredheight(); int width = image.getmeasuredwidth(); //this piece different //depending on know area's intended size/position double hsheightratio = hs.lr.y - hs.ul.y; double hswidthratio = hs.lr.x - hs.ul.x; double leftmargin = hs.ul.x * width; double topmargin = hs.ul.y * height; double hsheight = height * hsheightratio; double hswidth = width * hswidthratio; layoutinflater vi = (layoutinflater) image.getcontext().getsystemservice(context.layout_inflater_service); view newspot = vi.inflate(r.layout.question_hotspot, null); relativelayout.layoutparams params = new relativelayout.layoutparams((int) hswidth, (int) hsheight); newspot.settag(hs.key); newspot.setfocusable(true); newspot.setclickable(true); newspot.setfocusableintouchmode(true); newspot.setontouchlistener(this); params.topmargin = (int) topmargin; params.leftmargin = (int) leftmargin; image.addview(newspot, params); }
Comments
Post a Comment