android:clickable="true"
android:drawableTop="@drawable/configuracoes"
android:onClick="selecionarOpcao"
android:text="@string/configuracoes"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
Dica
Utilize a visualização gráfica do layout na IDE para ter uma prévia de
como está ficando a tela.
Para representar cada opção na dashboard utilizamos o widget TextView que,
além da possibilidade de exibir textos, também pode exibir uma imagem associada.
Essas imagens podem ser posicionadas à esquerda, à direita, acima ou abaixo do texto que será exibido. No nosso caso, optamos por colocá-la acima do texto, informado a imagem desejada no atributo drawableTop. Também especificamos que
nossos TextViews podem ser clicados, através do atributo clickable e que o
texto deve estar em negrito e ser da cor branca (atributos textStyle e textColor respectivamente).
Cuidados com muitos layouts aninhados
Utilizar muitos layouts aninhados pode trazer problemas de desem-
penho. Prefira desenvolver layouts que possuem poucos níveis de ani-
nhamento. Consulte o seguinte guia para obter dicas de como melhorar
o desempenho nessas situações http://developer.android.com/training/
improving-layouts/index.html
Para darmos continuidade à implementação da tela inicial de opções, vamos
usar a classe DashboardActivity. Esta nova atividade deve utilizar o layout
69
3.2. RelativeLayout
Casa do Código
dashboard.xml e responder aos métodos disparados quando uma opção for se-
lecionada. Por enquanto, o código dela ficará assim:
public class DashboardActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dashboard);
}
public void selecionarOpcao(View view) {
/*
com base na view que foi clicada
iremos tomar a ação correta
*/
TextView textView = (TextView) view;
String opcao = "Opção: " + textView.getText().toString();
Toast.makeText(this, opcao, Toast.LENGTH_LONG).show();
}
}
É importante lembrar que todas as atividades que forem criadas devem ser de-
claradas no AndroidManifest.xml. Além disso, queremos suprimir a barra de
título padrão, o que também é feito no AndroidManifest.xml configurando
para nossa aplicação o tema @android:style/Theme.NoTitleBar. Com isso,
o AndroidManifest.xml ficará parecido com:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="br.com.casadocodigo.boaviagem"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar" >
<activity
70
Casa do Código
Capítulo 3. Domine os principais elementos de Interface Gráfica
android:name=".BoaViagemActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".DashboardActivity" />
</application>
</manifest>
Com a tela de login e dashboard prontas, podemos executar a nossa aplicação e comparar as telas criadas com os protótipos apresentados na imagem 3.2. Ficaram parecidas, não é mesmo?
Dica
Durante o desenvolvimento dos layouts da aplicação, é comum exe-
cutarmos o aplicativo várias vezes para ver como está ficando. Para evitar
que seja necessário navegar e ir selecionando opções até chegar na acti-
vity desejada, inclua o intent-filter na activity a ser testada para
que ela seja a primeira a ser iniciada.
3.3
TableLayout
As próximas telas que iremos implementar serão a criação de uma nova viagem e o registro de um novo gasto. São telas tipicamente de cadastro e permitirão que sejam explorados diversos widgets para entrada de dados, tais como os Spinner, DatePicker e nosso já conhecido EditText, além de mais um tipo de layout, o
TableLayout. O protótipo das telas é o seguinte:
71
3.3. TableLayout
Casa do Código
Figura 3.4: Telas de cadastro de viagem e de gasto
Começaremos pela tela de cadastro de uma nova viagem. Para este layout uti-
lizaremos uma combinação de LinearLayout e TableLayout. Como o nome
sugere, o TableLayout permite a criação de layouts com a organização em formato de tabelas, similar ao <table> do HTML. O elemento TableRow é utilizado para representar uma linha e seus elementos-filhos representam uma célula. Por exemplo, se uma TableRow possui dois elementos, então aquela linha possui duas colunas.
Ainda podemos utilizar qualquer outra view que não a TableRow para repre-
sentar uma linha. Neste caso, a view utilizada representa uma célula e uma única coluna para aquela linha. Ou seja, com isso temos um comportamento parecido com o colspan do HTML, no qual uma célula se estende por várias colunas.
O TableLayout também tem outra característica importante: todos os seus