2010-06-17 19 views
20

Tengo un ImageView que tiene el doble de altura que una pantalla normale (960 dip). Me gustaría desplazarlo hacia arriba y hacia abajo en la pantalla. La parte inferior de la pantalla debe contener un botón. He probado varias combinaciones de ScrollView e Imageviews sin ningún éxito. También me he adelgazado con el atributo: isScrollContainer sin resultados. ¿Alguien sabe cómo hacer esto? Cheers, LucaAndroid: Desplazamiento de una vista de imagen

+0

Era: La parte inferior debe contener un botón ... Lo siento por el error tipográfico. – luca

Respuesta

28

@ CV2 Gracias tanto para ese código. Me puso en marcha en la dirección que necesitaba. Aquí está mi versión modificada que deja de moverse en los bordes de la imagen ...

// set maximum scroll amount (based on center of image) 
    int maxX = (int)((bitmapWidth/2) - (screenWidth/2)); 
    int maxY = (int)((bitmapHeight/2) - (screenHeight/2)); 

    // set scroll limits 
    final int maxLeft = (maxX * -1); 
    final int maxRight = maxX; 
    final int maxTop = (maxY * -1); 
    final int maxBottom = maxY; 

    // set touchlistener 
    ImageView_BitmapView.setOnTouchListener(new View.OnTouchListener() 
    { 
     float downX, downY; 
     int totalX, totalY; 
     int scrollByX, scrollByY; 
     public boolean onTouch(View view, MotionEvent event) 
     { 
      float currentX, currentY; 
      switch (event.getAction()) 
      { 
       case MotionEvent.ACTION_DOWN: 
        downX = event.getX(); 
        downY = event.getY(); 
        break; 

       case MotionEvent.ACTION_MOVE: 
        currentX = event.getX(); 
        currentY = event.getY(); 
        scrollByX = (int)(downX - currentX); 
        scrollByY = (int)(downY - currentY); 

        // scrolling to left side of image (pic moving to the right) 
        if (currentX > downX) 
        { 
         if (totalX == maxLeft) 
         { 
          scrollByX = 0; 
         } 
         if (totalX > maxLeft) 
         { 
          totalX = totalX + scrollByX; 
         } 
         if (totalX < maxLeft) 
         { 
          scrollByX = maxLeft - (totalX - scrollByX); 
          totalX = maxLeft; 
         } 
        } 

        // scrolling to right side of image (pic moving to the left) 
        if (currentX < downX) 
        { 
         if (totalX == maxRight) 
         { 
          scrollByX = 0; 
         } 
         if (totalX < maxRight) 
         { 
          totalX = totalX + scrollByX; 
         } 
         if (totalX > maxRight) 
         { 
          scrollByX = maxRight - (totalX - scrollByX); 
          totalX = maxRight; 
         } 
        } 

        // scrolling to top of image (pic moving to the bottom) 
        if (currentY > downY) 
        { 
         if (totalY == maxTop) 
         { 
          scrollByY = 0; 
         } 
         if (totalY > maxTop) 
         { 
          totalY = totalY + scrollByY; 
         } 
         if (totalY < maxTop) 
         { 
          scrollByY = maxTop - (totalY - scrollByY); 
          totalY = maxTop; 
         } 
        } 

        // scrolling to bottom of image (pic moving to the top) 
        if (currentY < downY) 
        { 
         if (totalY == maxBottom) 
         { 
          scrollByY = 0; 
         } 
         if (totalY < maxBottom) 
         { 
          totalY = totalY + scrollByY; 
         } 
         if (totalY > maxBottom) 
         { 
          scrollByY = maxBottom - (totalY - scrollByY); 
          totalY = maxBottom; 
         } 
        } 

        ImageView_BitmapView.scrollBy(scrollByX, scrollByY); 
        downX = currentX; 
        downY = currentY; 
        break; 

      } 

      return true; 
     } 
    }); 

Estoy seguro de que podría ser refinado un poco, pero funciona bastante bien. :)

