Nas versões mais antigas do Android SDK (usado muito em conjunto com a IDE Eclipse) a estrutura de layout padrão da tela do dispositivo era a “LinearLayout”. Essa estrutura “organiza” os componentes de forma que eles sejam distribuídos tanto na horizontal (um ao lado do outro) quanto na vertical (um abaixo do outro).
1) Clique e mantenha pressionado
2) Arraste até aqui.
3) Verifique as propriedades acima.
83
Quando alteramos o conteúdo (texto) do primeiro componente TextView tivemos que fazer uso das constantes (situado dentro do arquivo “strings.xml”), mas, não somos obrigamos a usá-las. Podemos digitar “manualmente” o texto a ser exibido na propriedade “text” do componente. Vamos digitar na propriedade “text” do componente a seguinte frase “Através deste material” (sem aspas, lógico). Veja o resultado na figura seguinte:
Conteúdo (texto) do componente alterado
Vamos salvar as alterações feitas no arquivo e em seguida executar a aplicação para conferir o resultado, como demonstra a figura seguinte:
84
Aplicação em execução
Conforme já havia mencionado, toda estrutura que constitui a tela de uma aplicação em Android nada mais é do que um código XML. Para visualizarmos o código XML basta clicar na guia “Text”, situado ao lado da guia “Design” . Veja o seu código abaixo:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".HelloActivity">
<TextView android:text="@string/frase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Através deste material"
android:id="@+id/textView2"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />
</RelativeLayout>
85
E ai, está entendo aos poucos como se faz aplicações Android ? Com certeza que sim!
Como podemos ver no Android Studio ele já oferece um utilitário que permite a criação de aplicações de forma rápida, simplesmente arrastando e soltando os componentes. Isso acelera o processo de desenvolvimento de aplicações.
86
Capitulo 4 Capitulo 4 Capitulo 4 Capitulo 4 Conhecendo as Conhecendo as Conhecendo as Conhecendo as Conhecendo as Conhecendo as Conhecendo as Conhecendo as Conhecendo as widgets do Android widgets do Androidwidgets do Androidwidgets do Android widgets do Android widgets do Android
oda aplicação Android normalmente é formado por um ou mais widgets, que são componentes gráficos que constituem uma aplicação. A partir de agora iremos conhecer os widgets básicos disponíveis e oferecidos pela plataforma Android, para o desenvolvimento das aplicações. De acordo com alguns widgets que fomos conhecendo, vamos desenvolver aplicações que demonstrem o uso deles.
No capítulo anterior aprendemos a desenvolver nossa primeira aplicação em Android, algo absolutamente simples. Agora vamos conhecer melhor a paleta de componentes onde nela estão disponíveis todos os widgets que podemos utilizar em uma aplicação (todos eles separados por categorias).
4.1) A paleta de componentes e suas widgets
A ferramenta de desenvolvimento do Android SDK nos oferece uma gama de componentes (ou widgets, como preferirem) que podemos utilizar em uma aplicação a ser construída. Podemos conferir esses widgets na paleta mostrada pela figura seguinte:
T
87
A paleta de componentes
Conforme havia falado, os componentes estão distribuídos nas mais diversas seções presentes na paleta de componentes. Vamos conhecer as seções desta paleta e os componentes nela presentes.
4.1.1) A seção “Widgets”
Nesta seção estão disponíveis os componentes mais básicos que podem ser utilizados em uma aplicação Android, são eles:
TextView : Componente que funciona como se fosse uma Label (“rotulo”), onde nele podemos mostrar alguma informação, mensagem e etc Na nossa primeira aplicação tivemos a oportunidade de usarmos esse componente. Ele está disponível em quatro estilos (Plain , Large, Medium e Small). Veja os ícones desse componente na imagem seguinte:
88
Ícones do componente TextView (Versão normal, large, medium e small)
Button : Componente que representa um botão onde podemos clicar nele e também atribuir ações que podem ser executadas caso isso aconteça. Ele se encontra nas versões normal e small (pequena): Veja seu ícone na paleta de componentes :
Ícones do componente Button (Versão normal e small)
CheckBox : Esse componente funciona como uma opção, onde nele podemos marcá-lo e desmarcá-lo. Veja o ícone do componente abaixo:
Ícone do componente CheckBox
RadioButton : Esse componente funciona como uma opção, normalmente utilizado quando temos uma situação onde devemos escolher uma entre várias opções (como numa prova de múltipla escolha). Veja o ícone desse componente na paleta de componentes :
Ícone do componente RadioButton
Spinner : Esse componente nada mais é do que uma caixa de combinação (também conhecido como Combo Box). Nesse componente podemos adicionar vários itens que poderão ser selecionados pelo usuário através do mesmo. Veja o ícone desse componente na figura seguinte:
Ícone do componente Spinner
ProgressBar : Esse componente exibe uma barra de progresso na tela e está disponível em 3 versões (normal e large (giratórias) e horizontal (barra)). Veja seus ícones abaixo:
89
Ícone do componente ProgressBar
RatingBar : Esse componente é bastante utilizado para fazer sistemas de votações e classificações (aqueles sistemas em que você define se uma coisa é ruim, regular, boa, ótima e etc). Veja o ícone do componente na figura seguinte:
Ícone do componente RatingBar
ImageView : Esse componente simplesmente serve para exibir imagens que se colocam nele. Os formatos de imagens suportados por esse componente são : PNG, JPEG, BMP, GIF. Veja o ícone desse componente em seguida:
Ícone do componente ImageView
ImageButton : Esse componente é derivado do componente Button só que ao invés de exibir um texto dentro dele, exibe uma imagem. Os formatos de imagens suportados por esse componente são : PNG, JPEG, BMP, GIF. Veja o ícone desse componente abaixo:
Ícone do componente ImageButton
Gallery : Esse componente funciona como uma galeria de imagens, onde nele podemos adicionar várias imagens e ao mesmo, visualiza-las. Veja o ícone desse componente abaixo:
Ícone do componente Gallery
90
4.1.2) A seção “Text Fields”
Nesta seção estão disponíveis todos os componentes baseados em caixas de texto, e todos eles são baseados no componente EditText. Vamos ver alguns desses componentes abaixo:
Plain Text: Esse é o modelo de caixa de texto “padrão”, que permite a digitação de qualquer tipo de caractere. Veja seu ícone abaixo:
Ícone do componente Plain Text
Person Name: Esse modelo de caixa de texto permite a digitação de nomes pessoais (colocando a inicial de cada palavra em maiúsculo). Veja seu ícone abaixo:
Ícone do componente Plain Text
Password: Esse modelo de caixa de texto permite a digitação de senhas e está disponível tanto na versão alfanumérica quanto na numérica (Numeric). Veja os ícones de componente abaixo:
Ícones do componente Password (na versão normal e numérica)
E-mail: Esse modelo de caixa de texto permite a digitação de e-mail. Veja o ícone de componente abaixo:
Ícone do componente E-mail
Phone: Esse modelo de caixa de texto permite a digitação de telefones. Veja o ícone de componente abaixo:
Ícone do componente Phone
91
Multiline Text : Esse modelo de caixa de texto permite várias linhas de texto, de acordo com a nossa necessidade. Veja o ícone desse componente abaixo:
Ícone do componente Multiline Text
4.1.3) A seção “Layouts”
Nesta seção estão disponíveis estruturas de layouts que podemos utilizar em nossas aplicações para organizar a disponibilidade dos componentes dentro da tela, no dispositivo. Vejamos esses componentes:
LinearLayout : Essa estrutura (conforme já havia mencionado) organiza os componentes dentro dela de forma que os mesmos sejam distribuídos de forma horizontal (um ao lado do outro) ou vertical (um abaixo do outro), de acordo com a necessidade. Veja os ícones desse componente:
Ícones do componente LinearLayout (horizontal e vertical)
RelativeLayout : Essa estrutura (conforme também já havia mencionado) organiza os componentes dentro dela de forma que os mesmos sejam distribuídos livremente na tela (em qualquer ponto em que você desejar, relativo a outros componentes que , possivelmente, estejam na tela). Veja os ícones desse componente:
Ícone do componente RelativeLayout
TableLayout: Essa estrutura organiza os componentes dentro dela de forma como se estivessem em uma tabela (com o auxílio de um componente útil, o TableRow, também presente nesta seção). Veja o ícone desse componente abaixo:
92
Ícone do componente TableLayout
4.1.4) A seção “Containers”
Nesta seção estão disponíveis componentes que naturalmente funciona como complementos (compostos) para outros componentes. Vejamos os componentes dessa seção :
ListView : Esse componente funciona como uma lista onde nele podemos adicionar itens e visualizar os mesmos (conhecido em algumas ferramentas de desenvolvimento como “ListBox”). Vejamos o ícone desse componente:
Ícone do componente ListView
RadioGroup : Esse componente nada mais é do que um estrutura constituída (por padrão) por três RadioButtons , que podem ser distribuídos de forma horizontal e vertical. Veja o ícone desse componente na figura seguinte:
Ícone do componente RadioGroup
VideoView : Esse componente serve para reproduzir vídeos que queiramos visualizarmos através dele. Veja o ícone desse componente abaixo:
Ícone do componente VideoView
4.1.5) A seção “Date & Time”
Nesta seção estão disponíveis os componentes que trabalham com data e hora. Vejamos os componentes abaixo:
93
TimePicker : Esse componente é muito útil , nele podemos estipular ou definir uma determinada hora, de acordo com a nossa necessidade. Veja o ícone desse componente em seguida:
Ícone do componente TimePicker
DatePicker : Esse componente é muito útil , nele podemos estipular ou definir uma determinada data, de acordo com a nossa necessidade. Veja o ícone desse componente abaixo:
Ícone do componente DatePicker
Chronometer : Esse componente nada mais é do que um cronometro digital, que podemos utilizá-lo de acordo com a nossa necessidade . Ele é derivado do componente TextView. Vejamos seu ícone abaixo:
Ícone do componente Chronometer
AnalogClock : Esse componente nada mais é do que um relógio analógico que mostra a hora do sistema. Vejamos seu ícone abaixo:
Ícone do componente AnalogClock
DigitalClock : Esse componente nada mais é do que um relógio digital (também derivado do TextView) que mostra a hora do sistema. Vejamos seu ícone abaixo:
Ícone do componente DigitalClock
94
4.1.6) A seção “Expert”
Nesta guia estão componentes de categorias miscelâneas (mistas) , que envolvem manipulação de animações e efeitos de transição e etc. Vamos ver alguns componentes
ViewFlipper : Esse componente funciona como se fosse uma estrutura de layout para elementos, onde cada elemento é exibido (e também ocultado) usando um efeito de transição. Vejamos seu ícone abaixo:
Ícone do componente ViewFlipper
AutoCompleteTextView : Esse componente é muito útil quando queremos que durante a digitação de um conteúdo , o mesmo apresente sugestões de palavras (muito comum nas aplicações de hoje em dia). Veja seu ícone abaixo :
Comentários
Postar um comentário