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:
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
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:
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!!!
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! :)
La misión espacial de la NASA, el Mars 2020 Rover Mission esta proyectada para lanzarse en julio de 2020 y su llegada s...
En este post te enseñamos a utilizar SCRCPY, esta es un aplicación de duplicación de pantalla gratuita y de código abier...
Este es una continuación de un tutorial pasado [Funciones en PostgreSQL y pgAdmin], así que si quieres entenderlo mucho...
Los procedimientos almacenados no solo pueden retornar valores como números, cadenas, etc, sino también datos como los R...
La policia, el FBI u otros organismos similares utilizaban a dibujantes para realizar el «retrato hablado» de algún male...
Existen varias aplicaciones (free y de pago) que emulan una impresora virtual para generar archivos en PDF (Portable Do...
Los comentarios estan cerrados
Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de...
En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario. Sin mas que...
Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...
En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...
Excelente, gracias