B4A Añadir controles mediante código. Actuar en la pantalla mediante el botón "MENÚ". AddMenuItem.

18.- Añadir controles mediante código. Actuar en la pantalla mediante el botón "MENÚ". AddMenuItem.

- Tutorial. Añadir los controles mediante el código y
Controles mediante el menú.

- Presentación.

- Añadir los controles mediante el código.

- En Visual Basic, situamos los controles (botones, casilleros, etiquetas,...) arrastrando los iconos de la barra de herramientas al Formulario.
- En Basic4Android, situamos los controles mediante el Designer.

- Pero tanto en Visual Basic como en B4A, los controles se pueden crear directamente desde el código.

NOTA: En el tutorial 40.- Crear controles mediante el código. Array de controles, hay más ejemplos sobre la manera de crear controles mediante código.

En este ejemplo se crean varios controles (se llaman View) mediante el código.

En este ejemplo no se utiliza el Designer, tampoco tenemos archivo de Layout. Ni se carga el Layout al iniciar el programa.

- Recuerda que los Layout (en caso de existir) se guarda como archivo en la carpeta: C\Android\Programa\Files\layout.bal

- Simplemente copia y pega el código siguiente:

Código del programa en Basic4Android

' Juan Antonio Villalpando
' juana1991@yahoo.com

Sub Process_Globals


End Sub

Sub Globals
 Dim boton, boton2 As Button
 Dim etiqueta As Label
 Dim casillero As EditText
 Dim scroll As SeekBar
 Dim listado As ListView
 Dim desplegable As Spinner
 Dim Panelg As Panel

End Sub

Sub Activity_Create(FirstTime As Boolean)

    ' Degradado del Activity
    Dim GD As GradientDrawable
    GD.Initialize("TR_BL", Array As Int(Colors.Green, Colors.Red))
    Activity.Background = GD

    ' Crea Botón (Button)
    boton.Initialize("boton")
    boton.TextColor = Colors.Red
    boton.Text = "Pulsa"
    Activity.AddView(boton, 0dip, 10dip, 100%x, 10%y)

    ' Crea etiqueta (Label)
    etiqueta.Initialize("etiqueta")
    etiqueta.TextSize = 20
    etiqueta.TextColor = Colors.Yellow
    etiqueta.Color = Colors.Red
    etiqueta.Gravity = Gravity.CENTER
    etiqueta.Text = "Label es Etiqueta"
    Activity.AddView(etiqueta, 20dip, 70dip, 200dip, 40dip)
    
    ' Crea casillero (EditText)
    casillero.Initialize("casillero")
    casillero.TextSize = 20
    casillero.Color=Colors.LightGray
    casillero.Gravity = Gravity.Right
    casillero.Text = "Introduce nombre"
    Activity.AddView(casillero, 20dip, 120dip, 200dip, 40dip)
    
    ' Crea Scroll (SeekBar)
    scroll.Initialize("scroll")
    scroll.Max = 100
    Activity.AddView(scroll, 5dip, 170dip, 300dip, 30dip)
    
    ' Crea listado (ListView)
    listado.Initialize("listado")
    listado.Color=Colors.Yellow
    listado.TwoLinesLayout.ItemHeight = 50dip
    listado.TwoLinesLayout.Label.TextSize = 10dip
    listado.TwoLinesLayout.Label.TextColor = Colors.Blue
    listado.TwoLinesLayout.Label.Gravity = Gravity.CENTER
    listado.FastScrollEnabled=True
    listado.clear
    listado.AddTwoLines("España", "ES")
    listado.AddTwoLines("Argentina", "AR")
    listado.AddTwoLines("México", "MX")
    listado.AddTwoLines("Chile", "CH")
    Activity.AddView(listado, 20dip, 230dip, 200dip, 90dip)
    
    ' Crea desplegable (Spinner)
    desplegable.Initialize("desplegable")
   ' desplegable.Color=Colors.Blue
    desplegable.TextColor = Colors.Red
    desplegable.TextSize = 14
    desplegable.clear
    desplegable.Add("España")
    desplegable.Add("Argentina")
    desplegable.Add("México")
    desplegable.Add("Chile")
    desplegable.AddAll(Array As String("Colombia","Venezuela","Ecuador"))
    Activity.AddView(desplegable, 20dip, 350dip, 200dip, 36dip)
    
    ' Crea panelg (Panel)
    Panelg.Initialize("panelg")
    Panelg.Color=Colors.Magenta
    Activity.AddView(Panelg, 20dip, 400dip, 270dip, 80dip)
    
    ' Crea un boton2 dentro del Panelg
    boton2.Initialize("boton2")
    boton2.TextColor = Colors.Green
    boton2.Text = "Botón dentro del Panel"
    Panelg.AddView(boton2, 0dip, 10dip, 80%x, 10%y)


