Tutorial de design de layout Android: tudo o que você precisa saber



Este Tutorial de Design de Layout Android ajudará você a entender como os layouts podem ser projetados usando as visualizações e os grupos de visualização com uma demonstração.

Se você é novo em , você encontrou o lugar perfeito para começar seu aprendizado sobre o design de layout. Este artigo no tutorial de design de layout do Android ajudará na sua solução comalgumas dicas úteis para fazer um design de IU melhor e também explica como projetar uma IU.

Vou discutir os tópicos abaixo:





Então vamos começar!

o que é evento em javascript

Tutorial de design de layout Android: introdução aos componentes de IU

Falando sobre os componentes da IU, a IU típica de qualquer aplicativo Android consiste nestes componentes:



  • Barra de ação principal
  • Ver controle
  • Área de conteudo
  • Barra de ação dividida

Eles desempenham um papel importante durante o desenvolvimento de um aplicativo complexo. Você terá uma visão clara disso quando chegarmos à seção de demonstração deste artigo.

Outro fator importante que ajuda na personalização do design da IU seria o componente de visualização.

Vamos ver o que é uma View em



Tutorial de design de layout Android: Visualizações

PARA Visão é considerado um bloco de construção básico para uma interface de usuário adequada que é realmente criada a partir do Ver aula . Isso ocupa uma área retangular na tela e, eventualmente, cuida do desenho e do tratamento de eventos.

A View é a classe base para widgets, que são usados ​​para criar componentes de UI interativos como botões, campos de texto, etc. Agora falando sobre a área do retângulo ou uma caixa, pode ser uma imagem, um pedaço de texto, um botão ou qualquer coisa que um aplicativo Android possa exibir. O retângulo aqui é realmente invisível, mas todas as visualizações ocupam a forma de um retângulo.

Você pode ter uma pergunta, qual pode ser o tamanho deste retângulo?

A resposta é que você pode configurá-lo manualmente especificando o tamanho exato (com unidades adequadas) ou usando alguns valores predefinidos. Esses valores predefinidos são match_parentand wrap_content. este match_parent significa que ocupará todo o espaço disponível na tela do dispositivo. Enquanto que, wrap_content refere que ocupará apenas a quantidade de espaço necessária para a exibição de seu conteúdo.

Agora vamos apontar as principais diferenças entre View e ViewGroup.

Visão

  1. Visão os objetos são os blocos de construção básicos dos elementos da IU no Android.
  2. Uma visualização é uma caixa retângulo simples que responde às ações do usuário.
  3. View refere-se à classe android.view.View, que é a classe base de todas as classes de IU.
  4. Os exemplos são EditText, Button, CheckBox, etc.

ViewGroup

  1. ViewGroup é o contêiner invisível que contém View e ViewGroup.
  2. ViewGroup é a classe base para o Layouts .
  3. Por exemplo, LinearLayout é o ViewGroup que contém Button (View) e outros Layouts também.

Agora vamos seguir em frente e entender os Layouts que estão presentes.

Tutorial de design de layout Android: Tipos de Layouts

PARA layout define a estrutura de uma interface de usuário no aplicativo. Todos os elementos do layout são construídos usando uma hierarquia de Visão e ViewGroup objetos.

Agora vamos ver como declarar o layout.

Você pode declarar um layout de duas maneiras:

  • Declare os elementos da IU em XML. O Android fornece um vocabulário XML direto que corresponde às classes e subclasses de View, como as de widgets e layouts.

Nota: Você também pode usar o Layout Editor do Android Studio para construir seu layout XML usando uma interface de arrastar e soltar.

  • Instancie elementos de layout em tempo de execução . O aplicativo pode criar Visão e ViewGroup objetos e manipular suas propriedades de forma programática.

Vamos discutir os diferentes tipos de layouts.

A IU no Android é uma hierarquia de Views e ViewGroups. Os ViewGroups serão nós intermediários na hierarquia e as visualizações serão nós terminais.

  • Layout linear
  • Layout absoluto
  • Esquema relativo
  • Layout da mesa
  • Layout da moldura

