Banner Livro Google Android? ---> Banner Livro Google Android? --->
Hoje é 29 Jul 2010, 10:30



Implementando uma User Interface (UI) - Parte 1/2



Criar novo tópico Responder Tópico  [ 2 Mensagens ] 
 Implementando uma User Interface (UI) - Parte 1/2 
Autor Mensagem
Android application
Android application
Avatar de usuário

Data de registro: 27 Dez 2007, 16:17
Mensagens: 74
Mensagem Implementando uma User Interface (UI) - Parte 1/2
Hierarquia dos Elementos de Tela

Para expor atividades na tela, utilizamos views e viewgroups.

:arrow: Views

Uma view é uma instância de android.view.View. É uma estrutura de dados que define o layout e o conteúdo de uma determinada área retangular na tela. Um objeto View gerencia o layout, o tamanho, desenho, mudança de foco, scrolling e eventos para a área de tela que ele representa.

A classe View serve de base para um conjunto de elementos de tela interativos chamados widgets. Widgets podem ser Text, EditText, InputMethod, MovementMethod, Button, RadioButton, Checkbox e ScrollView.

:arrow: Viewgroups

Um viewgroup é uma instância de Viewgroup, e lhe permite montar uma UI mais complexa, através de uma estrutura. Ou seja, ele contém e gerencia views e outros viewgroups.

A classe Viewgroup serve como base para layouts, um conjunto de subclasses que provêem tipos comuns de layouts de tela. Os layouts lhe permitem montar uma estrutura para um conjunto de views.

Uma UI estrutura como uma árvore

A interface de uma atividade é montada como uma árvore, onde cada nodo é uma view ou viewgroups. Você pode montar uma, utilizando o conjunto de widgets pré-definidos oferecidos pelo Android ou tipos de view que você mesmo definiu.

Imagem

Para associar uma árvore à tela para renderização, sua atividade chama setContentView() e passa a referência ao nodo raíz. Uma vez que o Android possui esta informação, ele pode trabalhar diretamente com o nodo para invalidar, medir e desenhar a árvore. Quando sua atividade se torna ativa e recebe o foco, o sistema notifica sua atividade e solicita ao nodo raiz para medir e desenhar a árvore. O nodo raiz então solicita que seu filhos de desenhem e assim por diante.

Sendo assim, cada view group tem a responsabilidade de medir o espaço disponível, distribuir seus filhos e chamar Draw() em cada filho para deixar que ele se renderize. Os filhos podem solicitar um tamanho e uma posição para seu pai, mas é o pai quem tem a palavra final de quão grande cada filho pode ser.

LayoutParams: Como um filho especifica sua posição e tamanho

Toda classe viewgroup utiliza uma classe aninhada que estende ViewGroup.LayoutParams. Esta subclasse contém propriedades que definem apropriadamente o tamanho e a posicao para aquela viewgroup.

Imagem

Cada subclasse LayoutParams possui sua própria sintaxe para definir valores. Cada elemento filho deve definir LayoutParams que são apropriados para seu pai, embora possa definir LayoutParams diferentes para seus filhos.

Todas as viewgroups possui altura(height) e largura(width). Muitos ainda incluem margens(margin) e bordas(border). Você pode especificar exatamente a largura e a altura (embora com frequência você não vai querer fazer isso). Mais comumente você vai pedir para sua view se dimensionar de acordo com seu conteúdo ou tornar-se tão grande quanto o objeto que a contém permitir.

Objetos de Layout comuns

Os seguintes são os mais comuns view groups que você vai usar nas suas aplicações. Neste tópico você vai obter a informação básica sobre cada tipo.

Frame Layout

É o objeto de layout mais simples. É um espaço em branco na sua tela aonde você pode alocar um objeto. Todos os elementos filhos são pendurados no canto superior esquerdo da tela; você não pode especificar uma posição para um filho de um FrameLayout. Depois, os filhos serão simplesmente desenhados sobre os anteriores, cobrindo-os parcialmente ou totalmente (a menos que o objeto mais novo seja transparente).

LinearLayout