End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub boton_Click
   etiqueta.Text = "hola"
End Sub

Sub scroll_ValueChanged (Value As Int, UserChanged As Boolean)
    etiqueta.Text= scroll.Value
End Sub


Sub listado_ItemClick (Position As Int, Value As Object)

etiqueta.Text = Position & "-" & Value

Select Position
Case 0
' panelg.LoadLayout("espana")
Case 1
' panelg.LoadLayout("argentina")
Case 2
' panelg.LoadLayout("mexico")
Case 3
' panelg.LoadLayout("chile")
End Select

End Sub

NOTA: si el casillero.TextSize = es menor de 31, su texto saldrá descentrado verticalmente.

- Cuando vamos a crear un View por código...

- Primero declaramos:
Dim etiqueta As Label

- Después Inicializamos:
etiqueta.Initialize("etiqueta")

- Luego ponemos las Propiedades...
...
etiqueta.Text = "Label es Etiqueta "
...

- Al final agregamos el View al Activity o a un Panel, estableciendo sus dimensiones.
Activity.AddView(etiqueta, 20%x, 10dip, 60%x, 30dip)

- dip es un elemento de visualización, algo así como un pixel, dependiento del tamaño y calidad de la pantalla, ésta tendrá más o menos dip.

- Puedes utilizar los códigos anteriores para copiarlos en tus programas como pantillas de creación de controles.

- 100%x significa todo el ancho de la pantalla.
- 100%y significa todo el alto de la pantalla.
- Podemos poner otras proporciones: 20%x

- Situación de tamaño de un control (View)

Lugar_donde_está.AddView (nombre, separación_desde_izquierda, separación_desde_arriba, ancho, alto)

- Un Control suele estar dentro del Activity o dentro de un Panel. El sitio donde está es su "Parent".

Degradado de color

Los controles pueden tener degradado de color, creado en el código o mediante el Designer.

Los botones pueden tener un color cuando están en reposo (Enabled Drawable) y otro cuando están pulsados (Pressed Drawable). Además otro color cuando están deshabilitados (Disbled Drawable).

Creación de botón con degradado mediante código

' Crea botón (Button)
boton.Initialize("boton")
boton.TextColor = Colors.Red
boton.Text = "Pulsa"

' Degradado

GD.Initialize("TOP_BOTTOM", Array As Int(Colors.Yellow, Colors.Blue))
GD.CornerRadius = 10dip
boton.Background = GD
Activity.AddView(boton, 0dip, 10dip, 100%x, 10%y)

"TOP_BOTTOM" es la orientación del degradado, aquí tienes más orientaciones...

Activity

El Activity (es como el Formulario) también tiene Propiedades, además fíjate que algunas opciones tienen un desplegable para aumentar sus posibilidades.

__________________________

- Crear CheckBox, RadioButton e ImageView.

- Eso lo vemos en el tutorial 40.- Crear controles mediante el código. Array de controles

- Es parecido a crear botón, cambiamos la palabra Button por CheckBox.

__________________________

- Botón creado mediante código con imagen de fondo.
- Botón redondo.

Código del programa en Basic4Android

__________________________________
Botón creado mediante código con imagen de fondo.


Sub Process_Globals

End Sub

Sub Globals
    Dim bt As Button
    Dim sld As StateListDrawable
    Dim bmpTeam, bmpTeam2  As BitmapDrawable
    Dim green As ColorDrawable
End Sub

Sub Activity_Create(FirstTime As Boolean)
    bt.Initialize("bt")
    green.Initialize(Colors.RGB(8, 125, 0), 10dip)
    bmpTeam.Initialize(LoadBitmap(File.DirAssets,"fresa.gif"))
    bmpTeam2.Initialize(LoadBitmap(File.DirAssets,"pera.gif"))
    sld.Initialize
    sld.AddState(sld.State_Disabled, bmpTeam )  ' when Not pressed
    ' sld.AddState(sld.State_Pressed,green )    ' when pressed
    sld.AddState(sld.State_Pressed, bmpTeam2 )  ' when pressed
    bt.Background = sld
    bt.Text="Pulsa"
    bt.TextColor=Colors.White
    bt.TextSize=24
    Activity.AddView(bt, 0, 0, 30%x, 75dip)
