Qué tipo de menú utilizar para esto que quiero hacer? Android.

Iniciado por @XSStringManolo, 27 Octubre 2019, 20:28 PM

0 Miembros y 1 Visitante están viendo este tema.

@XSStringManolo

Quiero añadir un menú desplegable, menú de opciones... En Android Java. No sé que tipo de menú, listado, es el adecuado.

En concreto quiero que al pulsar una imagen, se abra un menú hacia abajo con un listado de opciones.

De momento opté por algo sencillo. Cargo una url con un archivo html de configuración. Pero sería más cómodo, estético, ligero y eficiente para el usuario final un menú desplegable con una scrollbar. De tal forma que el usuario vea por ejemplo 4 opciones y, pueda desplazarse por el resto de opciones arrastrando.


Sin desplegar:
___________________________________
|(☆) Archivo, Vista, Ayuda, Plugins
|  [ CONTENIDO DE LA VENTANA ]
|  [ CONTENIDO DE LA VENTANA ]
|  [ CONTENIDO DE LA VENTANA ]
|  [ CONTENIDO DE LA VENTANA ]
|  [ CONTENIDO DE LA VENTANA ]
|  [ CONTENIDO DE LA VENTANA ]
|___________________________________


Desplegado:
____________________________________
|(☆) Archivo, Vista, Ayuda, Plugins
|_______________  DE LA VENTANA ]
|Configuración || DE LA VENTANA ]
|Modo noche   || DE LA VENTANA ]
|Reciente          || DE LA VENTANA ]
|Buscar             || DE LA VENTANA ]
|______________ || DE LA VENTANA ]
|   [ CONTENIDO DE LA VENTANA ]
|____________________________________


Desplegado Tras Desplazar Menu (arrastrar con el dedo):
____________________________________
|(☆) Archivo, Vista, Ayuda, Plugins
|________________ DE LA VENTANA ]
|Reciente          || DE LA VENTANA ]
|Buscar             || DE LA VENTANA ]
|Zoom               || DE LA VENTANA ]
|Salir                 || DE LA VENTANA ]
|______________ || DE LA VENTANA ]
|   [ CONTENIDO DE LA VENTANA ]
|____________________________________


No sé que tipo de menú es el adecuado para este tipo de listado de opciones con scrollbar.

Tengo un método Config al que llamo al pulsar sobre la imagen. Simplemente puse la imagen en un ImageView con un Android:OnClick que llama al método Config. Hay alguna forma de mostrar un menú de la misma forma?

Serapis

#1
Cita de: string Manolo en 27 Octubre 2019, 20:28 PM
Quiero añadir un menú desplegable, menú de opciones... En Android Java. No sé que tipo de menú, listado, es el adecuado.

En concreto quiero que al pulsar una imagen, se abra un menú hacia abajo con un listado de opciones.

De momento opté por algo sencillo. Cargo una url con un archivo html de configuración. Pero sería más cómodo, estético, ligero y eficiente para el usuario final un menú desplegable con una scrollbar. De tal forma que el usuario vea por ejemplo 4 opciones y, pueda desplazarse por el resto de opciones arrastrando.

...
Lo entendería mejor con una imagen.... pero creo captar tu intención.

Podrías optar por algo similar a un menú tipo pulldown, pero que en vez de desplegar una lista vertical con cada submenú, despliegue una línea y solo cuando sea terminal despliegue como lista vertical...

Para ello, exige diseñar primero el menú en formato árbol... para verlo claro.
Déjame que use el menú que tiene la calculadora de windows, que para ejemplos es bastante práctico.
Primero los nodos raíz (nota que esto es el diseño del contenido del menú, no la interfaz gráfica)
Edit
View
Ayuda

Ahora indenta cada submenú bajo cada uno.
-----------------------------
Edit
   Copy
   Paste
View
   Standard
   Scientific
   -
   Hex
   Decimal
   Octal
   Binary
   -
   Qword
   Dword
   Word
   Byte
   -
   Digit Grouping
Help
   Help Calculator
   -
   About Calculator
-------------------------------

