Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

Autor jc mouse martes, agosto 7, 2018

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360° que puede desplazarse utilizando el giroscopio del dispositivo, todo esto de una manera sencilla y con muy poco código de por medio.

El proyecto se encuentra bajo licencia MIT.

Necesitamos:

  • IDE Android Studio
  • Permisos: No necesita
  • Una imagen JPG de 360 o 180 grados
  • 5 minutos de tu valioso tiempo
  • Dispositivo físico de preferencia

Manos a la obra

Paso 1. El Proyecto base

Creamos un proyecto base en Android Studio de tipo Empty Activity y su layout por defecto

Paso 2. Dependencias

Abrimos el archivo build.gradle (Module app) y agregamos la siguiente dependencia:

implementation 'com.gjiazhe:PanoramaImageView:1.0'

Paso 3. La imagen

Podemos hacer uso de imágenes panorámicas en  diferentes ángulos que van de 0 a PI/2 ya que PanoramaImageView nos permite indicar el grado de rotación de la imagen así como como el sentido de desplazamiento del mismo ya sea horizontal o vertical.

En este ejemplo utilizaremos una imagen de Japón (Fuente: Internet), dado q las imágenes panorámicas se toman a gran resolución y tamaño, estas ocupan mucho espacio en memoria, razón por la cual deberemos reducir estas de acuerdo a las capacidades de nuestro dispositivo.

Utilizando nuestro editor de imágenes favorito reducimos nuestra imagen japon360.jpg a un tamaño de 1391×300 pixeles

japon 360

Para guardar imagen, clic derecho -> guardar enlace como…

Esta imagen [japon360.jpg] debes colocarla en la carpeta drawable

Paso 4. Layout

Abrimos nuestro archivo activity_main.xml en modo  texto y agregamos:

    <com.gjiazhe.panoramaimageview.PanoramaImageView
        android:id="@+id/panorama_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/japon"
        app:piv_enablePanoramaMode="true"
        app:piv_show_scrollbar="true"
        app:piv_invertScrollDirection="false" />

Podemos destacar los atributos:

  • piv_enablePanoramaMode: Habilita el efecto panoramico
  • piv_show_scrollbar: Muestra el scrollbar o barra de desplazamiento
  • piv_invertScrollDirection: Invierte la dirección de desplazamiento

 

panoramic view

estos atributos también están disponibles en código java:

panoramaImageView.setEnablePanoramaMode(true);
panoramaImageView.setEnableScrollbar(true);
panoramaImageView.setInvertScrollDirection(false);

Paso 5. Código Java

En nuestro Activity o Fragment debemos registrar GyroscopeObserver en onResume () y recordar anular el registro en onPause (). En el onCreate, inicializamos PanoramaImageView de la siguiente manera:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.gjiazhe.panoramaimageview.GyroscopeObserver;
import com.gjiazhe.panoramaimageview.PanoramaImageView;

public class MainActivity extends AppCompatActivity {

    private GyroscopeObserver gyroscopeObserver;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize GyroscopeObserver.
        gyroscopeObserver = new GyroscopeObserver();
        // Set the maximum radian the device should rotate to show image's bounds.
        // It should be set between 0 and ?/2.
        // The default value is ?/9.
        gyroscopeObserver.setMaxRotateRadian(Math.PI/2);
        PanoramaImageView panoramaImageView = (PanoramaImageView) findViewById(R.id.panorama_image_view);
        // Set GyroscopeObserver for PanoramaImageView.
        panoramaImageView.setGyroscopeObserver(gyroscopeObserver);

    }

    @Override
    protected void onResume() {
        super.onResume();
        // Register GyroscopeObserver.
        gyroscopeObserver.register(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        // Unregister GyroscopeObserver.
        gyroscopeObserver.unregister();
    }

}

Adicionalmente si queremos interactuar con nuestro imagen panorámica, podemos hacer uso de un listener.

panoramaImageView.setOnPanoramaScrollListener(new PanoramaImageView.OnPanoramaScrollListener() {
    @Override
    public void onScrolled(PanoramaImageView view, float offsetProgress) {
        // Do something here.
        // The offsetProgress range from -1 to 1, indicating the image scrolls
        // from left(top) to right(bottom).
    }
});

Ejecutamos para probar la aplicación

DEMO

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Lightweight Java Game Library

Lightweight Java Game Library

¿Quien no ha querido programar un juego? creo que la mayoría si no es que todos los que conocen de programación sin impo...

Uso del condicional IF

Uso del condicional IF

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Gráficos Vectoriales SVG

Gráficos Vectoriales SVG

Las imagenes SVG (Scalable Vector Graphics) (Ver Wikipedia) son un tipo de imagen ya bastante antiguo pero poco conocido...

Blog MVC – El theme y primer controlador [p3]

Blog MVC – El theme y primer controlador [p3]

Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega...

JLabel: Escalar imagen

JLabel: Escalar imagen

El componente swing JLabel nos permite cargar una imagen con la propiedad setIcon, sin embargo la imagen no toma el tama...

Funny Sounds: Sonidos divertidos para celular

Funny Sounds: Sonidos divertidos para celular

En este tutorial “Android Bolivia” construiremos nuestra propia aplicación para molestar a los amigos con so...

1 comentario en “PanoramaImageView: Vista panorámica”

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

En un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

ImageMagick es un software de código abierto multiplataforma que contiene una serie de herramientas para leer, mostrar,...

OCR (Optical Character Recognition) en español, Reconociminto Optico de Caracteres, es el proceso por el cual  se extrae...

La misión espacial de la NASA, el Mars  2020 Rover Mission esta proyectada para lanzarse en julio de 2020 y su llegada s...

Android Bolivia

MAUS