WEBVTT

1
00:00.860 --> 00:01.970
Bem-vindo de volta.

2
00:01.970 --> 00:06.860
Nesta seção, aprenderemos sobre layouts no
Jetpack Compose.

3
00:06.890 --> 00:14.390
Cada layout tem um caso de uso específico,
e você aprenderá a

4
00:14.390 --> 00:15.110
escolher o mais adequado para a interface
do usuário que deseja criar.

5
00:15.110 --> 00:22.790
Por fim, você agrupará funções compostas
em diferentes tipos de

6
00:22.790 --> 00:23.660
layouts para criar uma interface de
usuário mais complexa.

7
00:23.690 --> 00:28.190
Como sempre, é melhor começar com o
básico.

8
00:28.190 --> 00:36.860
Ao trabalhar com XML, você consegue isso
usando o layout, uma classe que estende o
Viewgroup.

9
00:36.860 --> 00:46.040
O Viewgroup pode conter zero ou mais
exibições e é responsável por medir

10
00:46.040 --> 00:49.700
todos os seus filhos e posicioná-los na
tela de acordo com diferentes regras.

11
00:49.700 --> 00:56.030
No Jetpack Compose, o substituto do
Viewgroup é chamado de layout.

12
00:56.060 --> 01:03.620
Os layouts são usados para organizar os
elementos da interface do usuário ou
composições na tela.

13
01:03.620 --> 01:11.040
Eles definem a estrutura e o
posicionamento dos componentes da
interface do usuário em um determinado
espaço.

14
01:11.040 --> 01:18.330
Por exemplo, a coluna coloca os itens
verticalmente na

15
01:18.330 --> 01:19.080
tela, a linha coloca os itens
horizontalmente na tela.

16
01:19.080 --> 01:22.560
A caixa coloca elementos em cima de
outros.

17
01:22.590 --> 01:30.360
Os layouts desempenham um papel
fundamental na criação de interfaces de
usuário

18
01:30.360 --> 01:34.290
visualmente atraentes, responsivas e
adaptáveis a diferentes tamanhos e
orientações de tela.

19
01:34.320 --> 01:37.410
Começarei com os layouts lineares.

20
01:37.440 --> 01:42.660
Um layout linear posiciona seus filhos em
um fluxo linear.

21
01:42.690 --> 01:49.050
Esse fluxo é chamado de orientação e pode
ser horizontal ou vertical.

22
01:49.050 --> 01:57.000
No Jetpack Compose, há duas funções
compostas diferentes que

23
01:57.030 --> 01:58.590
colocam o layout linear, uma para cada
orientação.

24
01:58.590 --> 02:02.070
Você começará com a versão horizontal, que
é uma linha.

25
02:02.100 --> 02:12.070
Aqui, começarei com a função add
composable my row e,

26
02:12.070 --> 02:12.970
dentro dessa linha, começarei com a função
a row composable.

27
02:12.970 --> 02:17.500
E, dentro dessa linha, começarei criando
dois textos.

28
02:21.370 --> 02:27.310
Em seguida, vamos chamar minha função de
linha dentro do conteúdo do conjunto.

29
02:27.340 --> 02:28.570
Execute o aplicativo.

30
02:28.570 --> 02:39.100
Você pode ver dois campos de texto
centralizados verticalmente e

31
02:39.100 --> 02:39.850
organizados de forma a serem colocados em
uma única linha.

32
02:39.880 --> 02:46.060
Agora vamos nos aprofundar no controle de
linha e clicar com o botão esquerdo do
mouse para abrir a linha.

33
02:46.090 --> 02:52.780
Aqui temos o modificador de disposição
horizontal, alinhamento vertical e
conteúdo.

34
02:52.810 --> 03:01.150
Há dois novos parâmetros com os quais você
pode trabalhar: a disposição horizontal e
o alinhamento vertical.

35
03:01.180 --> 03:07.150
Você usa arranjos para posicionar as
crianças umas em relação às outras.

36
03:07.150 --> 03:16.790
Os arranjos horizontais possíveis são
espaço entre espaços uniformemente, espaço
ao

37
03:16.790 --> 03:19.550
redor do centro, início e fim e o
alinhamento vertical.

38
03:19.550 --> 03:25.550
Portanto, ao usar o alinhamento, você
posiciona os filhos de uma maneira
específica dentro do pai.

39
03:25.550 --> 03:32.780
Especificamente, o alinhamento vertical
alinha as crianças verticalmente de

40
03:32.780 --> 03:34.880
três maneiras diferentes: superior,
central, vertical e inferior.

41
03:34.880 --> 03:42.050
No próximo vídeo, vamos nos aprofundar nas
disposições horizontais e nos alinhamentos
verticais.

42
03:42.050 --> 03:43.820
Vamos voltar para a linha.

43
03:43.820 --> 03:56.750
E aqui posso usar a disposição horizontal,
a disposição do espaço do ponto

44
03:56.780 --> 04:00.170
uniformemente e o alinhamento vertical
horizontal, o alinhamento do ponto
centralizado verticalmente.

45
04:00.170 --> 04:02.660
Vamos correr e ver a diferença.

46
04:02.690 --> 04:10.580
Na verdade, para notar a diferença, vou
criar outro texto

47
04:10.580 --> 04:12.020
compostável aqui chamado de from Play
Store Run novamente.

48
04:12.020 --> 04:19.280
E para garantir que o tamanho máximo da
linha seja preenchido em

49
04:19.280 --> 04:23.730
toda a tela, usaremos outro parâmetro
aqui, que é um modificador.

50
04:23.730 --> 04:27.030
Portanto, o preenchimento do ponto do
modificador modificador.

51
04:27.060 --> 04:28.800
Tamanho máximo.

52
04:28.800 --> 04:29.670
Corra novamente.

53
04:29.670 --> 04:31.110
E aqui vamos nós.

54
04:31.140 --> 04:36.510
Texto no meio da tela e eles são separados
uniformemente.

55
04:36.510 --> 04:44.640
Portanto, usamos o ponto de alinhamento
center verticalmente para centralizar os
filhos verticalmente, e o ponto de
organização space

56
04:44.640 --> 04:53.700
uniformemente para que cada filho tenha
uma quantidade igual de espaço entre eles
e no modificador dot fill.

57
04:53.730 --> 04:58.680
Tamanho máximo para fazer com que o layout
preencha toda a tela.

58
04:58.680 --> 05:08.070
Portanto, essa etapa final é importante
porque, caso contrário, uma linha ocuparia
apenas o espaço necessário

59
05:08.070 --> 05:15.750
para desenhar seus filhos, já que nenhum
de seus filhos tem peso definido sem
preencher o

60
05:15.750 --> 05:23.490
tamanho da tela, o arranjo e o alinhamento
não importariam, e todos os itens seriam

61
05:23.490 --> 05:26.610
colocados no nível superior e no canto
superior esquerdo da tela, um após o
outro.