+0

; de nada; =))) = = – cV2

+0

@wirbly: estoy usando este código que funciona perfectamente para mí, pero solo quiero desplazar la mitad del ancho de la pantalla mientras nos movemos hacia la derecha y hacia la izquierda. ¿Cómo podemos implementar eso? donde tengo que cambiar –

+0

¿puedes publicar el código de trabajo completo? –

6

La manera más fácil es imho utilizar una vista web y cargar la imagen en ella a través de un archivo html local. De esta forma, también obtendrá automáticamente los controles de zoom si desea usarlos. Para una imagen grande (es decir, si tiene un ancho de 1000 o 3000 px), notará que Android (Coliris) no es muy bueno para mostrar imágenes ampliadas con gran nitidez, incluso si las imágenes originales son nítidas y sin comprimir. Este es un problema conocido. La solución para eso es descomponer la imagen grande en mosaicos más pequeños y juntarlos de nuevo a través de html (div's o table). Uso este enfoque para proporcionar un mapa de metro (más grande que la pantalla y desplazable) para el usuario.

WebView webView = (WebView)findViewById(R.id.webView); 
    webView.getSettings().setBuiltInZoomControls(true); 
    webView.getSettings().setUseWideViewPort(true); 
    webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR); 

    webView.loadUrl("content://com.myapp.android.localfile/sdcard/myappdata/common/mtr_map.html"); 

Esto podría funcionar para la mayoría de los casos/'aplicaciones regulares', aunque depende de su caso particular. Si estás hablando de una imagen como fondo desplazable de un juego, puede que no sea útil para ti.

En lugar de un archivo html, también puede cargar la imagen directamente (png, jpg). Si no quieres el control del zoom, simplemente apágalos.

+0

Hago esto mucho, pero llegué a esta pregunta para las otras técnicas. ¡Pero yo también te había preguntado! – CQM

+0

Compruebe este hilo y comentarios, tema relacionado y solución (con código): http://stackoverflow.com/questions/6476853/catiledlayer-alternative-for-android –

+0

+1 gracias por la respuesta, pero cómo mostrar una imagen en el WebView desde la memoria? – Buffalo

26

me han buscado tanto tiempo por este Código, así que quería compartir esta gran paz de código:

este código es de una actividad, que tiene un archivo xml en el backend contiene un ImageView llamada 'img'

<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/img" 
    android:scaleType="center" 
    android:background="#fff" 
    android:src="@drawable/picName" 
/> 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 

    setContentView(R.layout.xml_name_layout); 

    final ImageView switcherView = (ImageView) this.findViewById(R.id.img); 

    switcherView.setOnTouchListener(new View.OnTouchListener() { 

     public boolean onTouch(View arg0, MotionEvent event) { 

      float curX, curY; 

      switch (event.getAction()) { 

       case MotionEvent.ACTION_DOWN: 
        mx = event.getX(); 
        my = event.getY(); 
        break; 
       case MotionEvent.ACTION_MOVE: 
        curX = event.getX(); 
        curY = event.getY(); 
        switcherView.scrollBy((int) (mx - curX), (int) (my - curY)); 
        mx = curX; 
        my = curY; 
        break; 
       case MotionEvent.ACTION_UP: 
        curX = event.getX(); 
        curY = event.getY(); 
        switcherView.scrollBy((int) (mx - curX), (int) (my - curY)); 
        break; 
      } 

      return true; 
     } 
    }); 

} 

hizo el trabajo perfectamente para mí ... & horizontal de desplazamiento vertical incluido (habilitado)

único negativo lado está ... puede desplazarse sobre el borde de la imagen ... pero esto no es problema para me .. y pasar algún tiempo fácilmente se podría implementar esta característica :)

buena suerte & & divertirse

+0

¿El diseño es lineal o relativo? – reegan29

+1

lo siento hombre, no tengo idea, pero para la imagen en sí no debería hacer ninguna diferencia :) buena suerte! – cV2

+1

