1
00:00:02,029 --> 00:00:11,369
Bueno, pues hoy vamos a ver si nos salen los ejercicios que dejamos allá por el último día, más o menos.

2
00:00:12,609 --> 00:00:18,530
Como veis, cada uno de los ejercicios tiene algo y luego activity, ¿no?

3
00:00:18,589 --> 00:00:23,510
Box activity, column activity, row activity.

4
00:00:23,510 --> 00:00:25,769
Y entonces vamos a hacer eso exactamente.

5
00:00:26,489 --> 00:00:32,770
Por cada ejercicio, en el mismo proyecto de ayer, que se llamaba interfaces,

6
00:00:33,710 --> 00:00:38,289
vamos a ir creando activities para cada uno de los ejercicios.

7
00:00:38,289 --> 00:00:43,390
Entonces, vamos a crear la activity, boxActivity.

8
00:00:43,890 --> 00:00:50,530
Esto es así, nos ponemos sobre el paquete y le decimos nueva, ojo, ni fichero ni clase.

9
00:00:50,530 --> 00:00:52,649
bajamos hasta Activity

10
00:00:52,649 --> 00:00:54,289
en Gallery

11
00:00:54,289 --> 00:00:56,549
pues lo de siempre

12
00:00:56,549 --> 00:00:58,750
está vacía

13
00:00:58,750 --> 00:01:00,450
pero le cambiamos el nombre

14
00:01:00,450 --> 00:01:03,310
esto se va a llamar Box Activity

15
00:01:03,310 --> 00:01:05,569
y es importante

16
00:01:05,569 --> 00:01:07,030
que si en un momento dado

17
00:01:07,030 --> 00:01:08,930
queremos lanzarla

18
00:01:08,930 --> 00:01:10,870
en el emulador o en nuestro

19
00:01:10,870 --> 00:01:13,030
propio móvil, le pongamos

20
00:01:13,030 --> 00:01:13,810
aquí Launcher

21
00:01:13,810 --> 00:01:16,989
de momento todas las vamos a hacer Launcher

22
00:01:16,989 --> 00:01:19,849
le damos a Finish

23
00:01:19,849 --> 00:01:25,750
y aquí se pone a grado en hacer sus cositas y nosotros vamos a intentar ir empezando.

24
00:01:27,310 --> 00:01:34,750
Entonces, ¿qué tenemos que hacer? Pues tenemos que hacer una función Composable con contenido similar al siguiente.

25
00:01:36,069 --> 00:01:41,549
Esto, que son dos cajas, dos bugs, una dentro de la otra. Bueno, vamos a empezar por ahí.

26
00:01:41,549 --> 00:01:55,489
Entonces, mientras hagamos cosas así parciales de interfaces, no hace falta que lo pongamos aquí para lanzarlo en el móvil y tal.

27
00:01:55,489 --> 00:02:11,189
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.

28
00:02:11,550 --> 00:02:23,810
Entonces, showBackgroundView, y ahora decimos Composable, y ahora ya le ponemos el nombre

29
00:02:23,810 --> 00:02:27,009
a la función, que va a ser, por ejemplo, myDocs.

30
00:02:31,449 --> 00:02:40,349
Vale, fijaos que como lo tengo aquí en modo, no sé, vista dividida, creo que se llama,

31
00:02:40,349 --> 00:02:43,469
pues puedo ver mi código y aquí los previews

32
00:02:43,469 --> 00:02:45,449
que de momento me está saliendo solamente

33
00:02:45,449 --> 00:02:47,729
el que viene por defecto

34
00:02:47,729 --> 00:02:49,469
el written preview, vale

35
00:02:49,469 --> 00:02:50,710
pues entonces aquí

36
00:02:50,710 --> 00:02:53,870
que tengo que hacer, dos cajas una dentro de la otra

37
00:02:53,870 --> 00:02:55,750
¿no? pues hacemos box

38
00:02:55,750 --> 00:03:01,449
la tengo que importar

39
00:03:01,449 --> 00:03:02,210
sí, hombre

40
00:03:02,210 --> 00:03:05,490
alt intro

41
00:03:05,490 --> 00:03:07,530
vale

