Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Ejercicio BoxActivity 1 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 10 de diciembre de 2024 por Ana Isabel J.

6 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues hoy vamos a ver si nos salen los ejercicios que dejamos allá por el último día, más o menos. 00:00:02
Como veis, cada uno de los ejercicios tiene algo y luego activity, ¿no? 00:00:12
Box activity, column activity, row activity. 00:00:18
Y entonces vamos a hacer eso exactamente. 00:00:23
Por cada ejercicio, en el mismo proyecto de ayer, que se llamaba interfaces, 00:00:26
vamos a ir creando activities para cada uno de los ejercicios. 00:00:33
Entonces, vamos a crear la activity, boxActivity. 00:00:38
Esto es así, nos ponemos sobre el paquete y le decimos nueva, ojo, ni fichero ni clase. 00:00:43
bajamos hasta Activity 00:00:50
en Gallery 00:00:52
pues lo de siempre 00:00:54
está vacía 00:00:56
pero le cambiamos el nombre 00:00:58
esto se va a llamar Box Activity 00:01:00
y es importante 00:01:03
que si en un momento dado 00:01:05
queremos lanzarla 00:01:07
en el emulador o en nuestro 00:01:08
propio móvil, le pongamos 00:01:10
aquí Launcher 00:01:13
de momento todas las vamos a hacer Launcher 00:01:13
le damos a Finish 00:01:16
y aquí se pone a grado en hacer sus cositas y nosotros vamos a intentar ir empezando. 00:01:19
Entonces, ¿qué tenemos que hacer? Pues tenemos que hacer una función Composable con contenido similar al siguiente. 00:01:27
Esto, que son dos cajas, dos bugs, una dentro de la otra. Bueno, vamos a empezar por ahí. 00:01:36
Entonces, mientras hagamos cosas así parciales de interfaces, no hace falta que lo pongamos aquí para lanzarlo en el móvil y tal. 00:01:41
Lo que vamos a hacer es crear funciones con preview y con eso nos vamos a hacer un conjunto de componentes que vamos a poder reutilizar luego ya en proyectos con un poco más de cosa. 00:01:55
Entonces, showBackgroundView, y ahora decimos Composable, y ahora ya le ponemos el nombre 00:02:11
a la función, que va a ser, por ejemplo, myDocs. 00:02:23
Vale, fijaos que como lo tengo aquí en modo, no sé, vista dividida, creo que se llama, 00:02:31
pues puedo ver mi código y aquí los previews 00:02:40
que de momento me está saliendo solamente 00:02:43
el que viene por defecto 00:02:45
el written preview, vale 00:02:47
pues entonces aquí 00:02:49
que tengo que hacer, dos cajas una dentro de la otra 00:02:50
¿no? pues hacemos box 00:02:53
la tengo que importar 00:02:55
sí, hombre 00:03:01
alt intro 00:03:02
vale 00:03:05
y dentro otra caja 00:03:07
Bueno, en este momento no se ve nada porque no tengo nada, hasta que no le ponga colores 00:03:10
y cosas así. Esto es como si no estuviera. Entonces, fijaos que en la caja exterior es 00:03:22
color cyan y yo estoy viendo aquí que está ocupando toda la pantalla, está ocupando 00:03:29
todo el espacio. Pues esto como se hace? Pues con el modifier Fill Max Size, que lo vamos 00:03:34
a poner ahora mismo en la de fuera. Empezamos poniéndole un modifier, el Max Size y el 00:03:44
color, el background color, lo ponemos a continuación con un punto y nos decían que iba a ser 00:03:58
color 00:04:04
100 00:04:06
bueno, por el momento esto 00:04:08
ya está 00:04:13
¿qué más había que hacer? 00:04:14
y todo lo que contenga irá centrado 00:04:17
bueno, eso lo podemos ir haciendo ahora 00:04:19
o lo hacemos luego 00:04:21
que así se ve mejor 00:04:23
la caja interior es color blue 00:04:24
y tiene un padding de 20 00:04:27
y dentro de ella hay un texto color blanco 00:04:29
bueno, vamos a ver 00:04:31
entonces, caja de dentro 00:04:32
Empezamos con los colores y estas cosas 00:04:34
Pues con el modifier 00:04:37
Modifier 00:04:38
Este no es 00:04:47
Film Max, ahí me faltó 00:04:51
Poner las especificaciones, pero bueno 00:04:53
Vamos a ponerle 00:04:54
Bueno, el padding 00:04:55
Queda de 20 00:04:58
Y 20 así solo 00:05:01
no se puede poner tenemos que poner 20 punto y además la primera vez importarlo importe extensión 00:05:03
qué más queremos 00:05:17
queremos un culo 00:05:20
qué va a ser 00:05:24
Blue 00:05:25
Vale, ¿qué más queremos de la caja dentro? 00:05:27
Pues unas dimensiones, que por cierto 00:05:30
No hemos dicho nada 00:05:31
En el enunciado, que si no, no se va a ver 00:05:34
Entonces, uy, perdón 00:05:36
Eso también va, las dimensiones 00:05:38
De la caja también va a ir 00:05:40
En el modifier 00:05:42
Entonces, vamos a ponerle 00:05:43
Una anchura 00:05:46
Y una altura 00:05:48
Anchura es, uy 00:05:49
Y yo que sé 00:05:52
Yo cuando no sé qué poner, pongo 200 dps 00:05:54
Y ahí tiramos 00:05:57
Esto se podría controlar 00:06:00
Se puede ajustar así 00:06:02
Para que se vea un poco mejor 00:06:05
Y a continuación 00:06:06
Esto sigue siendo modified 00:06:08
Ponemos 00:06:09
Ponemos un punto 00:06:11
Y le ponemos un height 00:06:16
bueno, 43p 00:06:21
esto luego según como quede 00:06:23
vale, ¿veis? 00:06:24
me ha puesto la cajita arriba 00:06:28
un poco pequeñita 00:06:30
voy a ponerle 50 00:06:32
me la ha puesto arriba, ¿por qué? 00:06:33
¿por qué? 00:06:38
ah bueno, que está cargando 00:06:40
pues porque si yo no le pongo en la caja exterior 00:06:41
es decir, en su contenedor 00:06:45
donde 00:06:46
ubicar lo que vaya a meter dentro 00:06:48
de esa caja 00:06:50
pues me la va a poner por defecto 00:06:51
arriba y a la izquierda, pero me decían que la quería centrada, ¿vale? 00:06:54
Pues si ayer veíamos que en las columnas 00:06:59
se ponía vertical arrangement y 00:07:02
horizontal alignment, aquí a ver 00:07:06
qué opción nos da, porque no es exactamente igual. Aquí me dice 00:07:10
content alignment, ¿vale? Entonces todo 00:07:14
lo que sea, lleve la palabra alignment, seguro que es alignment 00:07:18
algo. ¿Ves? Alignment Center es lo que quiero 00:07:22
porque la quiero poner justo en el centro de... 00:07:26
O sea, quiero que lo que haya dentro de la caja exterior 00:07:30
esté en el centro de esa caja. Entonces vamos a elegir 00:07:33
esta. ¿Ves? Y ya se ha puesto en el centro. 00:07:38
Bueno, y entonces dentro de la caja me decía 00:07:43
que tenía que haber un texto, ¿no? ¿Qué me decía? 00:07:46
un texto color blanco 00:07:48
y tamaño 20 00:07:52
y además no me lo dicen pero yo puedo ver que este 00:07:54
texto está centrado 00:07:56
vamos a ver cómo sale eso 00:07:57
bueno 00:07:59
por cierto no he puesto el padding 00:08:02
por ningún lado 00:08:04
así está aquí el padding de 20 00:08:05
vale, ya está 00:08:09
entonces dentro de la caja 00:08:10
un texto 00:08:13
que creo que ponía 00:08:17
esto es un ejemplo 00:08:19
y vamos a poner, empezar por lo fácil 00:08:22
que es el color 00:08:26
que esto 00:08:27
control espacio, me dice 00:08:29
bueno, me están saliendo todos los modifiers 00:08:32
pero veis, me dice color 00:08:34
y blanco 00:08:35
¿no? pues color 00:08:38
igual, aquí lo tengo 00:08:39
se debería ver ya claro, entonces como siempre 00:08:42
como en el contenedor 00:08:46
no le he dicho 00:08:48
el contenedor de ese texto es esta caja 00:08:49
pero yo no le he dicho 00:08:52
donde tiene que meter las cosas 00:08:53
que yo le ponga dentro 00:08:55
entonces pues me lo pone arriba a la izquierda 00:08:56
que lo quiero centrado, pues igual que el de arriba 00:08:59
ponemos content 00:09:02
alignment, pero esto ya no es modify 00:09:03
esto ya es 00:09:05
otro parámetro, otro argumento 00:09:07
que es 00:09:11
content alignment 00:09:11
y alignment 00:09:13
sí, sí, vale 00:09:15
y luego me decía que el tamaño 00:09:27
me decía que el tamaño 00:09:30
me decía algo del tamaño 00:09:33
texto color blanco y tamaño 20 00:09:34
bueno, pues vamos a ver el tamaño del texto 00:09:40
que ese lo vimos 00:09:42
en el último vídeo y el tamaño eso es un modi falla pues ya tenemos que meter modi falla 00:09:43
punto 00:09:56
con 6 00:09:59
no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no 00:10:05
La tamaña de la letra es un parámetro de text independiente del modifier, por más que me empeñe yo que vaya en el modifier. 00:10:13
Bueno, entonces font-size es 20 y ojo, tamaños de letra no son de P sino SP. 00:10:20
Como no lo hemos puesto hasta ahora, pues hacemos un import. 00:10:27
Y esto ya se parece a lo que teníamos antes. 00:10:35
Paro un poco. 00:10:39
Materias:
Programación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Subido por:
Ana Isabel J.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
6
Fecha:
10 de diciembre de 2024 - 11:20
Visibilidad:
Público
Centro:
IES REY FERNANDO VI
Duración:
10′ 40″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
30.83 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid