SlidingDrawer en Android con ejemplo

SlidingDrawer es un requisito común en los móviles Android para ver el contenido cuando sea necesario deslizándolo tanto horizontal como verticalmente. En este artículo, echemos un vistazo a Sliding Drawer, que se utiliza para ocultar el contenido de la pantalla y permite al usuario arrastrar un controlador para traer el contenido a la pantalla cuando sea necesario de una manera muy fácil de usar. El cajón deslizante es un widget especial y contiene dos vistas para niños, una para manejar que el usuario arrastra y la otra es el contenido adjunto al mango que arrastró junto con él. 

Métodos importantes de SlidingDrawer

Al ser este el cajón deslizante, podemos arrastrar y ver el contenido siempre que sea necesario. Entonces, básicamente, abrir y cerrar son los métodos muy importantes asociados con eso. En nuestro ejemplo, al usar eso, tengamos un pequeño código de demostración. Además de eso, otros métodos importantes también están allí y también se discuten aquí. Para inicializar (o instanciar) una variable de SlidingDrawer, debemos hacer lo siguiente

// First initiate the SlidingDrawer, simpleSlidingDrawer1 
// is the id of SlidingDrawer defined in activity_main.xml
// Here using simpleSlidingDrawer1 as object and 
// this is used throughout next
SlidingDrawer simpleSlidingDrawer1 = (SlidingDrawer) findViewById (R.id.simpleSlidingDrawer1);

// important methods are discussed here
  
// open the Sliding Drawer
simpleSlidingDrawer1.open(); 
  
// close the Sliding Drawer
simpleSlidingDrawer1.close(); 
  
// open the Sliding Drawer but with an animation
simpleSlidingDrawer1.animateOpen(); 
  
// close the Sliding Drawer but with an animation
simpleSlidingDrawer1.animateClose();

Es posible que debamos verificar programáticamente si SlidingDrawer está abierto o cerrado. Para eso, podemos usar el siguiente conjunto de métodos.

// check whether the slider is opened or not and 
// depends upon that we can do rest of the calculations
Boolean isSliderSrawerOpen = simpleSlidingDrawer1.isOpened(); 
  
// If we do not want touch events to occur, set this
simpleSlidingDrawer1.lock(); 
  
// In order to process the touch events
// if accidentally locked or due to some requirement got locked
simpleSlidingDrawer1. unlock();

Métodos de establecimiento:

setOnDrawerCloseListener(OnDrawerCloseListeneronDrawerCloseListener):  

Este método se utiliza para establecer el oyente que recibe la notificación cuando el cajón se cierra. El nombre del método se explica por sí mismo. 

simpleSlidingDrawer1.setOnDrawerCloseListener(
    new SlidingDrawer.OnDrawerCloseListener() {
        @Override public void onDrawerClosed()
        {
            // Suppose you can give a toast message or when
            // drawer closes need to navigate to another
            // event etc., So required steps are done here
        }
    });

setOnDrawerOpenListener(OnDrawerOpenListeneronDrawerOpenListener): 

Este método se utiliza para configurar el oyente que recibe la notificación cuando se abre el cajón. El nombre del método se explica por sí mismo.

simpleSlidingDrawer1.setOnDrawerOpenListener(
    new SlidingDrawer.OnDrawerOpenListener() {
        @Override public void onDrawerOpened()
        {
            // As per your requirement, add code here.
        }
    });

setOnDrawerScrollListener(OnDrawerScrollListeneronDrawerScrollListener): 

Este método se utiliza para configurar el oyente que recibe la notificación cuando el cajón inicia o finaliza un desplazamiento. El nombre del método se explica por sí mismo.

simpleSlidingDrawer1.setOnDrawerScrollListener(
    new SlidingDrawer.OnDrawerScrollListener() {
        @Override public void onScrollStarted()
        {
            // Scroll is necessary for large data to view,
            // so necessary code is required here
        }
  
        @Override public void onScrollEnded()
        {
            // add code here for the scroll ended.
        }
    });

Atributos importantes de SlidingDrawer

Para identificar un SliderDrawer, ciertos atributos son muy obligatorios. 

Ejemplo