42
00:03:07,530 --> 00:03:09,110
y dentro otra caja

43
00:03:10,349 --> 00:03:22,189
Bueno, en este momento no se ve nada porque no tengo nada, hasta que no le ponga colores

44
00:03:22,189 --> 00:03:29,629
y cosas así. Esto es como si no estuviera. Entonces, fijaos que en la caja exterior es

45
00:03:29,629 --> 00:03:34,789
color cyan y yo estoy viendo aquí que está ocupando toda la pantalla, está ocupando

46
00:03:34,789 --> 00:03:44,449
todo el espacio. Pues esto como se hace? Pues con el modifier Fill Max Size, que lo vamos

47
00:03:44,449 --> 00:03:58,229
a poner ahora mismo en la de fuera. Empezamos poniéndole un modifier, el Max Size y el

48
00:03:58,229 --> 00:04:04,770
color, el background color, lo ponemos a continuación con un punto y nos decían que iba a ser

49
00:04:04,770 --> 00:04:06,210
color

50
00:04:06,210 --> 00:04:08,229
100

51
00:04:08,229 --> 00:04:13,330
bueno, por el momento esto

52
00:04:13,330 --> 00:04:14,370
ya está

53
00:04:14,370 --> 00:04:17,769
¿qué más había que hacer?

54
00:04:17,910 --> 00:04:19,529
y todo lo que contenga irá centrado

55
00:04:19,529 --> 00:04:21,189
bueno, eso lo podemos ir haciendo ahora

56
00:04:21,189 --> 00:04:23,310
o lo hacemos luego

57
00:04:23,310 --> 00:04:24,290
que así se ve mejor

58
00:04:24,290 --> 00:04:27,529
la caja interior es color blue

59
00:04:27,529 --> 00:04:29,029
y tiene un padding de 20

60
00:04:29,029 --> 00:04:31,550
y dentro de ella hay un texto color blanco

61
00:04:31,550 --> 00:04:32,550
bueno, vamos a ver

62
00:04:32,550 --> 00:04:34,370
entonces, caja de dentro

63
00:04:34,370 --> 00:04:37,110
Empezamos con los colores y estas cosas

64
00:04:37,110 --> 00:04:38,930
Pues con el modifier

65
00:04:38,930 --> 00:04:47,769
Modifier

66
00:04:47,769 --> 00:04:51,209
Este no es

67
00:04:51,209 --> 00:04:53,110
Film Max, ahí me faltó

68
00:04:53,110 --> 00:04:54,790
Poner las especificaciones, pero bueno

69
00:04:54,790 --> 00:04:55,790
Vamos a ponerle

70
00:04:55,790 --> 00:04:58,250
Bueno, el padding

71
00:04:58,250 --> 00:05:01,189
Queda de 20

72
00:05:01,189 --> 00:05:03,189
Y 20 así solo

73
00:05:03,189 --> 00:05:12,949
no se puede poner tenemos que poner 20 punto y además la primera vez importarlo importe extensión

74
00:05:17,110 --> 00:05:18,790
qué más queremos

75
00:05:20,970 --> 00:05:22,069
queremos un culo

76
00:05:24,430 --> 00:05:25,310
qué va a ser

77
00:05:25,310 --> 00:05:27,250
Blue

78
00:05:27,250 --> 00:05:30,110
Vale, ¿qué más queremos de la caja dentro?

79
00:05:30,209 --> 00:05:31,689
Pues unas dimensiones, que por cierto

80
00:05:31,689 --> 00:05:34,250
No hemos dicho nada

81
00:05:34,250 --> 00:05:36,610
En el enunciado, que si no, no se va a ver

82
00:05:36,610 --> 00:05:38,470
Entonces, uy, perdón

83
00:05:38,470 --> 00:05:40,569
Eso también va, las dimensiones

84
00:05:40,569 --> 00:05:42,149
De la caja también va a ir

85
00:05:42,149 --> 00:05:43,230
En el modifier

86
00:05:43,230 --> 00:05:46,649
Entonces, vamos a ponerle

87
00:05:46,649 --> 00:05:48,250
Una anchura

88
00:05:48,250 --> 00:05:49,250
Y una altura