Vamos discuti-los em detalhes.

Layout linear

O layout linear é usado para colocar um elemento em cada linha. Assim, todos os elementos serão colocados de forma ordenada de cima para baixo. Este é um layout amplamente usado para criar formulários no Android. Ele também pode ser referido como um grupo de visualização que alinha todos os filhos em uma única direção, vertical ou horizontalmente.

Layout absoluto

No layout absoluto, você pode especificar as coordenadas exatas de cada controle que deseja colocar. Nesse tipo de layout, você pode fornecer as coordenadas X e Y exatas de cada controle. Ele permite que você especifique a localização exata de seus filhos.

Esquema relativo

Um Layout Relativo é um ViewGroup que exibe visualizações secundárias em posições relativas. Vocêpode especificar a posição dos elementos em relação a outros elementos ou em relação ao contêiner pai.

Layout da mesa

Usando o layout da tabela, você pode criar uma tabela com linhas e colunas e colocar elementos dentro delas. Em cada linha, você pode especificar um ou mais elementos. Você pode usar este comando para criar um novo layout de tabela.

Layout da moldura

O layout do quadro é usado quando você deseja mostrar um item em cada tela. Usando o layout de quadro, você pode ter vários itens.Este Layout de Quadro é um espaço reservado na tela que você pode usar para exibir uma única visualização.

Tutorial de design de layout Android: Unidades de medida

Ao especificar o tamanho de um elemento em uma IU do Android, você definitivamente deve se lembrar das seguintes unidades de medida.

Unidade Descrição
dp Pixel independente de densidade. 1 dp é equivalente a um pixel em um 160dpi tela.
sp Pixel Independent Scale. É muito semelhante ao dp, mas apenas recomendado para especificar os tamanhos das fontes.
pt Ponto. Um ponto é definido como 1/72 de polegada.
px Pixel. Corresponde a pixels reais na tela

Agora, vamos avançar para o tópico final deste artigo.

Tutorial de design de layout Android: Demo

Nesta seção de demonstração, vamos entender como trabalhar com layouts em Android Studio .

Consulte o para o Android Studio.

É assim que o layout se parece. Basta selecionar o drawable e você encontrará algumas classes, selecione qualquer outra classe sob este drawable. Você pode codificar a estrutura do layout ou visualizar o design e apenas arrastar e soltar os componentes no espaço de design.

Demonstração - Tutorial de design de layout Android - Edureka

Você pode visualizar os componentes que selecionou na árvore de componentes.

Você também pode encontrá-los no layout.

  1. Paleta : Contém a lista de visualizações e grupos de visualização que você pode arrastar para o seu layout.
  2. Componente Árvore : Consiste na hierarquia de visualizações do seu layout.
  3. Barra de ferramentas : Botões para configurar a aparência do layout no editor e para alterar alguns atributos do layout.
  4. Editor de design : Layout na visualização Design ou Blueprint, ou ambos. Também considerado como espaço de design.
  5. Atributos : Controla os atributos da vista selecionada.

Com isso, chegamos ao final deste artigo no “Tutorial de design de layout Android”. Espero que vocês tenham entendido o que foi compartilhado com vocês neste tutorial.Fique ligado em outros blogs e boa sorte com sua carreira de desenvolvimento Android.

Agora que você entendeu os fundamentos do Android Layout Design, confira o pela Edureka, uma empresa de aprendizagem online confiável com uma rede de mais de 250.000 alunos satisfeitos espalhados por todo o mundo.

O curso de treinamento de certificação em desenvolvimento de aplicativos Android da Edureka foi desenvolvido para estudantes e profissionais que desejam ser um desenvolvedor Android. O curso foi desenvolvido para dar a você uma vantagem inicial na programação Java e treiná-lo para os conceitos básicos e avançados, juntamente com um projeto em que se espera que você crie um aplicativo em Android.

Tem alguma questão para nós? Mencione isso na seção de comentários deste blog “Tutorial de design de layout Android” e entraremos em contato com você o mais breve possível.