Android ImageView: настройка параметров масштабирования и перетаскивания - PullRequest
29 голосов
/ 19 ноября 2010

Я в настоящее время разрабатываю для Android (мое первое приложение) приложение, которое позволяет пользователям видеть карту метро и иметь возможность масштабировать и перетаскивать.

В настоящее время я изменяю код, найденный в Hello Android,3-е издание и получил масштабирование масштабирования и перетаскивания на работу.Я использую матрицу в качестве масштаба макета.

Однако у меня сейчас есть 3 проблемы:

  1. Я пробовал много вещей, чтобы ограничить параметры перетаскивания, но я не могу показатьсячтобы остановить его перетаскивание из родительского представления (и может фактически исчезнуть из представления).Я попытался установить параметры макета в XML-файле, и он просто не работает.

  2. Я могу ущипнуть масштабирование, но у меня снова возникают проблемы с ограничением масштаба.Я пытаюсь поэкспериментировать с настройкой max_zoom и min_zoom для ограничения значения масштабирования (я опубликую свой код после)

  3. У меня также возникают проблемы при попытке сопоставить координаты на моем изображениичтобы люди могли нажимать на определенные части (суть в том, чтобы позволить пользователям щелкнуть станцию ​​на карте и просмотреть информацию о ней)

У меня такое ощущение, что у меняпроблема в том, что я использую матричную шкалу.

Вот мой текущий код:

Touch.java

package org.example.touch;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.GridView;
import android.widget.ImageView;

public class Touch extends Activity implements OnTouchListener {
private static final String TAG = "Touch";

private static final float MIN_ZOOM = 1.0f;
private static final float MAX_ZOOM = 5.0f;

// These matrices will be used to move and zoom image
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();

// We can be in one of these 3 states
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;

// Remember some things for zooming
PointF start = new PointF();
PointF mid = new PointF();
float oldDist = 1f;

@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   ImageView view = (ImageView) findViewById(R.id.imageView);
   //view.setLayoutParams(new GridView.LayoutParams(85, 85));
   view.setScaleType(ImageView.ScaleType.FIT_CENTER);
   view.setOnTouchListener(this);   
}

public boolean onTouch(View v, MotionEvent event) {
   ImageView view = (ImageView) v;
   view.setScaleType(ImageView.ScaleType.MATRIX);
   float scale;

   // Dump touch event to log
   dumpEvent(event);

   // Handle touch events here...
   switch (event.getAction() & MotionEvent.ACTION_MASK) {

   case MotionEvent.ACTION_DOWN: //first finger down only
      savedMatrix.set(matrix);
      start.set(event.getX(), event.getY());
      Log.d(TAG, "mode=DRAG" );
      mode = DRAG;
      break;
   case MotionEvent.ACTION_UP: //first finger lifted
   case MotionEvent.ACTION_POINTER_UP: //second finger lifted
      mode = NONE;
      Log.d(TAG, "mode=NONE" );
      break;
   case MotionEvent.ACTION_POINTER_DOWN: //second finger down
      oldDist = spacing(event);
      Log.d(TAG, "oldDist=" + oldDist);
      if (oldDist > 5f) {
         savedMatrix.set(matrix);
         midPoint(mid, event);
         mode = ZOOM;
         Log.d(TAG, "mode=ZOOM" );
      }
      break;

   case MotionEvent.ACTION_MOVE: 
      if (mode == DRAG) { //movement of first finger
         matrix.set(savedMatrix);
         if (view.getLeft() >= -392){
            matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
         }
      }
      else if (mode == ZOOM) { //pinch zooming
         float newDist = spacing(event);
         Log.d(TAG, "newDist=" + newDist);
         if (newDist > 5f) {
            matrix.set(savedMatrix);
            scale = newDist / oldDist; **//thinking i need to play around with this value to limit it**
            matrix.postScale(scale, scale, mid.x, mid.y);
         }
      }
      break;
   }

   // Perform the transformation
   view.setImageMatrix(matrix);

   return true; // indicate event was handled
}

private float spacing(MotionEvent event) {
   float x = event.getX(0) - event.getX(1);
   float y = event.getY(0) - event.getY(1);
   return FloatMath.sqrt(x * x + y * y);
}

private void midPoint(PointF point, MotionEvent event) {
   float x = event.getX(0) + event.getX(1);
   float y = event.getY(0) + event.getY(1);
   point.set(x / 2, y / 2);
}

/** Show an event in the LogCat view, for debugging */
private void dumpEvent(MotionEvent event) {
   String names[] = { "DOWN" , "UP" , "MOVE" , "CANCEL" , "OUTSIDE" ,
      "POINTER_DOWN" , "POINTER_UP" , "7?" , "8?" , "9?" };
   StringBuilder sb = new StringBuilder();
   int action = event.getAction();
   int actionCode = action & MotionEvent.ACTION_MASK;
   sb.append("event ACTION_" ).append(names[actionCode]);
   if (actionCode == MotionEvent.ACTION_POINTER_DOWN
         || actionCode == MotionEvent.ACTION_POINTER_UP) {
      sb.append("(pid " ).append(
      action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
      sb.append(")" );
   }
   sb.append("[" );
   for (int i = 0; i < event.getPointerCount(); i++) {
      sb.append("#" ).append(i);
      sb.append("(pid " ).append(event.getPointerId(i));
      sb.append(")=" ).append((int) event.getX(i));
      sb.append("," ).append((int) event.getY(i));
      if (i + 1 < event.getPointerCount())
         sb.append(";" );
   }
   sb.append("]" );
   Log.d(TAG, sb.toString());
}
}