89
00:05:49,250 --> 00:05:52,009
Anchura es, uy

90
00:05:52,009 --> 00:05:54,449
Y yo que sé

91
00:05:54,449 --> 00:05:57,529
Yo cuando no sé qué poner, pongo 200 dps

92
00:05:57,529 --> 00:06:00,629
Y ahí tiramos

93
00:06:00,629 --> 00:06:02,569
Esto se podría controlar

94
00:06:02,569 --> 00:06:05,329
Se puede ajustar así

95
00:06:05,329 --> 00:06:06,649
Para que se vea un poco mejor

96
00:06:06,649 --> 00:06:08,110
Y a continuación

97
00:06:08,110 --> 00:06:09,569
Esto sigue siendo modified

98
00:06:09,569 --> 00:06:11,529
Ponemos

99
00:06:11,529 --> 00:06:16,490
Ponemos un punto

100
00:06:16,490 --> 00:06:18,449
Y le ponemos un height

101
00:06:18,449 --> 00:06:20,110
De

102
00:06:20,110 --> 00:06:21,810
40

103
00:06:21,810 --> 00:06:23,730
bueno, 43p

104
00:06:23,730 --> 00:06:24,949
esto luego según como quede

105
00:06:24,949 --> 00:06:28,490
vale, ¿veis?

106
00:06:28,629 --> 00:06:30,430
me ha puesto la cajita arriba

107
00:06:30,430 --> 00:06:32,689
un poco pequeñita

108
00:06:32,689 --> 00:06:33,790
voy a ponerle 50

109
00:06:33,790 --> 00:06:38,220
me la ha puesto arriba, ¿por qué?

110
00:06:38,779 --> 00:06:39,160
¿por qué?

111
00:06:40,379 --> 00:06:41,379
ah bueno, que está cargando

112
00:06:41,379 --> 00:06:45,000
pues porque si yo no le pongo en la caja exterior

113
00:06:45,000 --> 00:06:46,680
es decir, en su contenedor

114
00:06:46,680 --> 00:06:48,060
donde

115
00:06:48,060 --> 00:06:50,680
ubicar lo que vaya a meter dentro

116
00:06:50,680 --> 00:06:51,259
de esa caja

117
00:06:51,259 --> 00:06:54,740
pues me la va a poner por defecto

118
00:06:54,740 --> 00:06:58,420
arriba y a la izquierda, pero me decían que la quería centrada, ¿vale?

119
00:06:59,360 --> 00:07:02,959
Pues si ayer veíamos que en las columnas

120
00:07:02,959 --> 00:07:06,660
se ponía vertical arrangement y

121
00:07:06,660 --> 00:07:10,740
horizontal alignment, aquí a ver

122
00:07:10,740 --> 00:07:14,399
qué opción nos da, porque no es exactamente igual. Aquí me dice

123
00:07:14,399 --> 00:07:18,699
content alignment, ¿vale? Entonces todo

124
00:07:18,699 --> 00:07:22,459
lo que sea, lleve la palabra alignment, seguro que es alignment

125
00:07:22,459 --> 00:07:26,259
algo. ¿Ves? Alignment Center es lo que quiero

126
00:07:26,259 --> 00:07:30,459
porque la quiero poner justo en el centro de...

127
00:07:30,980 --> 00:07:33,660
O sea, quiero que lo que haya dentro de la caja exterior

128
00:07:33,660 --> 00:07:38,819
esté en el centro de esa caja. Entonces vamos a elegir

129
00:07:38,819 --> 00:07:42,660
esta. ¿Ves? Y ya se ha puesto en el centro.

130
00:07:43,879 --> 00:07:46,579
Bueno, y entonces dentro de la caja me decía

131
00:07:46,579 --> 00:07:48,399
que tenía que haber un texto, ¿no? ¿Qué me decía?

132
00:07:48,399 --> 00:07:52,620
un texto color blanco

133
00:07:52,620 --> 00:07:54,120
y tamaño 20

134
00:07:54,120 --> 00:07:56,160
y además no me lo dicen pero yo puedo ver que este

135
00:07:56,160 --> 00:07:57,839
texto está centrado

