Vou mostrar como montar um Pattern DashBoard que é a tela inicial de seu sistema, nela pode conter conteúdo dinâmico ou estático, nela também são encontrados quais as principais opções de seu sistema, facilitando a navegação do usuário.
Abaixo segue um print com a estrutura do projeto:
A seguir serão apresentados todos os fontes utilizados no sistema.
Arquivo colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="title_background">#ffFF0000</color>
<color name="title_text">#ffffffff</color>
<color name="foreground">#ffffffff</color>
<color name="background">#ff000000</color>
</resources>
Arquivo strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, DashBoardActivity!</string>
<string name="app_name">DashBoard</string>
<string name="home">Nome do seu programa</string>
<string name="consulta">Consulta</string>
<string name="sobre">Sobre</string>
<string name="config">Config.</string>
<string name="venda">Vendas</string>
<string name="rodape">Mensagem de rodapé</string>
</resources>
Arquivo styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="HomeText">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">0</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:textSize"> 18sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/foreground</item>
</style>
<style name="TitleBar">
<item name="android:windowNoTitle">true</item>
<item name="android:id">@+id/title_container</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">45dip</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">@color/title_background</item>
</style>
<style name="TitleBarLogo">
<item name="android:id">@+id/title_logo</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">fill_parent</item>
</style>
<style name="TitleBarText">
<item name="android:id">@+id/title_text</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">18sp</item>
<item name="android:paddingLeft">12dip</item>
<item name="android:paddingRight">12dip</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/title_text</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
</resources>
Arquivo main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
style="@style/TitleBar"
android:id="@+id/linearLayout1">
<ImageView
style="@style/TitleBarLogo"
android:id="@+id/img1"
android:src="@drawable/dashboard"
android:onClick="onClickHome"
android:contentDescription="@null"
android:layout_marginTop = "5dip"
android:layout_marginRight="5dip"
android:layout_marginLeft="5dip"
android:layout_marginBottom = "4dip"
android:paddingBottom = "2dip"
android:background="@null"
android:layout_gravity="center"
android:paddingLeft="5dip"
android:paddingRight="7dip" />
<ImageView
android:id="@+id/sep"
android:contentDescription="@null"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="@drawable/separator"
android:layout_marginRight="7dip"/>
<TextView
style="@style/TitleBarText"
android:id="@+id/tv1"
android:paddingLeft = "8dip"
android:text="@string/home"/>
</LinearLayout>
<RelativeLayout
android:id="@+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/llRodape"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1" >
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:orientation="horizontal" >
<ImageView
android:id="@+id/ivVenda"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="@null"
android:layout_height="wrap_content"
android:onClick="onClickVenda"
android:src="@drawable/venda" />
<ImageView
android:id="@+id/ivConsulta"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="@null"
android:layout_height="wrap_content"
android:onClick="onClickConsulta"
android:src="@drawable/consulta" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/tvVenda"
style="@style/HomeText"
android:layout_width="0dp"
android:layout_marginTop="0dip"
android:layout_weight="1"
android:text="@string/venda" />
<TextView
android:id="@+id/tvConsulta"
style="@style/HomeText"
android:layout_width="0dp"
android:layout_marginTop="0dip"
android:layout_weight="1"
android:text="@string/consulta" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:orientation="horizontal" >
<ImageView
android:id="@+id/ivConfig"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="@null"
android:layout_height="wrap_content"
android:onClick="onClickConfig"
android:src="@drawable/config" />
<ImageView
android:id="@+id/ivSobre"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="@null"
android:layout_height="wrap_content"
android:onClick="onClickSobre"
android:src="@drawable/sobre" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/tvConfig"
style="@style/HomeText"
android:layout_width="0dp"
android:layout_marginTop="0dip"
android:layout_weight="1"
android:text="@string/config" />
<TextView
android:id="@+id/tvSobre"
style="@style/HomeText"
android:layout_width="0dp"
android:layout_marginTop="0dip"
android:layout_weight="1"
android:text="@string/sobre" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="@+id/llRodape"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<TextView
style="@style/TitleBarText"
android:id="@+id/tvRodape"
android:layout_width="fill_parent"
android:text="@string/rodape"
android:background="@color/title_background"/>
</LinearLayout>
</RelativeLayout>
Arquivo DashBoardActivity.java
package br.com.EscolaDeAndroid;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;
public class DashBoardActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public void onClickVenda(View v){
trace("Venda");
}
public void onClickConsulta(View v){
trace("Consulta");
}
public void onClickConfig(View v){
trace("Configurações");
}
public void onClickSobre(View v){
trace("Sobre");
}
public void onClickHome(View v){
trace("Home");
}
public void toast (String msg)
{
Toast.makeText (getApplicationContext(), msg, Toast.LENGTH_SHORT).show ();
}
private void trace (String msg)
{
toast (msg);
}
}
No exemplo apresentado o sistema ainda não efetua nenhuma tarefa, apensa exibe uma mensagem quando o usuário clicar em alguma das imagens, inclusive na imagem do DashBoard, mas o principal desse projeto é ensinar como criar criar esse tipo de layout.
Como resultado temos a seguinte imagem:
Abaixo seguem as imagens utilizadas nos botões:
Em breve estarei postando outros exemplos de Patterns.
Desenvolvi o jogo Circus Puzzle Free ele é um quebra-cabeça e está publicado no Android Market, agradeço a todos que baixarem, jogarem e comentarem.
Desenvolvi o jogo Circus Puzzle Free ele é um quebra-cabeça e está publicado no Android Market, agradeço a todos que baixarem, jogarem e comentarem.
Desenv com qualidade!
Um comentário:
Amigo, só agora encontrei esse teu maravilhoso aplicativo.
Mas estou tendo problemas com o código fonte, pois sou novato no Android.
Ao rodar o AVD força o fechamento, acredito por algum descuido meu. Estou usando um emulador 4.4 do android.
Pergunto se terias algum Link com os arquivos fontes, ou então, num especial favor, enviar-me o pacote do projeto compactado.
Abs. elfogaca@gmail.com
Postar um comentário