Alinha todos os seus filhos em uma única direção, verticalmente ou horizontalmente, dependendo de qual propriedade você definir para ele. Todos os filhos são posicionamos um depois do outro, então uma lista vertical terá apenas um filho por linha, não importanto o quão grandes elas sejam, e uma lista horizontal irá ter apenas a altura de uma linha (a altura do mais alto filho, mais o padding). LinearLayout respeita margens entre filhos, e também gravidade [alinhamento de um filho para a direita (right), esquerda (left) ou centro (center)].

LinearLayout também suporta a atribuição de um peso para um filho em especial. Este valor permite que seus filhos se expandam para cobrir qualquer espaço restante na tela. Filhos especificam um valor de peso, e o espaço restante será atribuido a estes filhos de acordo com o peso especificado por cada um. O peso padrão é 0. Então se por exemplo existem 3 caixas de texto, e duas delas declaram possuir um peso de 1, duas delas vão se expandir igualmente para cobrir o espaço restante, enquanto a terceira ocupará apenas o espaço necessário.

Os dois formulários seguintes representam um LinearLayout com um conjunto de elementos: um botão, algumas etiquetas, algumas caixas de texto. Ambos possui valores de padding que ajustam bem o estofamento do espaço. As caixas de texto tem suas larguras definidas como FILL_PARENT (preencher o pai); outros elementos estão definidos como WRAP_CONTENT (envolvimento de conteúdo, ou seja, apenas o espaço necessário). O alinhamento (ou gravidade) está definida, por padrão, como left (esquerda). O formulário da esquerda tem peso não definido (0 por padrão); o formuário da esquerda tem uma caixa de texto com peso definido como 1. Se a etiqueta “Name” da caixa de texto estivesse também definida como 1, as caixas de texto “Name”e “Comments” teriam a mesma altura.

Imagem

Dica: Para criar layouts proporcionais ao tamanho da tela, crie um container com fill_parent, atribua aos filhos alturas ou larguras de 0, e depois atribua pesos para cada filho, relativos a proporção de tela que devem tomar.

Em um LinearLayout horizontal, itens são alinhados pela posição da sua base de linha de texto (a primeira linha do primeiro elemento da lista – do topo ou da esquerda – é considerado a linha de referência). Isto serve para que as pessoas não ficam olhando para cima e para baixo quando lendo o texto dis elementos visinhos. Para desativar esta propriedade defina android:baselineAligned=”false” no layout XML.

TableLayout

TableLayout posiciona seus filhos em linhas e colunas. Um TableLayout consiste de um número de objetos TableRow, cada um definindo uma linha (atualmente, você pode ter outros filhos, isto será explicado adiante). Containers TableLayout não exibem bordas nas linhas, colunas ou células. Cada linha tem 0 ou mais células; Cada célula pode conter um objeto View. A tabela tem tantas colunas quanto a linha com o maior número de celulas. Uma tabela pode possuir células vazias. Células não podem ser mescladas, como pode ser realizado com HTML. A imagem a seguir mostra um TableLayout, com as bordas invisíveis das células exibidas como linhas pontilhadas.

Imagem

Colunas podem ser escondidas, marcadas para expandir para preencher o espaço restante na tela, ou como shrinkable (“encolhível”) para forçar a coluna a encolher até que a tabela se encaixa na tela.

AbsoluteLayout

Permite que seus filhos especifiquem exatamente as coordenadas x / y para exibição na tela, onde (0,0) é canto superior esquerdo, e os valores aumentam conforme você move para baixo ou para a direita. Margens não são suportadas, e a obreposição de elementos é permitida (embora não seja recomendável). A Google recomenda não utilizar AbsoluteLayout a menos que você tenha boas razões para usá-lo, porque ele é equitativamente rígido e não funciona de acordo com visores de diferentes dispositivos.

RelativeLayout

Permite que seus filhos especifiquem suas posições relativas a cada um (especifica por ID), ou a seu pai. De forma que você pode alinhar dois elementos a direita ou por um seguido do outro ou ainda centralizados na tela. Elementos são renderizados na ordem dada, então se o primeiro elemento é centralizado na tela, os outros elementos serão alinhados relativamente ao centro da tela. Se usado XML para especificar este layout (como descrito posteriormente), um elemento referenciado deve ter sido listado antes que você o referencie.

