¿Cómo crear un cajón deslizante para mostrar la imagen en Android?

Un cajón deslizante en Android es un mecanismo para mostrar contenido oculto en la pantalla cuando se invoca y se muestra mediante un controlador, generalmente un botón o una vista de imagen. El contenido oculto puede ser una vista de cualquier tipo. En general, el contenido oculto puede ser de cualquier ViewGroup. A continuación se muestra una foto de muestra del cajón deslizante.

Es muy similar a un cajón de navegación . La orientación del cajón deslizante (superior, izquierda, derecha, inferior) se puede cambiar mediante programación. Sin embargo, en el modo predeterminado, se coloca un cajón deslizante en la parte superior de la pantalla. En este artículo, le mostraremos cómo puede mostrar una imagen usando un cajón deslizante en Android. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: agregue un activo de imagen o importe una imagen en la carpeta dibujable

Agregamos un recurso de imagen como se muestra a continuación. Esta vista invocará el contenido oculto.

Paso 3: importa otra fuente de imagen para contenido oculto

Importa una imagen y guárdala en la carpeta dibujable.

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un cajón deslizante como se muestra a continuación. Establezca la orientación en 180 para alinearlo a la izquierda de la pantalla. Agregue dos ImageViews dentro de las etiquetas de apertura y cierre del cajón deslizante. Primero ImageView mostrará el activo y segundo el contenido oculto. Ahora agregue el atributo de identificador al primer ImageView y el contenido al segundo ImageView en el Slider Drawer.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <SlidingDrawer
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:content="@id/image_view_2"
        android:rotation="180"
        android:handle="@id/image_view_1"
        tools:ignore="UselessParent">
  
        <ImageView
            android:id="@+id/image_view_1"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:src="@drawable/ic_baseline_arrow_forward_ios_24"
            android:rotation="180"/>
  
        <ImageView
            android:id="@+id/image_view_2"
            android:layout_width="300sp"
            android:layout_height="300sp"
            android:src="@drawable/sample_image"/>
  
    </SlidingDrawer>
  
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle. No se requieren cambios aquí.

package org.geeksforgeeks.slidingdrawer
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Producción:

Puede ver que cuando hacemos clic en el controlador, se muestra el contenido oculto.