End Sub


Sub bt_Click
   ' Código del botón
End Sub

___________________________________________

Botón Redondo mediante Designer.

Establecemos Drawable: StatelistDrawable.
Ponemos los Corner radius a la mitad de Width y Height.

_____________________________________________________
Botón Redondo mediante Código.

Consulta este envío del foro.

- Adaptado de esta página de los foros.

- En la carpeta Files ponemos dos imágenes: fresa.gif y pera.gif

- Copiamos y pegamos este código.

- Simplemente es un Botón con una imagen de fondo (fresa.gif).

Cuando lo pulsamos presenta otra imagen de fondo (pera.gif).

_________________
Botón creado mediante Designer con imagen de fondo.

Recordamos que también podemos poner un botón con imagen mediante el Designer.

Button properties / Drawable / StatelistDrawable
Enabled Drawable / BitmapDrawable

___________________

- Controles mediante el menú

- En este caso podemos sacar distintos botones en la parte de abajo del Activity, pulsando el botón redondo "MENU" del emulador.
Bajar el programa: UserInterfaceMenu.zip (de Basic4Android)

Código del programa en Basic4Android

Este programa consta de cuatro Layout, que se encuentran en C:\Android\UserInterfaceMenu\Files

Recuerda que podemos entrar en cada Layout, mediante el Designer / File / Open

'Activity module
Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    Dim pnlPage1, pnlPage2, pnlPage3 As Panel        ' Declares the three panels
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Main")                                    ' Loads "Main" layout file
    
    pnlPage1.Initialize("")                                            ' Initializes pnlPage1
    pnlPage1.LoadLayout("Page1")                                ' Loads "Page1" layout file
    Activity.AddView(pnlPage1,0,0,100%x,100%y)    ' Adds pnlPage1 to Activity
    pnlPage1.Visible=True                                                ' Sets pnlPage1 to Visible
    
    pnlPage2.Initialize("")                                            ' Initializes pnlPage2
    pnlPage2.LoadLayout("Page2")                                ' Loads "Page2" layout file
    Activity.AddView(pnlPage2,0,0,100%x,100%y)    ' Adds pnlPage1 to Activity
    pnlPage2.Visible=False                                            ' Sets pnlPage1 to Visible
    
    pnlPage3.Initialize("")                                            ' Initializes pnlPage3
    pnlPage3.LoadLayout("Page3")                                ' Loads "Page3" layout file
    Activity.AddView(pnlPage3,0,0,100%x,100%y)    ' Adds pnlPage1 to Activity
    pnlPage3.Visible=False                                            ' Sets pnlPage1 to Visible
    
    Activity.AddMenuItem("Page 1","mnuPage1")        ' Adds menu item mnuPage1
    Activity.AddMenuItem("Page 2","mnuPage2")        ' Adds menu item mnuPage2
    Activity.AddMenuItem("Page 3","mnuPage3")        ' Adds menu item mnuPage3
End Sub

Sub mnuPage1_Click
    pnlPage2.Visible = False                                        ' Hides pnlPage2
    pnlPage3.Visible = False                                        ' Hides pnlPage3
    pnlPage1.Visible = True                                            ' Sets pnlPage1 to Visible
End Sub

Sub mnuPage2_Click
    pnlPage1.Visible = False                                        ' Hides pnlPage1
    pnlPage3.Visible = False                                        ' Hides pnlPage3
    pnlPage2.Visible = True                                            ' Sets pnlPage2 to Visible
End Sub

Sub mnuPage3_Click
    pnlPage1.Visible = False                                        ' Hides pnlPage1
    pnlPage2.Visible = False                                        ' Hides pnlPage2
    pnlPage3.Visible = True                                            ' Sets pnlPage3 to Visible
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

______________________

- Otro ejemplo de utilización del botón menú.

Otro ejemplo para obtener un Menú al pulsar el botón "Menú" del móvil.

- Este ejemplo no utililiza "Layout", todos los controles se crean en el código.

- Activa la Librería: Phone si quieres que funcionen las opciones de visualización de páginas web en este programa.

- Simplemente copia y pega este código en un proyecto nuevo, recuerda activar la librería Phone.

Código del programa en Basic4Android