136
00:07:57,839 --> 00:07:59,240
vamos a ver cómo sale eso

137
00:07:59,240 --> 00:08:02,240
bueno

138
00:08:02,240 --> 00:08:04,360
por cierto no he puesto el padding

139
00:08:04,360 --> 00:08:05,139
por ningún lado

140
00:08:05,139 --> 00:08:09,620
así está aquí el padding de 20

141
00:08:09,620 --> 00:08:10,500
vale, ya está

142
00:08:10,500 --> 00:08:13,180
entonces dentro de la caja

143
00:08:13,180 --> 00:08:17,160
un texto

144
00:08:17,160 --> 00:08:19,980
que creo que ponía

145
00:08:19,980 --> 00:08:22,399
esto es un ejemplo

146
00:08:22,399 --> 00:08:26,100
y vamos a poner, empezar por lo fácil

147
00:08:26,100 --> 00:08:27,540
que es el color

148
00:08:27,540 --> 00:08:29,000
que esto

149
00:08:29,000 --> 00:08:32,039
control espacio, me dice

150
00:08:32,039 --> 00:08:34,080
bueno, me están saliendo todos los modifiers

151
00:08:34,080 --> 00:08:35,360
pero veis, me dice color

152
00:08:35,360 --> 00:08:38,460
y blanco

153
00:08:38,460 --> 00:08:39,639
¿no? pues color

154
00:08:39,639 --> 00:08:42,259
igual, aquí lo tengo

155
00:08:42,259 --> 00:08:46,320
se debería ver ya claro, entonces como siempre

156
00:08:46,320 --> 00:08:48,679
como en el contenedor

157
00:08:48,679 --> 00:08:49,539
no le he dicho

158
00:08:49,539 --> 00:08:52,120
el contenedor de ese texto es esta caja

159
00:08:52,120 --> 00:08:53,580
pero yo no le he dicho

160
00:08:53,580 --> 00:08:55,659
donde tiene que meter las cosas

161
00:08:55,659 --> 00:08:56,700
que yo le ponga dentro

162
00:08:56,700 --> 00:08:59,720
entonces pues me lo pone arriba a la izquierda

163
00:08:59,720 --> 00:09:02,019
que lo quiero centrado, pues igual que el de arriba

164
00:09:02,019 --> 00:09:03,820
ponemos content

165
00:09:03,820 --> 00:09:05,639
alignment, pero esto ya no es modify

166
00:09:05,639 --> 00:09:07,740
esto ya es

167
00:09:07,740 --> 00:09:09,580
otro parámetro, otro argumento

168
00:09:11,100 --> 00:09:11,759
que es

169
00:09:11,759 --> 00:09:13,440
content alignment

170
00:09:13,440 --> 00:09:15,120
y alignment

171
00:09:15,120 --> 00:09:27,879
sí, sí, vale

172
00:09:27,879 --> 00:09:30,279
y luego me decía que el tamaño

173
00:09:30,279 --> 00:09:33,700
me decía que el tamaño

174
00:09:33,700 --> 00:09:34,860
me decía algo del tamaño

175
00:09:34,860 --> 00:09:40,360
texto color blanco y tamaño 20

176
00:09:40,360 --> 00:09:42,340
bueno, pues vamos a ver el tamaño del texto

177
00:09:42,340 --> 00:09:43,559
que ese lo vimos

178
00:09:43,559 --> 00:09:52,620
en el último vídeo y el tamaño eso es un modi falla pues ya tenemos que meter modi falla

179
00:09:56,500 --> 00:09:57,360
punto

180
00:09:59,659 --> 00:10:00,679
con 6

181
00:10:05,879 --> 00:10:13,539
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

182
00:10:13,539 --> 00:10:20,299
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.

183
00:10:20,600 --> 00:10:26,840
Bueno, entonces font-size es 20 y ojo, tamaños de letra no son de P sino SP.

184
00:10:27,600 --> 00:10:31,460
Como no lo hemos puesto hasta ahora, pues hacemos un import.

185
00:10:35,519 --> 00:10:38,220
Y esto ya se parece a lo que teníamos antes.

186
00:10:39,000 --> 00:10:39,500
Paro un poco.