Primero comprendamos los dos tipos de barras de aplicaciones en una aplicación de Android:
- La barra de aplicaciones normal
- La barra de aplicaciones contextual
La barra de aplicaciones normal es solo una barra de aplicaciones normalizada que aparece en la parte superior de una página y se puede personalizar bien de acuerdo con los requisitos del usuario. Se puede utilizar para mostrar temas de página/nombres de empresas/etc., iconos en los que se puede hacer clic, navegación a otras páginas, cajones, campos de texto y varias otras acciones. Ahora aquí hay una trampa…
La barra de aplicaciones superior normal se puede transformar en cualquier momento en una barra de acción contextual , que permanece activa hasta que la acción se elimina o se completa. Esta transformación da como resultado una nueva barra de aplicaciones personalizada, que se superpone a la barra de aplicaciones normal, hasta que finaliza la acción . Ahora echemos un vistazo a estas imágenes, que muestran los dos tipos de barras de aplicaciones:
Barra de aplicaciones normal (personalizada)
Arriba hay solo una barra de aplicaciones normal que tiene sus propias decoraciones.
Barra de acción contextual
Esta es una barra de acción contextual para el conjunto de elementos seleccionado, que tiene su propio conjunto de animaciones/adiciones (¡que también configura el propio usuario!). La barra de acción proporciona una coherencia visual a una página de cualquier aplicación. Guía a los usuarios hacia el destino especificado de una manera persistente y fácil de usar. Hay varias formas de personalizar una ActionBar . En este artículo, vamos a crear un miniproyecto que demuestra muy bien el uso de la barra de acción contextual de material en una aplicación de Android.
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
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 .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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"> <TextView android:id="@+id/text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello GFG!" android:textSize="30sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Ponemos una identificación para el widget TextView , al que podemos referirnos más adelante con el nombre de identificación » text_view «. El ancho y el alto de la barra de la aplicación se ajustan a «wrap_content» y «match_parent» para brindar una buena apariencia visual al cambiar el tamaño de los widgets automáticamente de acuerdo con su(s) contenido(s) principal(es) . Un texto aleatorio «¡Hola GFG!» , con un tamaño de 30 sp, se muestra en el centro de la página, que actuará como nuestro objeto de acción , más adelante.
Paso 3: Crear recursos vectoriales
Vaya a aplicación > res > dibujable . Haga clic con el botón derecho en la carpeta «dibujable» > Nuevo > Activo vectorial. Elija cualquier icono y personalícelo según sus gustos, haga clic en Siguiente > Finalizar . Repita este proceso una vez más para crear otro ícono de una elección diferente.
Paso 4: Crear un archivo de menú y modificar
Vaya a aplicación > res. Haga clic con el botón derecho en res > Nuevo > Directorio de recursos de Android.
Establezca Tipo de recurso en el menú . Haga clic en Aceptar. Esto creará una nueva carpeta de menú para usted. Haga clic con el botón derecho en la carpeta del menú > Nuevo > Archivo de recursos de menú .
Cambie el nombre del archivo según su elección. Haga clic en Aceptar. En la esquina superior derecha de la consola, busque “ Código | Dividir | Diseño “. Haga clic en Código para modificar el código del menú.
Escribe el siguiente código:
XML
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/option_1" android:title="Option 1" android:icon="@drawable/ic_delete" /> <item android:id="@+id/option_2" android:title="Option 2" android:icon="@drawable/ic_baseline_share_24" /> </menu>
Nota: “ ic_delete ” y “ ic_baseline_share_24 ” son los activos vectoriales creados anteriormente (en el paso 3).
Paso 5: Modifique el archivo MainActivity.java, cree el modo de acción, genere el resultado final
El modo de acción dentro de una barra de acción contextual dedica una acción específica para que se realice en una barra de aplicación normal, por ejemplo, que luego se transforma en una barra de aplicación contextual, cuando la personaliza el propio usuario. En otras palabras, el modo de acción cambia temporalmente la interfaz de usuario mientras se ejecuta la acción . Echa un vistazo a lo que estamos a punto de hacer ahora:
Esta de arriba es la página de inicio de una aplicación, con una barra de aplicaciones normal.
Esta ahora es una barra de aplicaciones contextual , transformada de la barra de aplicaciones normal al presionar prolongadamente el botón «¡Hola GFG!» texto. ¿Entusiasmado? Pasemos al segmento de codificación. Dirígete a la pestaña MainActivity.java ya creada.
MainActivity.java MainActivity.java
Java
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.view.ActionMode;
public class MainActivity extends AppCompatActivity {
private ActionMode myActMode;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView textView = findViewById(R.id.text_view);
textView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (myActMode != null) {
return false;
}
myActMode = startSupportActionMode(myActModeCallback);
return true;
}
});
}
private ActionMode.Callback myActModeCallback = new ActionMode.Callback() {
@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
mode.getMenuInflater().inflate(R.menu.example_menu, menu);
mode.setTitle("Select option here");
return true;
}
@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return false;
}
@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
switch (item.getItemId()) {
case R.id.option_1:
Toast.makeText(MainActivity.this, "Selected Option 1", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
case R.id.option_2:
Toast.makeText(MainActivity.this, "Selected Option 2", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
default:
return false;
}
}
@Override
public void onDestroyActionMode(ActionMode mode) {
myActMode = null;
}
};
}
Explicación:
Dentro del método onCreate() , primero necesitamos una referencia a nuestra text_view creada previamente accediendo a su id . Para hacer esto, usamos:
TextView textView = findViewById(R.id.text_view);
Ahora creamos un oyente. He creado un oyente onLongClick() aquí, que personaliza la barra de aplicaciones cuando se presiona prolongadamente el widget especificado. Para esto tecleamos:
textView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if(myActMode!=null){
return false;
}
myActMode=startSupportActionMode(myActModeCallback);
return true;
}
devolver verdadero; significa que el usuario ha consumido el detector de clics y no desea activar ningún otro detector de clics. La verificación nula se utiliza para verificar si el Modo de acción (que se creará en el siguiente paso) ya se ha activado para que no tengamos que volver a activarlo. Por ahora, myActModeCallback puede ignorarse.
Ahora llegamos a la parte importante. Uso del modo de acción. Para hacer esto, creamos una variable de modo de acción privada con un nombre definido por el usuario. En mi caso, el nombre es myActMode.
private ActionMode myActMode;
Pasando a la siguiente parte, tenemos que iniciar la interfaz de devolución de llamada requerida . Para hacer esto, tenemos el siguiente segmento de devolución de llamada.
private ActionMode.Callback myActModeCallback = new ActionMode.Callback() {
@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
mode.getMenuInflater().inflate(R.menu.example_menu, menu);
mode.setTitle("Select option here");
return true;
}
@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return false;
}
@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
switch (item.getItemId()) {
case R.id.option_1:
Toast.makeText(MainActivity.this, "Selected Option 1", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
case R.id.option_2:
Toast.makeText(MainActivity.this, "Selected Option 2", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
default:
return false;
}
}
@Override
public void onDestroyActionMode(ActionMode mode) {
myActMode=null;
}
};
Dado que ya hemos creado las funciones de devolución de llamada (aún por inicializar y personalizar), podemos pasar myActModeCallback como argumento a startSupportActionMode() creado en el paso anterior. onCreateActionMode () es el método donde inflamos nuestro menú. Para hacer esto, usamos:
mode.getMenuInflater().inflate(R.menu.example_menu, menu);
No necesitamos codificar nada dentro del método onPrepareActionMode() , ya que este método se llama cuando el usuario desea actualizar el menú; ciertamente no del tipo que queremos aquí! Pasando al siguiente método, por supuesto, necesitamos modificar el código en el método onActionItemClicked() , ya que este es el lugar que se preocupa por nuestras acciones y lo dedica a la Barra de acción contextual . Aquí tenemos:
switch (item.getItemId()) {
case R.id.option_1:
Toast.makeText(MainActivity.this, "Selected Option 1", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
case R.id.option_2:
Toast.makeText(MainActivity.this, "Selected Option 2", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
default:
return false;
}
Decidí usar un breve mensaje de brindis para que se muestre en la parte inferior de la pantalla después de hacer clic en un elemento (un icono, para ser más específicos) en la barra de acción contextual. Por supuesto, también puedes innovar con nuevas ideas. Por último, llegamos al método onDestroyActionMode() y establecemos myActMode en nulo, de modo que la barra de la aplicación contextual se cierre después de que finalice la acción.
@Override
public void onDestroyActionMode(ActionMode mode) {
myActMode=null;
}
¡Eso fue todo! Ahora ejecute la aplicación de Android haciendo clic en el botón ▶, usando un emulador de Android o un dispositivo Android externo.
Producción:
Enlace del proyecto: Haga clic aquí
Publicación traducida automáticamente
Artículo escrito por soumyadeepdbsslg y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA