Saltar navegación

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

Ejercicio BoxActivity 2 - 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.

3 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, creo que está grabando. 00:00:02
A ver, vamos a hacer las otras dos cajas que nos quedan del ejercicio 1, ¿vale? 00:00:04
Entonces, nos venimos a Android Studio. 00:00:13
Vale, tenemos esta. 00:00:21
Bueno, pues entonces vamos a empezar haciendo el preview, no sé cuántos. 00:00:23
Y a show, outbound. 00:00:28
Composable y la función primera que se va a llamar Unmybox2, como muy original. 00:00:33
Vale, entonces tenemos que hacer una caja. 00:00:48
Vale, entonces tenemos que hacer una caja cuadrada. 00:00:56
Vale, entonces las cajas cuadradas me parece que pueden salir así, ponemos modifier y 00:01:01
y simplemente size. Y en el size le ponemos un tamaño como, yo que sé, 250 de pez, ¿vale? 00:01:11
Y le vamos a poner un color, fijaos que el truco de estas cosas, vale, el truco simplemente 00:01:33
aquí es, esto no es, digamos, un rectángulo finito y dentro, esto es una caja y dentro 00:01:42
otra caja y dentro, y están solapadas unas sobre otras, ¿vale? Con lo cual, lo que hay 00:01:50
en el fondo es una caja totalmente verde. Pues, vamos a poner una caja verde. 00:01:55
Y decíamos, el color lo llevamos aquí, en el background. 00:02:03
color 00:02:12
green 00:02:14
a ver si me la pinta 00:02:16
se supone que, ves, aquí tengo 00:02:18
la de antes y aquí en este 00:02:21
propio, bueno, que tampoco es chiquitilla 00:02:23
pero 00:02:25
tampoco pasa nada, vamos a dejarla así 00:02:26
chiquitilla 00:02:29
y una cosa 00:02:29
lo que va dentro de esta caja 00:02:33
vale, que es 00:02:35
otra caja roja 00:02:37
y esta caja roja 00:02:39
que está dentro de la caja verde 00:02:40
como está, pues está 00:02:42
perfectamente centrada 00:02:45
en la caja verde le tenemos que decir 00:02:46
que lo que vaya adentro va a ir centrado 00:02:49
y eso como lo hacíamos 00:02:50
pues con content alignment 00:02:52
y le decíamos 00:02:55
alignment 00:02:57
center 00:02:58
como todavía no tengo nada 00:03:00
pues esto no 00:03:02
control alt l 00:03:03
y así esto tiene mejor 00:03:05
pinta 00:03:08
Vale, pues aquí dentro hay otra caja, ¿no? 00:03:09
Bueno, pues para no ocurrar, sí, hombre, esto, en fin 00:03:12
Pues dentro de esta caja vamos a meter otra caja 00:03:19
Y esta caja va a ser más pequeña 00:03:24
O sea, mi idea es hacerlas de tamaño cada vez menor 00:03:28
¿Veis? Si pones solamente 6 y un tamaño, pues te lo hace cuadrada 00:03:32
Entonces, no la podemos hacer muy grande 00:03:36
Porque si se sale 00:03:40
Pues no te queda una caja, te queda un rectángulo 00:03:41
Porque no puede salirse por los bordes laterales 00:03:44
No sé si me he explicado 00:03:46
Bueno, pues entonces, de 200 vamos a pasar a 00:03:47
De 250, perdón, vamos a pasar a 200 00:03:51
Y esta caja va a ser roja 00:03:54
¿Vale? 00:03:58
A ver si la pinta 00:04:03
A ver si la pinta 00:04:04
A ver si la pinta 00:04:05
Sí, la he pintado. Pues así vamos a hacer todas. Dentro de la caja roja tenemos una 00:04:08
caja de color azul, amarillo y luego negro. Vamos a hacerla también a mano para ir machacando 00:04:19
los conceptos. Hacemos una box con el modifier y ahora le ponemos el tamaño. Pues si la 00:04:30
roja de fuera era 200 pues esta es 150 vale y qué más esto es el tamaño y luego le ponemos el fondo 00:04:39
creo que era azul o sea background color 00:04:51
blue bueno controla el tele a ver si así 00:04:58
y dentro de esta caja 00:05:04
a que no le he puesto 00:05:07
he puesto 00:05:09
los paréntesis para pasarle 00:05:11
los parámetros pero 00:05:13
no he puesto las llaves 00:05:14
para luego meter contenido 00:05:17
y el contenido, ah y tampoco 00:05:18
he hecho una cosa 00:05:21
bueno, vais a ver, no voy a hacer nada más de momento 00:05:22
y voy a meter la caja siguiente 00:05:25
dentro del azul 00:05:27
que creo que era amarilla 00:05:29
entonces ponemos 00:05:31
modifier 00:05:32
size 00:05:33
ahora que toca 00:05:35
pues 150, bajamos 00:05:39
50 pues 100 dp 00:05:41
bueno y que más 00:05:43
queremos el color 00:05:47
punto background 00:05:49
esta que era amarilla 00:05:53
vamos a hacerla amarilla 00:05:55
color 00:05:56
yellow 00:05:58
vale, control alt L 00:06:02
vale, entonces 00:06:04
¿veis lo que ha pasado? que de repente 00:06:06
la caja amarilla está 00:06:09
dentro de la caja azul, pero no se lo ha 00:06:10
puesto en el centro, sino que se ha ido 00:06:12
a la esquina de arriba, que es lo que te hace 00:06:14
cuando tú 00:06:16
no los posicionas a puesta 00:06:17
es decir, por defecto se te va a poner arriba 00:06:20
a la izquierda, entonces ¿qué quieres? 00:06:22
que lo que haya dentro 00:06:25
de la caja azul 00:06:27
esté centrado, bueno pues ya sabemos 00:06:28
que nos tenemos que ir a la caja blue y decirle content alignment y es alignment.center y 00:06:30
ahora la caja amarilla se va al centro. Vale, y ahora queremos una caja dentro de la caja 00:06:43
amarilla que sea negra. Tenemos que meterle llaves. Y hacemos box y en el modifier, size 00:06:51
chiquitilla. Ah, mira, esta se queda en 50 de pesos. Y el color negro. Bueno, pues ahora, punto, 00:07:12
background, color black. Pero color bien escrito, si es posible. Color blu, no, black. 00:07:23
control al tele 00:07:36
vale y otra vez 00:07:39
me volví a pasar 00:07:43
con la misma piedra 00:07:44
porque en la caja amarilla tengo que decirle 00:07:47
que lo de dentro tiene que ir central 00:07:49
entonces en la caja amarilla 00:07:51
pum pum 00:07:53
con tenta alignment 00:07:54
le decimos 00:07:57
alignment 00:07:58
center 00:07:59
y ya 00:08:02
más o menos 00:08:04
me ha quedado por lo que quería hacer 00:08:06
¿vale? 00:08:08
ahora, el MyBox 3 00:08:11
que parece un diseño súper raro 00:08:14
bueno, no sé, así a simple vista puede parecer una cosa muy rara de hacer 00:08:16
porque parecen como Ls, ¿no? 00:08:21
en distintas posiciones y tal 00:08:23
bueno, pues el truco está en que la única diferencia entre las dos cajas 00:08:25
es cómo están ubicadas las cajas unas dentro de otras. 00:08:30
¿Veis? Es decir, empezamos con la caja verde, que es la que ocupa todo. 00:08:39
Insisto, esto son cajas dentro de cajas y dentro de cajas. 00:08:44
Pero según cómo las alinees, pues te va a quedar un dibujete u otro. 00:08:48
Entonces, vamos a empezar. Bueno, vamos a hacer una cosa. 00:08:54
como veis es por fuera verde, luego rojo, luego azul, vamos a copiarlo todo y así vamos más rápido 00:08:56
con el preview y todo, lo cogemos, lo copiamos, lo pegamos y en lugar de mybox2 lo llamamos mybox3 00:09:03
dice que render pro 00:09:21
ya tengo dos calcaditas 00:09:25
pero ahora voy a fijarme 00:09:27
en la alineación 00:09:28
si es que la única diferencia entre esta y esta 00:09:31
es la alineación, entonces 00:09:33
dentro de la caja verde 00:09:34
la caja roja está 00:09:37
arriba 00:09:39
a la derecha, o sea 00:09:40
top, end 00:09:43
entonces cambiamos 00:09:44
dentro de la caja verde, le decimos 00:09:46
que lo que haya dentro 00:09:49
lo que hay adentro 00:09:50
tiene que ser en lugar de center 00:09:53
esta es la verde, ¿no? 00:09:54
pues le tenemos que decir alignment 00:09:56
top end 00:09:59
se me acaba de caer 00:10:02
lo que utilizo como micrófono 00:10:04
¿veis? y aquí ya se me ha colocado 00:10:06
aquí, bueno 00:10:09
¿qué más? dentro de la roja 00:10:09
que tenemos la azul, ¿no? 00:10:13
y la azul está abajo a la izquierda 00:10:14
o sea, botón 00:10:17
start 00:10:18
En la caja roja 00:10:20
No tenemos que poner 00:10:22
Porque es el contenedor de la caja azul 00:10:23
Entonces, vamos allá 00:10:25
Vamos allá, vamos allá 00:10:27
Se me olvida 00:10:28
Se me olvida 00:10:29
En la red 00:10:29
Entonces le decíamos 00:10:32
Era bottom start, ¿no? 00:10:33
Bottom start 00:10:37
Vamos a ver 00:10:38
Renderiza 00:10:39
Y eso es 00:10:40
¿Vale? 00:10:41
Ya se va apareciendo un poco más 00:10:43
Luego, ¿qué tengo? 00:10:44
¿Dónde tengo la amarilla? 00:10:46
La amarilla está dentro del azul 00:10:47
pero está 00:10:49
abajo a la derecha 00:10:51
o sea, está dentro del azul 00:10:53
bottom end 00:10:55
bueno, pues vamos allá 00:10:57
vamos allá, dentro del azul 00:10:58
dentro del azul 00:11:01
en lugar de center 00:11:02
le decimos 00:11:05
y automastar sería abajo a la izquierda 00:11:06
bottom end 00:11:11
bueno, se parece 00:11:13
se parece 00:11:19
y ahora vemos que 00:11:21
dentro de la amarilla tenemos la negra 00:11:23
arriba a la 00:11:26
izquierda, o sea top 00:11:28
start 00:11:30
top start 00:11:31
en la amarilla 00:11:33
amarilla en la amarilla, aquí 00:11:35
top start 00:11:37
divinamente ya tengo hechas las dos 00:11:45
bajitas, paramos 00:11:48
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:
3
Fecha:
10 de diciembre de 2024 - 11:21
Visibilidad:
Público
Centro:
IES REY FERNANDO VI
Duración:
11′ 51″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
31.02 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid