Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Android / PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

Por 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

Artículos similares

Que es y como se usa la App de la ANH Abastecimiento

La Agencia Nacional de Hidrocarburos de Bolivia (ANH) ante la crisis de combustible que sufre el pais, a lanzado una apl[...]

Como personalizar tus ToolTipText

Primeramente debemos saber que es un ToolTipText en Java, pues no es mas que esa información que se muestra cuando posic[...]

Editar archivos PDF en linea

Editar un documento PDF no es tan sencillo como editar un archivo de texto por ejemplo, para editar archivos PDFs necesi[...]

El lenguaje de programación para Base de Datos de Google

Mangle es el lenguaje de programación de código abierto desarrollado por el gigante tecnológico Google presentado este a[...]

Crea tours interactivos para tus sistemas web

Driver.js es una librería Open Source de JavaScript ligera y altamente personalizable, esta escrita en TypeScript no tie[...]

Contar segundos (Problema Resuelto)

El problema dice asi: Se desea contar los segundos que se presiona un JButton en un formulario. Solución: Para resolver[...]