問題描述
Android: Chế độ xem hình ảnh chụm‑thu phóng với Chế độ xem con được nối thêm (Android: Pinch‑zooming ImageView with appended child Views)
I am working on an Android Tablet Application where I have a blueprint that I can pinch‑zoom. From a side menu I am able to drag little symbols into the zoomable image which I can later click and modify. Think of it like markers on a map.
For the zooming part I use a WebView so far. Here is my code for handling this functionality:
public void handlePinchZooming() {
WebView webView = (WebView) findViewById(R.id.blueprintWebView);
webView.setInitialScale(50);
webView.getSettings().setBuiltInZoomControls(true);
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
webView.loadUrl("file:///android_asset/blueprint_example.jpg");
}
For dragging the markers into the image and adding them as children I use the following code:
private void handleDragDrop() {
findViewById(R.id.markerButton01).setOnTouchListener(new DragDropTouchListener());
findViewById(R.id.markerButton02).setOnTouchListener(new DragDropTouchListener());
findViewById(R.id.markerButton03).setOnTouchListener(new DragDropTouchListener());
findViewById(R.id.blueprintWebView).setOnDragListener(new DragDropDragListener());
}
private final class DragDropTouchListener implements View.OnTouchListener {
public boolean onTouch(View view, MotionEvent motionEvent) {
view.setAlpha(100);
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
view.getLayoutParams().width = 50;
view.getLayoutParams().height = 50;
ClipData data = ClipData.newPlainText("", "");
View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
view.startDrag(data, shadowBuilder, view, 0);
view.setVisibility(View.INVISIBLE);
return true;
} else {
return false;
}
}
}
class DragDropDragListener implements View.OnDragListener {
Drawable enterShape = getResources().getDrawable(R.drawable.blueprint_example);
Drawable normalShape = getResources().getDrawable(R.drawable.blueprint_example);
@Override
public boolean onDrag(View v, DragEvent event) {
int action = event.getAction();
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:
// Do nothing
break;
case DragEvent.ACTION_DRAG_ENTERED:
v.setBackgroundDrawable(enterShape);
break;
case DragEvent.ACTION_DRAG_EXITED:
v.setBackgroundDrawable(normalShape);
break;
case DragEvent.ACTION_DROP:
// Dropped, reassign View to ViewGroup
View view = (View) event.getLocalState();
ViewGroup owner = (ViewGroup) view.getParent();
owner.removeView(view);
WebView container = (WebView) v;
container.addView(view);
view.setX(event.getX()‑25);
view.setY(event.getY()‑25);
view.setVisibility(View.VISIBLE);
setMarkerOnClickListener(view);
break;
case DragEvent.ACTION_DRAG_ENDED:
v.setBackgroundDrawable(normalShape);
default:
break;
}
return true;
}
}
Now when I swipe the blueprint image around, the markers move with it but as soon as I zoom in or out, the markers always keep the same absolute distance to each other which makes them move away from their desired spot on the blueprint.
I am not sure if you need this but here is part of the XML file for my layout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="center|right">
<WebView
android:layout_width="800dp"
android:layout_height="600dp"
android:id="@+id/blueprintWebView"
android:layout_gravity="center" android:layout_margin="100dp"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="150dp"
android:layout_height="fill_parent" android:layout_gravity="right" android:layout_marginRight="80dp"
android:gravity="center_vertical|right" android:baselineAligned="false">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="150dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="150dp"
android:id="@+id/imageButton01" android:src="@drawable/icon_printer"
android:adjustViewBounds="false"
android:longClickable="false"
android:cropToPadding="false" android:scaleType="fitCenter" android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/markerButton01" android:src="@drawable/icon_marker_pink"
android:scaleType="fitCenter" android:cropToPadding="false" android:visibility="visible"
android:focusableInTouchMode="false" android:alpha="0" android:adjustViewBounds="false"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="150dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="150dp"
android:id="@+id/imageButton02" android:src="@drawable/icon_printer"
android:scaleType="fitCenter" android:layout_marginTop="20dp" android:layout_marginBottom="20dp"/>
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/markerButton02" android:src="@drawable/icon_marker_pink"
android:scaleType="fitCenter" android:cropToPadding="false" android:visibility="visible"
android:focusableInTouchMode="false" android:alpha="0" android:adjustViewBounds="false"
android:baselineAlignBottom="false"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="150dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="150dp"
android:id="@+id/imageButton03" android:src="@drawable/icon_printer" android:cropToPadding="false"
android:scaleType="fitCenter" android:layout_marginBottom="20dp" android:layout_marginTop="20dp"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/markerButton03" android:src="@drawable/icon_marker_pink"
android:scaleType="fitCenter" android:cropToPadding="false" android:visibility="visible"
android:focusableInTouchMode="false" android:alpha="0" android:adjustViewBounds="false"
android:baselineAlignBottom="false" android:focusable="false"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I'd appreciate all your help to solve this little problem. :)
Regards,
knucKles
參考解法
方法 1:
You may have to recalculate the positions yourself on pinching. I don't know if the webview allows you to get information about it's zoom state etc. Maybe you'll want to switch to this method instead, giving you full control over the zoom process: Android Image View Pinch Zoom
Another way could be showing the markers inside the webview instead, using javascript. But this is only if you are into web developement.