' Juan Antonio Villalpando
' juana1991@yahoo.com

' Activar la Librería Phone

Sub Process_Globals

End Sub

Sub Globals
    Dim Panel0, Panel1, Panel2 As Panel
    Dim Label0, Label1, Label2, Label3, Label4 As Label
    Dim Button1, Button2 As Button
    Dim EditText1, EditText2 As EditText
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' Creamos Tres Paneles, uno "encima del otro"
    ' Lueo los haremos visibles según nos convenga.
    Panel0.Initialize("Panel0")
    Panel0.Color = Colors.Yellow
    Activity.AddView(Panel0, 0, 0, 100%x, 100%y)
    Panel1.Initialize("Panel1")
    Panel1.Color = Colors.Green
    Activity.AddView(Panel1, 0, 0, 100%x, 100%y)
    Panel2.Initialize("Panel2")
    Panel2.Color = Colors.Red
    Activity.AddView(Panel2, 0, 0, 100%x, 100%y)
    
    Panel0.Visible = True
    Panel1.Visible = False
    Panel2.Visible = False
    
    ' -------------------------------------------------
' Elementos del Panel0

     ' Crea etiqueta Label0 en el Panel0
       Label0.Initialize("Label0")
       Label0.TextColor = Colors.Red
       Label0.Text = "PORTADA"
       Panel0.AddView(Label0, 5, 50, 200, 30)
    
' -------------------------------------------------
' Elementos del Panel1    
    
     ' Crea etiqueta Label1 en el Panel1
       Label1.Initialize("Label1")
       Label1.TextColor = Colors.Red
       label1.Text = "Introduce tu nombre en el casillero"
       Panel1.AddView(Label1, 5, 50, 350, 30)
       
       ' Crea EditText1 en el Panel1
       EditText1.Initialize("EditText1")
       EditText1.TextColor = Colors.Black
       Panel1.AddView(EditText1, 5, 100, 200, 60)
       
       ' Crea Button1 en el Panel1
       Button1.Initialize("Button1")
       Button1.Text = "Pulsa"
       Panel1.AddView(Button1, 5, 200, 200, 60)
       
       ' Crea etiqueta Label2 en el Panel1
       Label2.Initialize("Label2")
       Label2.TextColor = Colors.Blue
       Label2.Text = "----------"
       Panel1.AddView(Label2, 5, 300, 200, 30)
       
' -------------------------------------------------
' Elementos del Panel2    
       
       
        ' Crea etiqueta Label3 en el Panel2
       Label3.Initialize("Label3")
       Label3.TextColor = Colors.Blue
       label3.Text = "Introduce tu edad en el casillero"
       Panel2.AddView(Label3, 5, 50, 350, 30)
       
       ' Crea EditText2 en el Panel2
       EditText2.Initialize("EditText2")
       EditText2.TextColor = Colors.Black
       Panel2.AddView(EditText2, 5, 100, 200, 60)
       
       ' Crea Button2 en el Panel2
       Button2.Initialize("Button2")
       Button2.Text = "Pulsa"
       Panel2.AddView(Button2, 5, 200, 200, 60)
       
       ' Crea etiqueta Label4 en el Panel2
       Label4.Initialize("Label4")
       Label4.TextColor = Colors.Yellow
       Label4.Text = "----------"
       Panel2.AddView(Label4, 5, 300, 200, 30)
' ------------------------------------------------------   
    
   ' Añadimos elementos al Menu
    Activity.AddMenuItem("Portada","menu")
    Activity.AddMenuItem("Ve al Panel1","menu")
    Activity.AddMenuItem("Ve al Panel2","menu")
    Activity.AddMenuItem("Ve a Meneame","menu")
    Activity.AddMenuItem("Ve al Mundo","menu")
    

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub menu_Click
'---------------------------------------------
'Menu
Select Sender
    '---------------------------------------------
        Case "Portada"
        Panel0.Visible = True
        Panel1.Visible = False
        Panel2.Visible = False

        
    '---------------------------------------------
    Case "Ve al Panel1"
        Panel1.BringToFront
        Panel1.Visible = True
        
        Panel2.Visible = False
        
    '---------------------------------------------
    Case "Ve al Panel2"
        Panel1.Visible = False
    
        Panel2.BringToFront
        Panel2.Visible = True
        
    '---------------------------------------------

    Case "Ve a Meneame"
        Dim p As PhoneIntents
        StartActivity(p.OpenBrowser("http://www.meneame.net"))
    
    '---------------------------------------------
    Case "Ve al Mundo"
        Dim PP As PhoneIntents
        StartActivity(PP.OpenBrowser("http://www.elmundo.es"))
    
    '---------------------------------------------