Básicamente este es el menú, hay diferencias en 'View', cuando está activo Decimal, se muestran grados, radianes, en vez del tamaño de bytes... pero para el ejemplo basta así.
Lo primero es ver que cuando hay diferentes aparatados, como en 'View', con separadores, en realidad pueden reconvertirse en la forma:

------------------------
View
   Model
       Standard
       Scientific
   Base Number
       Hex
       Decimal
       Octal
       Binary
   Data Size
       Qword
       Dword
       Word
       Byte
   Digit Grouping
-------------------------

Bien, pués la forma visual del menú, la interfaz grafica final podría ser:
---------------------------------
|(☆) Edit, View, Help
---------------------------------

Si pulsa en Edit
---------------------------------
|(☆) Edit, View, Help
---------------------------------
| - Copy
| - Paste
---------------------------------
Copy y paste son ya 'hojas' que conllevan realizar la acción... se muestran por tanto en formato vertical alineados a la izquierda.


Si pulsa en View:
---------------------------------
|(☆) Edit, View, Help
| - |(☆) Model, Base Number, Data Size
---------------------------------
| - Digit Grouping
---------------------------------
Pulsar en nodos solo despliega su lista, que puede contener también hojas terminales, caso de 'Digit Grouping'.

si se pulsa (por ejemplo) en el submenú Model...
---------------------------------
|(☆) Edit, View, Help
| - |(☆) Model, Base Number, Data Size
---------------------------------
| - * Standard
| - Scientific
---------------------------------
Despliega su sumenú, como son terminales se colocan en lista vertical
El asterisco '*' reprensenta que está marcada esa opción.

si se pulsa (por ejemplo) en el submenú Base Number...
---------------------------------
|(☆) Edit, View, Help
| - |(☆) Model, Base Number, Data Size
---------------------------------
| - * Hex
| - Decimal
| - Octal
| - Binary
---------------------------------

En fin el esquema es claro... como un teléfono tiene patalla muy pequeña, y para ser legible el texto debe ser grande, no cabe desplegar un submenú y otro y otro y otro... pero todavía puede admitir 3-4 líneas y debajo media docena de opciones o alguna más (dependerá del tamaño de fuente, etc...).

Así cada rama desplegada, se muestra como una línea ligeramente indentada de su ascendiente, y subrayado el nodo del que desciende...
Y los nodos terminales que ejecutan la acción en cambio se colocan alineados a la izquierda en vertical.
Ambos, ramas y terminales separados (en el ejemplo una línea horizontal los separa).
Habrá ramas que además de tener submenús tengan también nodos terminales como sucede con 'View' que tiene 3 submenús y el 4º es un nodo terminal...

---------------------------------
|(☆) MenuA, MenuB, MenuC, MenuD
| - |(☆) SubmA, SubMB, SubmC, SubmD
| - | - |(☆) SSubA, SSubB, SSubC, SSubD
| - | - | - |(☆) SSSA, SSSB, SSSC, SSSD
---------------------------------
| - Blabla A
| - Blabla B
| - * Blabla C
| - * Blabla D
| - BlaBla E
| - * Blabla F
---------------------------------
En este ejemplo está seleccionado:
MenuB --> SubMA --> SSubD --> SSSC
y de ese último se muestran sus acciones terminales.

