ピンチズームできる青写真があるAndroidタブレットアプリケーションに取り組んでいます。サイド メニューから小さなシンボルをズーム可能な画像にドラッグして、後でクリックして変更することができます。地図上のマーカーのようなものだと考えてください。
ズーム部分には、これまで WebView を使用しています。この機能を処理するための私のコードは次のとおりです。
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");
}
マーカーを画像にドラッグして子として追加するには、次のコードを使用します。
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;
}
}
設計図の画像をスワイプすると、マーカーが一緒に移動しますが、ズームインまたはズームアウトするとすぐに、マーカーは常に同じ絶対距離を維持するため、設計図の目的の場所から離れてしまいます。
これが必要かどうかはわかりませんが、私のレイアウト用の XML ファイルの一部を次に示します。
<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>
この小さな問題を解決するために、皆様のご協力をお願いいたします。:)
よろしく、
ナックル