End Select

'-------------------------------------
End Sub

Sub Button1_Click
Label2.Text = "Muy bien " & EditText1.Text 
End Sub

Sub Button2_Click
Label4.Text = "Tienes " & EditText2.Text & " años."
End Sub

______________

- AddMenuItem distinto en cada pantalla.

A veces tenemos varios Paneles, como en los casos anteriores, y queremos que cada Panel tenga distintas opciones cuando pulsamos el boton "Menu".
En principio no es posible, ya que los AddMenuItem solo se pueden establecer en el Activity_Create (o en Resume), pero no en otras Subrutinas. (Tal vez dentro de poco las nuevas versiones de B4A tengan la opción de AddRemoveItem).

Una solución es utilizar distintos Activity en vez de Paneles. En cada Activity Creamos sus AddMenuItem y cada Activity tendrá su Activity.LoadLayout("-----").

Basado en un ejemplo del foro llamado TwoActivities, he realizado modificaciones para ilustrar esta forma de hacerlo.

El ejemplo consta de dos pantallas (Activity) y al pulsar el botón "Menú" en cada una de ellas, obtenemos distintas opciones de menú.

Baja este ejemplo: TwoActivities_AddMenuItem.zip.

Código de módulo Main

Sub Process_Globals

End Sub

Sub Globals
    Dim Label1 As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
Activity.AddMenuItem("UNO","uno")
Activity.AddMenuItem("DOS","dos")
Activity.AddMenuItem("TRES","tres")
End Sub

Sub Activity_Resume
    If Activity2.result.Length > 0 Then
        Label1.Text = "You have chosen: " & Activity2.result
    Else
        Label1.Text = "Please press on the button and choose an item."
    End If

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub Button1_Click
    StartActivity(Activity2)
End Sub

Sub uno_Click
Msgbox("Subrutina número UNO", "EL UNO")
End Sub

Sub dos_Click
Msgbox("Subrutina número DOS", "EL DOS")
End Sub

Sub tres_Click
Msgbox("Subrutina número TRES", "EL TRES")
End Sub

Código de módulo Activity2

Sub Process_Globals
    Dim result As String
    result = ""
End Sub

Sub Globals
    Dim ListView1 As ListView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("2")
    For i = 1 To 100
        ListView1.AddSingleLine("Item #" & i)
    Next
Activity.AddMenuItem("ONE","one")
Activity.AddMenuItem("TWO","two")
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub ListView1_ItemClick (Position As Int, Value As Object)
    result = Value 'store the value in the process global object.
    StartActivity(Main) 'show the main activity again
End Sub

Sub one_Click
Msgbox("Number ONE Subroutine", "THE ONE")
End Sub

Sub two_Click
Msgbox("Number TWO Subroutine", "THE TWO")
End Sub

_________________________

- Lugar donde aparece el menú en la pantalla.

En las versiones antiguas de Android, menores de la 4, el menú aparecía abajo en la pantalla.

A partir de la versión 4, aparece arriba en la barra de título, que se denomina Action Bar. Se debe poner un título al Activity.

Si quieres que vuelva a aparecer debajo ve a Project / Manifest Editor y establece un Target de 10, esto es...

<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="10"/>

- Otra cosa que puedes intentar es mantener la SDK que tengas,por ejemplo la 14 y añadir esta línea...

SetApplicationAttribute(android:theme, "@android:style/Theme")

Establecer otro tema

SetApplicationAttribute(android:theme, "@android:style/Theme.Light")

Un tema es un aspecto distinto de controles y pantalla.

________________

- Thema.

Temas transparentes.

Poned en el Path de la configuración un android.jar de una versión mayor de 14

Ver este tutorial.

Activity.Color = Colors .Transparent

Crear estilos.
____________________

- Otra cosa importante. Dimensiones de la pantalla.

En el tutorial de los foros lo explican.

Button1.Width = 100dip ' Ancho del Botón y demas controles, se mide en dip. Si pones dip el tamaño será igual en cualquier dispositivo.

También se puede poner como porcentaje de ancho (x) y alto (y) de la pantalla.

Button1.Right = 100%x

También se puede utilizar

AutoScale(Button1)