buen ejemplo @ cV2, utilicé esto para desplazar mi pdf dentro de imagView. Pero las pequeñas posibilidades que hice ... declararon mx, mi, curX y curY antes de tocar como mx, mi no fueron declarados ..:) –

2

Otra forma es crear un HorizontalScrollView, agregar el en él y luego agregar el HorizontalScrollView en un ScrollView. Esto le permite desplazarse hacia arriba, abajo, izquierda, derecha.

+3

Acabo de probar eso, ya que me pareció agradable y fácil, pero la experiencia del usuario es lamentablemente decepcionante. El desplazamiento solo ocurre horizontal o verticalmente de una vez, no puede suceder en diagonal. Peor aún: suponiendo que el desplazamiento vertical es el contenedor exterior, si realiza un deslizamiento diagonal no perfectamente horizontal, el desplazamiento se realizará verticalmente, incluso si el componente vertical del deslizamiento es mucho más pequeño que su componente horizontal. – Balint

0

hey guys encontró una solución fácil y 100% confiable como Mr X mencionado anteriormente (ya que los otros códigos mencionados no funcionaban en algunos dispositivos o se rompieron) Simplemente use ScrollView proporcionado por android y se ocupa de las cosas

algo como esto

<ScrollView android:layout_width="fill_parent" android:id="@+id/scrollView1" 
     android:layout_height="wrap_content" android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" android:layout_above="@+id/button1" 
     android:layout_alignParentRight="true" android:scrollbarAlwaysDrawVerticalTrack="true"> 
     <LinearLayout android:id="@+id/linearLayout1" 
      android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal"> 
      <ImageView android:src="@android:drawable/ic_menu_report_image" 
       android:layout_height="wrap_content" android:id="@+id/imageView1" 
       android:layout_width="wrap_content"></ImageView> 
     </LinearLayout> 
    </ScrollView> 

y en algo como esto alcrear

if (mImageName != null) { 
     InputStream is = null; 
     try { 
      is = this.getResources().getAssets().open("mathematics/"+mImageName); 
     } catch (IOException e) { 
     } 
     Bitmap image = BitmapFactory.decodeStream(is); 

     mImageView.setImageBitmap(image); 
} 

¡Salud!

+0

'ScrollView' solo se desplaza verticalmente. –

6

@wirbly Muchas gracias por su código, funciona exactamente como yo quiero. Pero cuando leí por primera vez tu código, estaba un poco confundido acerca de las cuatro variables que olvidaste definir.

Por lo tanto, quiero agregar la definición del código para hacerlo más claro.

Resources res=getResources(); 
Bitmap mBitmap = BitmapFactory.decodeResource(res, R.drawable.p_1920x1080); 
BitmapDrawable bDrawable = new BitmapDrawable(res, mBitmap); 

//get the size of the image and the screen 
int bitmapWidth = bDrawable.getIntrinsicWidth(); 
int bitmapHeight = bDrawable.getIntrinsicHeight(); 
int screenWidth = this.getWindowManager().getDefaultDisplay().getWidth(); 
int screenHeight = this.getWindowManager().getDefaultDisplay().getHeight(); 

Espero que sea útil.

12

así es como me fijo: p

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:scrollbarAlwaysDrawVerticalTrack="true" > 

<ImageView 
    android:contentDescription="Specs" 
    android:adjustViewBounds="true" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:scrollbars="vertical" 
    android:src="@drawable/specs" > 
</ImageView> 

+1

solución fácil .. preferible. – Santanu

1

funciona para mí

<ScrollView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:padding="10dp"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:src="@drawable/img" 
      android:scaleType="centerCrop" 
      android:adjustViewBounds="true"/> 

     <Button 
      style="@style/btn" 
      android:id="@+id/btn" 
      android:layout_height="60dp" 
      android:layout_marginTop="20dp" 
      android:background="@drawable/btn" 
      android:onClick="click" 
      android:text="text" /> 
    </LinearLayout> 

</ScrollView> 
Cuestiones relacionadas