domingo, 15 de abril de 2012

Pattern - Dashboard

Olá Pessoal,

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.



Desenv com qualidade!

Um comentário:

Diário de uma vida disse...

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