Igual que en un PC se limita la cantidad de submenús, también habría que limitar en Android el número de submenús, 4 es un límite práctico, pero que todavía tiene flexibilidad para menús muy largos...
Si la lista vertical es muy grande podrías tener un scroll vertical (peor solo mueva esos ítems, que no toque los ítems ancestros.

@XSStringManolo

Me expliqué horrible disculpa.
Aún así esa explicación me a apunto para otras actividades del programa. (Editor de texto integrado, y esas cosas).

Subí una imagen. Como tengo poco velocidad de internet la subi en pésima calidad:
http://stringmanolo.byethost12.com/Interfaz.jpg

Lo que quiero hacer es esa interfaz. En concreto el menú desplegable (color rojo).

Este menú (El recuadro rojo) lo quiero oculto para poder navegar. Y al presionar el icono (está dentro del círculo verde) es cuando este menú aparece en la ventana.

Este menú muestra opciones varias. Algunas de estas opciones al clickarlas, abrirán otra ventana a parte.
Algunas opciones llevan checkbox a su derecha (recuadritos blancos).
Al clickar en la opción o el checkbox, sale un tick confirmando que está marcado.

Por ejemplo al marcar la opción de ver el código fuente se añadaría el mismo a la página. (Ya está añadido el código fuente, pero lo hice por url, sin interfaz)

Las opciones amarillo, no se verían. Pero al arrastrar el menú (rojo transparete detro de recuadro rojo) se desplazarían hacia arriba las letras amarillas haciéndose visibles esas opciones en la interfaz. Y las en blanco irían desapareciendo hacia arriba.

Al volver a pulsar el icono, se ocultaría el menú con la opciones.

Debería empezar por el principio, crear ese menu/contenedor. Para posteriormente meterle las opciones dentro.

No tengo ni la menor idea de como hacerlo.

@XSStringManolo

Conseguí hacerlo. Comparto el código por si a alguien le interesa añadir un menú/ventana de este tipo a su programa.
Pensé que iba a tener que hacerlo a lo bruto haciendo intents, layouts, manejar focus, transparencias, con código Java,
pero vi que la listView es sencilla de implementar, scrolleable y captura focus sin hacer nada. Asique es la opción más
que perfecta para este tipo de menús.
Hay muchas otras formas de hacerlo, pero daban problemas que había que manejar a mano, el rendiemiento era peor
y el código más extenso y complejo.

Aquí una imagen del resultado:
http://stringmanolo.byethost12.com/Menu.jpg
Ando sin datos en el móvil asique le bajé mucho la calidad a la imagen.
En el programa se ve perfecto.

En el archivo de la actividad principal java:
[code=java]@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

YoUsoUnWebViewPodeisUsarElLayoutDeVuestroPrograma = (WebView)findViewById(R.id.webkit);

/* El View que uso como fondo de la venanita: */
rectanguloMenuIcono = (View)findViewById(R.id.RectanguloMenuIcono);

/* Por defecto no es visible hasta que se pulse el icono */
rectanguloMenuIcono.setVisibility(View.INVISIBLE);

listView=(ListView)findViewById(R.id.listView);
textView=(TextView)findViewById(R.id.textView);

/* Tengo las opciones que muestro en el menú definidas en el archivo strings como items.
El Adapter hace de intermediario entre la lista y los items.*/
listItem = getResources().getStringArray(R.array.array_technology);
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, android.R.id.text1, listItem);
listView.setAdapter(adapter);

/* Aquí un Listener para cuando pinches en una de las opciones/strings mostrar un TOAST (mensaje emergente)
con el nombre de dicho string. */
listView.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
   @Override
   public void onItemClick(AdapterView<?> adapterView, View view, int position, long l)
{
String value=adapter.getItem(position);
Toast.makeText(getApplicationContext(),value,Toast.LENGTH_SHORT).show();
}
});

/* Por defecto no son visibles hasta que se pulse el icono */
listView.setVisibility(View.INVISIBLE);
textView.setVisibility(View.INVISIBLE);

