- Presentación.
- A veces queremos poner varios controles en la pantalla y no tenemos sitio, no caben en la pantalla. Podemos solucionarlo creando varios Layout o varios Activity, pero otra manera más simple de situarlos es mediante un HorizontalScrollView.
- Vamos a crear mediante el Designer un "Layout", con un HorizontalScrollView y tres botones a los que llamaremos btn1, btn2 y btn3. |
|
_______________________
- Designer. Layout.
Designer - Layout
|
|
Creamos mediante el Designer un layout.
Lo llamamos Layout.
Situamos:
HorizontalScrollView
Label1
Boton (btn1) ...... Text = Izquierda
Boton (btn2) ...... Text = Centro
Boton (btn3) ...... Text = Derecha
A los Button le damos de nombre:
btn1
btn2
btn3
|
_______________________
- Código.
- Con esta línea establecemos un HorizontalScrollView que tiene el triple del ancho de la pantalla. (3 * 100%x)
HorizontalScrollView1.Panel.Width = 3 * 100%x
- Con estas líneas establecemos varios Botones:
uno a 50 de la derecha,
otro a 50 + ancho pantalla de la derecha
otro a 50 + doble ancho pantalla de la derecha.
HorizontalScrollView1.Panel.AddView(Boton1, 50, 20, 200, 60)
HorizontalScrollView1.Panel.AddView(Boton2, 50 + 100%x, 20, 200, 60)
HorizontalScrollView1.Panel.AddView(Boton3, 50 + 200%x, 20, 200, 60)
- Cuando pulsamos uno de los tres botones creados en el Layout (btn1, btn2 o btn3), el HorizontalScrollView se situa en la Posición requerida en cada botón.
HorizontalScrollView1.ScrollPosition = 2 * 100%x
- Cuando pulsamos uno de los tres botones que se encuentran en el HorizontalScrollView, saldrá un mensaje en el Label1.
Label1.Text = "Has pulsado en botón 3."
- Podemos desplazar el HorizontalScrollView, mediante los botones anteriores o arrastrando la pantalla.
Copia y pega este código en un nuevo proyecto |
Sub Process_Globals
' Juan Antonio Villalpando
' juana1991@yahoo.com
' marzo 2013
' kio4.com
End Sub
Sub Globals
Dim HorizontalScrollView1 As HorizontalScrollView
Dim Boton1, Boton2, Boton3 As Button
Dim Label1 As Label
End Sub
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout")
Dim GD As GradientDrawable
GD.Initialize("TR_BL", Array As Int(Colors.Green, Colors.Red))
HorizontalScrollView1.Panel.Background = GD
Boton1.Initialize("Boton1")
Boton1.Text = "Pulsa el Botón1"
Boton2.Initialize("Boton2")
Boton2.Text = "Pulsa el Botón2"
Boton3.Initialize("Boton3")
Boton3.Text = "Pulsa el Botón3"
HorizontalScrollView1.Panel.Width = 3 * 100%x
HorizontalScrollView1.Panel.AddView(Boton1, 50, 20, 300, 200)
HorizontalScrollView1.Panel.AddView(Boton2, 50 + 100%x, 20, 300, 200)
HorizontalScrollView1.Panel.AddView(Boton3, 50 + 200%x, 20, 300, 200)
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub
' Botones del Layout - Izquierda, Centro, Derecha. Sub btn1_Click
HorizontalScrollView1.ScrollPosition = 0
End Sub
Sub btn2_Click
HorizontalScrollView1.ScrollPosition = 100%x
End Sub
Sub btn3_Click
HorizontalScrollView1.ScrollPosition = 2 * 100%x
End Sub
' Botón sobre el HorizontalScrollView Sub Boton1_Click
Label1.Text = "Has pulsado en botón 1."
End Sub
Sub Boton2_Click
Label1.Text = "Has pulsado en botón 2."
End Sub
Sub Boton3_Click
Label1.Text = "Has pulsado en botón 3."
End Sub |
_______________________________________________
- Veamos otra manera de simplificar el código. EventName. Tag.
- horizontalscrollview_2.zip
(Es conveniente consultar el tutorial 17.- Estudio la propiedad Tag)
En el Designer vamos a los Botones y ponemos en los tres la propiedad EventName en boton.
También cambiamos la propiedad Tag. Aquí ponemos en cada botón un identificador.
En el btn1 ponemos el Tag = 0
En el btn2 ponemos el Tag = 1
En el btn3 ponemos el Tag = 2
|
|
Podemos simplificar los códigos de los botones btn1, btn2 y btn3.
Cuando ejecutemos el EventName: boton (los tres botones tienen EventName a boton)
Se consulta el botón pulsado (Sender) y se toma la Propiedad Tag (0, 1, 2)
Se multiplica la Propiedad Tag por el ancho de pantalla (100%x).
Es decir, hemos englobado a los códigos de los tres botones en uno.
Sub boton_Click
Dim v As View
v = Sender
HorizontalScrollView1.ScrollPosition = v.Tag * 100%x
End Sub
________________________
Ahora vamos a ver los botones que están en el HorizontalScrollView. Le debemos asignar un EventName (Boton1.Initialize("botonhsv")) común a todos y un Tag (Boton1.Tag = "el_uno") particular a cada uno, esto lo hacemos de la manera que muestro en el código.
Luego creamos una Subrutina para el EventName botonhsv en donde consultamos el Tag del botón pulsado.
Dependiendo de cada Tag hará un Case.
Cuando el View se crea mediante código el EventName se establece en el Designer. EventName = boton.
Cuando el View se crea por código el EventName se establece en el Inititialize: Boton1.Initialize("botonhsv").
Copia y pega este código. |
Sub Process_Globals
' Juan Antonio Villalpando
' juana1991@yahoo.com
' marzo 2013
' kio4.com
End Sub
Sub Globals
Dim HorizontalScrollView1 As HorizontalScrollView
Dim Boton1, Boton2, Boton3 As Button
Dim Label1 As Label
End Sub
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout")
Dim GD As GradientDrawable
GD.Initialize("TR_BL", Array As Int(Colors.Green, Colors.Red))
HorizontalScrollView1.Panel.Background = GD
Boton1.Initialize("botonhsv")
Boton1.Text = "Pulsa el Botón1"
Boton1.Tag = "el_uno"
Boton2.Initialize("botonhsv")
Boton2.Text = "Pulsa el Botón2"
Boton2.Tag = "el_dos"
Boton3.Initialize("botonhsv")
Boton3.Text = "Pulsa el Botón3"
Boton3.Tag = "el_tres"
' HorizontalScrollView1.Panel.Height = 400dip
HorizontalScrollView1.Panel.Width = 3 * 100%x
HorizontalScrollView1.Panel.AddView(Boton1, 50, 20, 300, 200)
HorizontalScrollView1.Panel.AddView(Boton2, 50 + 100%x, 20, 300, 200)
HorizontalScrollView1.Panel.AddView(Boton3, 50 + 200%x, 20, 300, 200)
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub
' Botones del Layout - Izquierda, Centro, Derecha.
Sub boton_Click
Dim v As View
v = Sender
HorizontalScrollView1.ScrollPosition = v.Tag * 100%x
End Sub
' Botón sobre el HorizontalScrollView
Sub botonhsv_Click
Dim hsv As View
hsv = Sender
Select hsv.Tag
Case "el_uno"
Label1.text="Has pulsado el Uno"
Case "el_dos"
Label1.text="Has pulsado el Dos"
Case "el_tres"
Label1.text="Has pulsado el Tres"
End Select
End Sub
|
_____________________________________
- Módulo de Código SlidingPanels.
- También podemos crear paneles deslizantes con el Módulo de Código SlidingPanels y la librería Animation.
________________________________