Veamos el código de ejemplo completo para el contenido de video provisto. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Esto generalmente viene en la carpeta res> diseño . Puede haber necesidades para tener diferentes diseños para diferentes tamaños de móviles. Pero generalmente se prefiere la carpeta de diseño. actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  
    <SlidingDrawer
        android:id="@+id/simpleSlidingDrawer1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:content="@+id/content1"
        android:handle="@+id/handle1"
        android:orientation="horizontal"
        android:rotation="180">
  
        <!-- Let us define the button -->
        <Button
            android:id="@id/handle1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0f0"
            android:rotation="270"
            android:text="Open"
            android:textColor="#fff" />
  
        <!-- layout for the content of the SlidingDrawer -->
        <LinearLayout
            android:id="@id/content1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal"
            android:rotation="180">
  
            <!-- DEFINE ALL YOUR CONTENT,WIDGETS HERE 
                 WHICH YOU WANT TO ADD IN SLIDING DRAWER LAYOUT. -->
            <ListView
                android:id="@+id/simpleListView1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
              
        </LinearLayout>
    </SlidingDrawer>
</LinearLayout>

Paso 3: Cree un nuevo archivo de recursos de diseño

Vaya a aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y cree un nuevo archivo de diseño y asígnele el nombre list_item.xml. Este XML va a contener el contenido que está especificando en el ArrayAdapter . Declarémoslos en LinearLayout con una orientación vertical para que los contenidos se puedan desplazar hacia arriba y hacia abajo en dirección vertical.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
      
    <!-- TextView for the list item -->
    <TextView
        android:id="@+id/name1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textColor="#0f0" />
</LinearLayout>

Paso 4: trabajar con el archivo MainActivity.java

Ahora vaya a la carpeta java y en MainActivity.java y proporcione la implementación al SlidingDrawer. MainActivity.java Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SlidingDrawer;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    String[] nameArray = {"Bitcoin", "Ethereum", "Litecoin", "IOTA", "Libra", "Monero", "EOS",
                          "NEO", "ATOM", "Tether", "XRP", "Bitcoin Cash", "Binance Coin", "REN",
                          "Bitcoin SV", "USD Coin", "Stellar", "Tezos", "Dash", "Zcash"};
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initiate the SlidingDrawer
        SlidingDrawer simpleSlidingDrawer1 = (SlidingDrawer) findViewById(R.id.simpleSlidingDrawer1);
  
        // initiate a Button which is used for 
        // handling the content of SlidingDrawer
        // We can able to have open and close 
        // methods for this handleButton
        final Button handleButton = (Button) findViewById(R.id.handle1);
  
        // initiate the ListView that is used for content of Sl.idingDrawer
        // adapter for the list view. As all are text, 
        // it is defined as ArrayAdapter<String>
        // Your cryptocurrency items are going to be displayed via this
        // view using below cryptocurrency ArrayAdapter
        ListView simpleListView1 = (ListView) findViewById(R.id.simpleListView1);
  
        // Below syntax is for defining ArrayAdapter
        ArrayAdapter<String> cryptocurrencyArrayAdapter = new ArrayAdapter<String>(getApplicationContext(),
                R.layout.list_item, R.id.name1, nameArray);
  
        // set an adapter to fill the data in the ListView
        simpleListView1.setAdapter(cryptocurrencyArrayAdapter);
  
        // implement setOnDrawerOpenListener event,
        // name itself suggests that
        // we need to write code for drawer opening
        simpleSlidingDrawer1.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener() {
            @Override
            public void onDrawerOpened() {
                // When drawer is opened, we may need 
                // to indicate user that close option
                // is available, so just setting text to close. 
                // But required functionality can be done here
                handleButton.setText("Close");
            }
        });
  
        // implement setOnDrawerCloseListener event,
        // name itself suggests we need to write close events
        simpleSlidingDrawer1.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() {
            @Override
            public void onDrawerClosed() {
                // if close is done, we should have the option to open.
                // according to the requirement, 
                // carry out necessary steps for close
                handleButton.setText("Open");
            }
        });
    }
}

Salida: ejecutar en el emulador

Al configurar el código en el estudio de Android, podemos ver que SlidingDrawer funciona correctamente. Adjunto el pequeño video del mismo. Seguramente esta función es muy necesaria en muchas aplicaciones y disfrutará usándola. El video adjunto será útil para visualizarlo y disfrutarlo simulando el mismo en sus aplicaciones.