/* Llamo a Config desde el icono en el archivo xml del layout en un onClick */
public void Config(View view)
{

/* Cuando se pulsa el icono. Si el menú está escondido muestra el menú, la lista y el texto de la lista */

if(rectanguloMenuIcono.getVisibility() == View.INVISIBLE)
{ rectanguloMenuIcono.setVisibility(View.VISIBLE);
listView.setVisibility(View.VISIBLE);
textView.setVisibility(View.VISIBLE);
}

/* Cuando se pulsa el icono. Si el menú ya se está viendo, oculta todo.
else
{ rectanguloMenuIcono.setVisibility(View.INVISIBLE); listView.setVisibility(View.INVISIBLE);
textView.setVisibility(View.INVISIBLE);
}
}



Este es el archivo de strings xml donde declaré la opciones que quiero mostrar en un array:
Código (xml) [Seleccionar]
<resources>

<string name="app_name">NombreDeTuAplicación</string>
<string name="title_activity_main">MAIN_ACTIVITY</string>
   
<string-array name="array_technology"> 
<item>Motor De Busqueda</item> 
<item>Codigo fuente</item> 
<item>Guardar Pagina</item>
<item>Interfaz</item> 
<item>Historial</item> 
<item>Tecnologías</item> 
<item>Compartir</item> 
<item>Acerca De</item> 
<item>Buscar</item> 
<item>Vista de Ordenador</item> 
<item>Favoritos</item> 
<item>Salir</item> 
</string-array> 

</resources>



En la carpeta drawable un shape xml:
Código (xml) [Seleccionar]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#90B30000"/>
<corners android:radius="5px"/>
<stroke android:width="1dip" android:color="#FF000000"/>
</shape>

La figura es un rectángulo.
De color le puse rojo. Los colores están en decimal y los valores van desde 0 hasta 255.
Los dos primeros números representan la transparencia. 01 transparente de todo y FF opaco.
Yo le puse 90 de transparecia que entre 0 y 255 es bastante transparente.
Despues se representan los colores RGB. r=B3, g=00, b=00.
Puedes calcular el color a mano, ir probando o usar el colorPicker de la web de W3schools para
obtener el color en hexadecimal. Te faltaría añadir la transparencia al principio.
corner radius es la cantidas de suavizado en los bordes, a más pixeles, más redondos son los bordes del menú.
stroke es el borde de la ventana. Yo le puse una linea negra muy fina.

No le puse un tamaño definido para que se adapte al View que uso en el layout.



En el layout principal xml:
Código (xml) [Seleccionar]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#FF000000" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
     
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<VuestroProgramaYoUsoUnWebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webkit"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="46dp"
<!-- El 46 lo tengo de margen porque tengo la barra de URLs arriba y pongo el webview debajo -->
/>
 
<View
android:id="@+id/RectanguloMenuIcono"

<!-- El scrollbars en el View aseguraría que sobra, lo dejo por si acaso, que no probé xD -->
android:scrollbars="vertical"

<!-- Ajusto el View donde quiero -->
android:layout_alignParentLeft="true"
                 
android:layout_marginTop="44dp"
android:layout_alignParentTop="true"

<!-- Tamaño de la ventana -->
android:layout_width="200dp"
android:layout_height="250dp"

<!-- Aquí el nombre del archivo que tiene el Shape con el color transparente de fondo -->
android:background="@drawable/aquiElNombreDelArchivoXMLconElShape"   
/>

<!-- Este es el contenedor de la lista.  Puedes modificarlo para ahorrarte el View, yo lo hice así por si quereis
añadirle algo de forma independiente -->
<ListView 
android:id="@+id/listView" 
android:layout_marginTop="44dp"
android:layout_alignParentTop="true"
   
android:layout_width="200dp"
android:layout_height="250dp"
/> 

<!-- Esto es el View del texto (opciones) que se van mostrar. Tiene scrollbar vertical y mismo tamaño que la
ventana roja transparete para que se salga el listado fuera y solo muestre un número pequeño de opciones.
Entonces el resto de opciones que no se ven las puedes ver arrastrando.-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/textView" 
   
android:textStyle="bold" 
android:textAppearance="?android:attr/textAppearanceMedium" 
     
android:textColor="#4d4d4d" 
   
android:scrollbars="vertical"

android:layout_alignParentLeft="true"
                 
android:layout_marginTop="44dp"
android:layout_alignParentTop="true"
   
android:layout_width="200dp"
android:layout_height="250dp"
/>

<!-- Este es el icono que muestra/oculta el menú con las opciones.
En la imagen que adjunto, podeis ver que el icono es redondo.
Esto es debido a que lo recorté redondo como .png con un editor de imágenes que
respeta transparencias.
<ImageView
android:id="@+id/favicon"
android:layout_width="32dp"
android:layout_height="32dp"
       
android:layout_alignParentLeft="true"
android:layout_marginLeft="6dp"
android:layout_alignParentTop="true"

<!-- Al pinchar en el icono se llama a Config, que hace visible o ocuta la ventana y las opciones -->
android:onClick="Config"     
         
<!-- Simplemente guardais la imagen de vuestro icono en la carpeta drawable.
Yo usé 128*128pixeles en el editor e hice resize a 32 en el ImageView. -->
android:src="@drawable/nombreDeLaImagenIconoPng" />


Espero que a alguien le sirva.