Construção da interface gráfica do usuário do aplicativo

Nesta seção, mostraremos os passos exatos para construir a interface gráfica do usuário do aplicativo Tip Calculator. A interface gráfica do usuário não será parecida com a mos-

trada na Fig. 3.1 até que você tenha concluído os passos. À medida que prosseguir nesta seção, o número de detalhes apresentados poderá parecer grande, mas eles são repetitivos e você se acostumará com eles conforme usar o IDE.

3.4.1 Introdução ao componente GridLayout

Este aplicativo utiliza um componente GridLayout (Fig. 3.3) para organizar os componentes

de visualização em cinco linhas e duas colunas. Cada célula em um componente GridLayout pode estar vazia ou conter uma ou mais visualizações (componentes do tipo view), incluindo layouts contendo outras visualizações. Essas views podem abranger várias linhas ou colunas, embora não tenhamos usado esse recurso nesta interface de usuário. O número de linhas e colunas de um componente GridLayout é especificado na janela Properties.

A altura de cada linha é determinada pelo componente viewmais alto nessa linha. Da mesma forma, a largura de uma coluna é definida pelo componente viewmais largo nessa coluna. Por padrão, os componentes são adicionados da esquerda para a direita em uma linha. Conforme você verá, é possível especificar a linha e coluna exatas nas quais um componente view deve ser colocado. Vamos discutir outros recursos de GridLayout quando apresentarmos os passos para a construção da interface gráfica do usuário. Para saber mais sobre a classe GridLayout_{, visite:}

http://developer.android.com/reference/android/widget/GridLayout.html

Valores da propriedade Id para as visualizações deste aplicativo

A Figura 3.4 mostra os valores da propriedade Id das views. Por clareza, nossa convenção

de atribuição de nomes é usar o nome da classe das views na propriedade Id da visualiza-

ção e no nome da variável Java.

amountTextView customPercentTextView percent15TextView tipTextView totalTextView customTipSeekBar amountDisplayTextView (por trás disso está amountEditText)

percentCustomTextView

tip15TextView

tipCustomTextView

total15TextView

totalCustomTextView

Figura 3.4 Componentes da interface gráfica do usuário do aplicativo Tip Calculator rotulados com

seus valores de propriedade Id.

Na coluna da direita da primeira linha, existem, na verdade, dois componentes na mesma célula da grade – o componente amountDisplayTextView está ocultando o compo- nente amountEditText _{que recebe a entrada do usuário. Conforme você verá em breve,} restringimos a entrada do usuário a dígitos inteiros para que ele não possa inserir entrada inválida. Contudo, queremos que ele veja o valor da conta como moeda corrente. À me- dida que o usuário insere cada dígito, dividimos o valor por 100,0 e exibimos o resultado

formatado em moeda corrente no componente amountDisplayTextView_{. No local U.S., se} o usuário digitar 3456, à medida que cada dígito for inserido, o componente amountDis- playTextView mostrará os valores $0.03, $0.34, $3.45 e $34.56, respectivamente.

Valores da propriedade Id de LinearLayout

A Figura 3.5 mostra os valores de Id _{dos três componentes} LinearLayout _{horizontais na} coluna da direita de GridLayout.

percentLinearLayout tipLinearLayout

totalLinearLayout

Figura 3.5 Componentes LinearLayout da interface gráfica do usuário do aplicativo Tip Calculator

com seus valores de propriedade Id.

3.4.2 Criação do projeto TipCalculator

O IDE Android Developer Tools só permite um projeto com determinado nome por área de trabalho; portanto, antes de criar o novo projeto, exclua o projeto TipCalcula- tor que você testou na Seção 3.2. Para isso, clique nele com o botão direito do mouse e selecione Delete. Na caixa de diálogo que aparece, certifique-se de que Delete project contents on disknão esteja selecionado e, em seguida, clique em OK. Isso remove o projeto

da área de trabalho, mas deixa a pasta e os arquivos do projeto no disco para o caso de, posteriormente, você querer ver nosso aplicativo original outra vez.

Criando um novo projeto Blank App

Crie um novo Android Application Project. Especifique os seguintes valores no primeiro

passo de New Android Application _{da caixa de diálogo} New Android Project _{e, em seguida,}

pressione Next >:

• Application Name_: Tip Calculator • Project Name: TipCalculator

• Package Name_: com.deitel.tipcalculator • Minimum Required SDK: API18: Android 4.3 • Target SDK_: API19: Android 4.4

• Compile With: API19: Android 4.4 • Theme_: Holo Light with Dark Action Bar • Create Activity: TipCalculator

• Build Target_{: certifique-se de que} Android 4.3 _{esteja marcado}

No segundo passo de New Android Application da caixa de diálogo New Android Project, deixe

as configurações padrão e pressione Next >. No passo Configure Launcher Icon, clique no botão Browse..._{, selecione a imagem de ícone de aplicativo} DeitelGreen.png _{(fornecida na pasta}

propriedade de está configurada como horizontal, indicando que seu conteúdo será disposto linha por linha. Configure as propriedades Padding Left _e Padding Right de GridLayout como activity_horizontal_margin e Padding Top e Padding Bottom como activity_vertical_margin.

Especificando duas colunas e margens padrão para o componente

GridLayout

Lembre-se de que a interface gráfica do usuário na Fig. 3.3 consiste em duas colunas. Para especificar isso, selecione gridLayout _{na janela} Outline _{e, então, mude sua proprie-}

dade Column Count _{para 2 (no grupo} GridLayout _{da janela} Properties_{). Por padrão, não} há uma margem – espaços que separam visualizações – em torno das células de um componente GridLayout. Configure a propriedade Use Default Margins do componente

GridLayout _{como true para indicar que ele deve colocar margens em torno de suas célu-} las. Por padrão, o componente GridLayout _{usa a distância recomendada entre visualiza-} ções (8dp), conforme especificado em

http://developer.android.com/design/style/metrics-grids.html

3.4.4 Adição dos componentes

,

,

e

Agora vamos à construção da interface gráfica do usuário da Figura 3.3. Você vai começar com o layout e as visualizações (views) básicas nesta seção. Na Seção 3.4.5, você vai per- sonalizar as propriedades das visualizações (views) para concluir o projeto. À medida que adicionar cada visualização à interface do usuário, configure sua propriedade Id imediata-

mente, usando os nomes que aparecem nas Figs. 3.4 e 3.5. A propriedade Id da visualização

selecionada pode ser alterada na janela Properties _{ou clicando com o botão direito do mouse}

na visualização (no editor Graphical Layout _{ou na janela} Outline_{), selecionando} Edit ID... _e

alterando a propriedade Id na caixa de diálogo Rename Resource que aparece.

Nos passos a seguir, você vai usar a janela Outline para adicionar visualizações ao

componente GridLayout_{. Ao trabalhar com layouts, pode ser difícil ver suas estruturas}

aninhadas e colocar visualizações nos locais corretos, arrastando-as para a janela do edi- tor Graphical Layout. A janela Outline torna essas tarefas mais fáceis, pois mostra a estru-

tura aninhada da interface gráfica do usuário. Execute os passos a seguir exatamente na ordem especificada – caso contrário, as views não aparecerão na ordem correta em cada linha. Se isso acontecer, você pode reordenar visualizações arrastando-as na janela