main.xml (довольно просто, ничего сложного):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
<ImageView android:id="@+id/imageView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:src="@drawable/map"
     android:scaleType="matrix" >
</ImageView>
</FrameLayout>

AndroidManifest.xml (добавлена ​​только тема, поэтому строка заголовка отсутствует и отображается полный экран)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="org.example.touch"
  android:versionCode="7"
  android:versionName="1.0" >
<application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
  <activity android:name=".Touch"
        android:label="@string/app_name" >
     <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
  </activity>
</application>
<uses-sdk android:minSdkVersion="3" android:targetSdkVersion="7" />
</manifest>

Ответы [ 7 ]

18 голосов
/ 20 февраля 2012

Я только что создал это:

https://github.com/jasonpolites/gesture-imageview

Может быть кому-то пригодится ...

12 голосов
/ 18 августа 2012

Другим вариантом, который может работать для некоторых, является использование WebView, который имеет встроенные элементы управления масштабированием.

WebView webView = new WebView(this);
webView.setBackgroundColor(0xff000000);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
//webView.getSettings().setDisplayZoomControls(false);  // API 11
webView.loadDataWithBaseURL(null, getHtml(), "text/html", "UTF-8", null);
mainView.addView(webView, -1, -2);
7 голосов
/ 23 июля 2012

Я знаю, что это старо, но я пытался сделать это и нашел решение, которое работает довольно хорошо.Сразу после вашего оператора switch и до того, как вы установите матрицу, вы можете ограничить масштабирование следующим образом:

private void limitZoom(Matrix m) {

    float[] values = new float[9];
    m.getValues(values);
    float scaleX = values[Matrix.MSCALE_X];
    float scaleY = values[Matrix.MSCALE_Y];
    if(scaleX > MAX_ZOOM) {
        scaleX = MAX_ZOOM;
    } else if(scaleX < MIN_ZOOM) {
        scaleX = MIN_ZOOM;
    }

    if(scaleY > MAX_ZOOM) {
        scaleY = MAX_ZOOM;
    } else if(scaleY < MIN_ZOOM) {
        scaleY = MIN_ZOOM;
    }

    values[Matrix.MSCALE_X] = scaleX;
    values[Matrix.MSCALE_Y] = scaleY; 
    m.setValues(values);
}

Я все еще работаю над тем, как ограничить перевод, но это должно работать для ограничения масштабирования.

РЕДАКТИРОВАТЬ: Вот решение для ограничения перевода.Как примечание, я делаю это для полноэкранного просмотра изображений, поэтому я использую ширину и высоту экрана в своих ограничивающих факторах, но вы могли бы также легко использовать ширину и высоту вашего обзора.

private void limitDrag(Matrix m) {
    float[] values = new float[9];
    m.getValues(values);
    float transX = values[Matrix.MTRANS_X];
    float transY = values[Matrix.MTRANS_Y];
    float scaleX = values[Matrix.MSCALE_X];
    float scaleY = values[Matrix.MSCALE_Y];

    ImageView iv = (ImageView)findViewById(R.id.photo_view);
    Rect bounds = iv.getDrawable().getBounds();
    int viewWidth = getResources().getDisplayMetrics().widthPixels;
    int viewHeight = getResources().getDisplayMetrics().heightPixels;

    int width = bounds.right - bounds.left;
    int height = bounds.bottom - bounds.top;

    float minX = (-width + 20) * scaleX; 
    float minY = (-height + 20) * scaleY;

    if(transX > (viewWidth - 20)) {
        transX = viewWidth - 20;
    } else if(transX < minX) {
        transX = minX;
    }

    if(transY > (viewHeight - 80)) {
        transY = viewHeight - 80;
    } else if(transY < minY) {
        transY = minY;
    }

    values[Matrix.MTRANS_X] = transX;
    values[Matrix.MTRANS_Y] = transY; 
    m.setValues(values);
}

Еще раз, это произойдет сразу после вашего оператора switch и прямо перед тем, как вы установите матрицу для изображения в представлении.Я включил ограничение масштабирования в функцию, и это отражено выше.

6 голосов
/ 26 июля 2015

Вот полный код для масштабирования и панорамирования (Touch.java с некоторыми изменениями, которые можно использовать практически)

6 голосов
/ 31 октября 2011

Скачать исходный код. Таким образом, вы также можете получить это а) нажмите, б) перетащите, и в) масштабирование увеличения. http://pragprog.com/titles/eband3/source_code

5 голосов
/ 19 августа 2011

Используйте код в комментарии Phyxdevel по ссылке ниже Пример масштабирования ZDNET .

У него есть код, ограничивающий уровень панорамирования и масштабирования.

0 голосов
/ 06 марта 2013

Вы можете использовать следующий код, чтобы ограничить нижний и правый

float maxX = minX+viewWidth; 
int offsetY = 80;
        float maxY = minY+viewHeight-offsetY;
       if(x>maxX){
           mPosX = maxX;
       }
       if(x<minX){
           mPosX = minX;
       }
       if(y>maxY){
           mPosY = maxY;
       }
       if(y<minY){
           mPosY = minY;
       }
...