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

Como crear un Grid en Pygame

Utilizando pygame para hacer gráficos en python, se muestra a continuación un sencillo ejemplo de cómo utilizar esta lib[...]

ArrayDeque: Cola doblemente terminada

Una cola doblemente terminada o deque es una estructura de datos lineal que permite insertar y eliminar elementos por am[...]

Tink biblioteca criptográfica de Google

Tink es una biblioteca de cifrado desarrollada por un grupo de criptógrafos e ingenieros de seguridad de Google lanzado[...]

Ejemplo socket java Cliente/Servidor

En este post construiremos un sencillo sistema Cliente/Servidor en lenguaje Java, el sistema consistirá básicamente en u[...]

Tangram: El rompecabezas chino

El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá[...]

Autenticación basada en API Keys en Laravel 12

La autenticación basada en API keys es un método para proteger el acceso a una API. Se utiliza una clave alfanumérica ún[...]