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

Bandera en Alto

Bandera en Alto

EL 6 de agosto de cada año se recuerda una de las fechas más importantes de la historia boliviana, porque el 6 de Agosto...

Blog MVC – Consultas Ajax a la base de datos [p5]

Blog MVC – Consultas Ajax a la base de datos [p5]

Quinta parte de la serie de tutoriales «Creación de un blog siguiendo el patrón MVC (Modelo, Vista y Controlador)«. En e...

Introducción a Scene Builder y MVC (Parte II)

Introducción a Scene Builder y MVC (Parte II)

Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseñ...

Método de la Regla Falsa o Regula Falsi

Método de la Regla Falsa o Regula Falsi

Este método, también conocido como método de interpolación lineal, es un método iterativo de resolución numérica de ecua...

Google Circles en java

Google Circles en java

En este tutorial crearemos el botón de Google+ Google Circles para una interfaz de escritorio 🙂 si no sabes lo que son e...

10 compiladores online para estudiantes

10 compiladores online para estudiantes

¿Quieres iniciarte en la programación? ¿Eres un programador impaciente que odia instalar cualquier software en su comput...

1 comentario en “PanoramaImageView: Vista panorámica”

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Sourcetrail el explorador de código fuente de los lenguaje C, C ++, Java y Python se pasa al Software Libre y desde ahor...

Tapiti v1.2.0 es un Software Educativo Gratuito multiplataforma para los sistemas operativos Windows y Linux el cual no...

En este post vemos un ejemplo de como convertir un archivo de imagen JPG en un archivo PDF utilizando para ellos la libr...

El modelo Tweetbotornot es un algoritmo de aprendizaje automático que se entrenó en miles de cuentas reales de bot y no...

Herramientas

Generador de Enlaces a Whatsapp