Abaixo um exemplo de RelativeLayout como elementos visível e invisívelmente delineados. O objeto de layout raíz é um objeto RelativeLayout.

Imagem

Este diagrama exibe os nomes das classes dos elementos de dela, seguidos por uma lista de propriedades de cada um. Algumas destas propriedades são diretamente suportadas pelo elemento, e outras por seus membros LayoutParams (subclasse de RelativeLayout para todos os elementos nesta tela, pois todos os elementos são filhos de um RelativeLayout).

Os parâmetros de um RelativeLayout são: width, height, below, alignTop, toLeft, padding, and marginLeft. note que alguns destes parâmetros suportam valores relativos a outros filhos – por isso o nome RelativeLayout. Isto inclui as propriedades toLeft, alignTop e below, os quais indicam que o objeto deve estar a esquerda, ao topo ou adiante, respectivamente.

Alguns View Groups importantes

:arrow: AbsoluteLayout: Permite especificar a localização dos objetos filhos em relação ao pai na exata medida (por exemplo, pixeis).
:arrow: FrameLayout: Layout que funciona como uma moldura para exibir um único objeto.
:arrow: Gallery: Uma exibição horizontal de imagens, com scroll, a partir de uma lista vinculada.
:arrow: GridView : Exibe uma grade de m colunas e n linhas, com scroll.
:arrow: LinearLayout: Um layout que organiza seus filhos em uma única linha horizontal ou vertical. Ele cria uma barra de rolagem se o comprimento da janela excedeu o tamanho da tela.
:arrow: ListView: Exibe uma lista simples com scroll.
:arrow: PopupList: Uma lista popup de elementos com uma borda.
:arrow: RelativeLayout: Permite especificar a localização dos objetos filhos relativamente, uns com os outros (filho A à esquerda do filho B) ou ao pai (alinhado com a parte superior do pai).
:arrow: ScrollView : Uma coluna de elementos, com scroll.
:arrow: Spinner : Exibe um único item de cada vez a partir de uma lista vinculada, dentro de uma caixa de texto de uma linha.
:arrow: SurfaceView: Fornece acesso direto a uma superfície de desenho dedicada. Pode alocar views em camadas no topo da superfície, mas é indicado para aplicações que precisam desenhar pixeis ao invés de widgets.
:arrow: TabHost: Fornece uma lista com guia seleção que monitora os cliques e permite a aplicação mudar a tela sempre que uma guia é selecionada.
:arrow: TableLayout: Um layout tabulado com um número arbitrário de linhas e colunas, cada célula com um item de sua escolha. As linhas se redimensionam para caber a maior coluna. As bordas das células não são visíveis.
:arrow: ViewFlipper: Uma lista que exibe um item por vez, dentro de uma caixa de texto de uma linha. Pode ser configurado para trocar items em intervalos de tempo definidos, como um slide show.
:arrow: ViewSwitcher: Mesma coisa que o ViewFlipper

fonte: http://code.google.com/android/devel/im ... ng-ui.html

_________________
http://www.portalandroid.org - Tudo sobre o Android.


20 Fev 2008, 03:33
Perfil
What is ADT?
What is ADT?

Data de registro: 10 Fev 2009, 20:20
Mensagens: 23
Mensagem Re: Implementando uma User Interface (UI) - Parte 1/2
muito boa a matéria.. tirei muitas dúvidas só na primeira parte :D

vou ver a segunda agora :P


16 Fev 2009, 11:52
Perfil
Mostrar mensagens anteriores:  Organizar por  
Criar novo tópico Responder Tópico  [ 2 Mensagens ] 


Quem está online

Usuários vendo este fórum: Sho e 6 visitantes


Você não pode criar novos tópicos neste fórum
Você não pode responder tópicos neste fórum
Você não pode editar suas mensagens neste fórum
Você não pode excluir suas mensagens neste fórum
Você não pode enviar anexos neste fórum

Procurar por:
Ir para:  

© 2010 Portal Android // Comunidade de Desenvolvedores da Plataforma Android. Entre em contato!!!


Powered by phpBB