elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Java
| | | |-+  Qué tipo de menú utilizar para esto que quiero hacer? Android.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Qué tipo de menú utilizar para esto que quiero hacer? Android.  (Leído 2,177 veces)
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Qué tipo de menú utilizar para esto que quiero hacer? Android.
« 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.


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?


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Serapis
Colaborador
***
Desconectado Desconectado

Mensajes: 3.351


Ver Perfil
Re: Qué tipo de menú utilizar para esto que quiero hacer? Android.
« Respuesta #1 en: 29 Octubre 2019, 12:17 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.


« Última modificación: 29 Octubre 2019, 12:22 pm por NEBIRE » En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: Qué tipo de menú utilizar para esto que quiero hacer? Android.
« Respuesta #2 en: 29 Octubre 2019, 20:18 pm »

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.
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: Qué tipo de menú utilizar para esto que quiero hacer? Android.
« Respuesta #3 en: 3 Noviembre 2019, 18:45 pm »

Código:
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
  1. <resources>
  2.  
  3. <string name="app_name">NombreDeTuAplicación</string>
  4. <string name="title_activity_main">MAIN_ACTIVITY</string>
  5.  
  6. <string-array name="array_technology">  
  7. <item>Motor De Busqueda</item>  
  8. <item>Codigo fuente</item>  
  9. <item>Guardar Pagina</item>
  10. <item>Interfaz</item>  
  11. <item>Historial</item>  
  12. <item>Tecnologías</item>  
  13. <item>Compartir</item>  
  14. <item>Acerca De</item>  
  15. <item>Buscar</item>  
  16. <item>Vista de Ordenador</item>  
  17. <item>Favoritos</item>  
  18. <item>Salir</item>  
  19. </string-array>  
  20.  
  21. </resources>


En la carpeta drawable un shape xml:
Código
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  3. <solid android:color="#90B30000"/>
  4. <corners android:radius="5px"/>
  5. <stroke android:width="1dip" android:color="#FF000000"/>
  6. </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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:background="#FF000000" android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical" >
  6.  
  7. <RelativeLayout
  8. xmlns:android="http://schemas.android.com/apk/res/android"
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:orientation="horizontal" >
  12.  
  13. <VuestroProgramaYoUsoUnWebView
  14. xmlns:android="http://schemas.android.com/apk/res/android"
  15. android:id="@+id/webkit"
  16. android:layout_width="fill_parent"
  17. android:layout_height="fill_parent"
  18. android:layout_marginTop="46dp"
  19. <!-- El 46 lo tengo de margen porque tengo la barra de URLs arriba y pongo el webview debajo -->
  20. />
  21.  
  22. <View
  23. android:id="@+id/RectanguloMenuIcono"
  24.  
  25. <!-- El scrollbars en el View aseguraría que sobra, lo dejo por si acaso, que no probé xD -->
  26. android:scrollbars="vertical"
  27.  
  28. <!-- Ajusto el View donde quiero -->
  29. android:layout_alignParentLeft="true"
  30.  
  31. android:layout_marginTop="44dp"
  32. android:layout_alignParentTop="true"
  33.  
  34. <!-- Tamaño de la ventana -->
  35. android:layout_width="200dp"
  36. android:layout_height="250dp"
  37.  
  38. <!-- Aquí el nombre del archivo que tiene el Shape con el color transparente de fondo -->
  39. android:background="@drawable/aquiElNombreDelArchivoXMLconElShape"  
  40. />
  41.  
  42. <!-- Este es el contenedor de la lista.  Puedes modificarlo para ahorrarte el View, yo lo hice así por si quereis
  43. añadirle algo de forma independiente -->
  44. <ListView  
  45. android:id="@+id/listView"  
  46. android:layout_marginTop="44dp"
  47. android:layout_alignParentTop="true"
  48.  
  49. android:layout_width="200dp"
  50. android:layout_height="250dp"
  51. />  
  52.  
  53. <!-- Esto es el View del texto (opciones) que se van mostrar. Tiene scrollbar vertical y mismo tamaño que la
  54. ventana roja transparete para que se salga el listado fuera y solo muestre un número pequeño de opciones.
  55. Entonces el resto de opciones que no se ven las puedes ver arrastrando.-->
  56. <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
  57. android:id="@+id/textView"  
  58.  
  59. android:textStyle="bold"  
  60. android:textAppearance="?android:attr/textAppearanceMedium"  
  61.  
  62. android:textColor="#4d4d4d"  
  63.  
  64. android:scrollbars="vertical"
  65.  
  66. android:layout_alignParentLeft="true"
  67.  
  68. android:layout_marginTop="44dp"
  69. android:layout_alignParentTop="true"
  70.  
  71. android:layout_width="200dp"
  72. android:layout_height="250dp"
  73. />
  74.  
  75. <!-- Este es el icono que muestra/oculta el menú con las opciones.
  76. En la imagen que adjunto, podeis ver que el icono es redondo.
  77. Esto es debido a que lo recorté redondo como .png con un editor de imágenes que
  78. respeta transparencias.
  79. <ImageView
  80. android:id="@+id/favicon"
  81. android:layout_width="32dp"
  82. android:layout_height="32dp"
  83.  
  84. android:layout_alignParentLeft="true"
  85. android:layout_marginLeft="6dp"
  86. android:layout_alignParentTop="true"
  87.  
  88. <!-- Al pinchar en el icono se llama a Config, que hace visible o ocuta la ventana y las opciones -->
  89. android:onClick="Config"    
  90.  
  91. <!-- Simplemente guardais la imagen de vuestro icono en la carpeta drawable.
  92. Yo usé 128*128pixeles en el editor e hice resize a 32 en el ImageView. -->
  93. android:src="@drawable/nombreDeLaImagenIconoPng" />

Espero que a alguien le sirva.
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
quiero hacer algo como esto...
Electrónica
peib0l 2 4,088 Último mensaje 18 Junio 2007, 11:27 am
por lu8emw
quiero hacer algo como esto para mi pagina
Desarrollo Web
new_protocolo 4 4,285 Último mensaje 30 Agosto 2023, 10:10 am
por klakla
[BATCH] [ANDROID] A ver si se podria hacer esto... :D
Scripting
erikcatala 9 9,052 Último mensaje 6 Junio 2013, 10:02 am
por erikcatala
hola a todos quiero hacer esto
Java
Beginner Web 0 1,972 Último mensaje 4 Junio 2021, 21:54 pm
por Beginner Web
Bueno banda quiero hacer un script en batch que modifique esto
Scripting
Ronxs 6 2,115 Último mensaje 21 Febrero 2024, 13:39 pm
por elektrostudios2
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines