Banner Livro Google Android? ---> Banner Livro Google Android? --->
Hoje é 09 Set 2010, 17:40



Implementando uma User Interface (UI) - Parte 2/2



Criar novo tópico Responder Tópico  [ 2 Mensagens ] 
 Implementando uma User Interface (UI) - Parte 2/2 
Autor Mensagem
Android application
Android application
Avatar de usuário

Data de registro: 27 Dez 2007, 16:17
Mensagens: 74
Mensagem Implementando uma User Interface (UI) - Parte 2/2
Trabalhando com AdapterViews (Vinculação de Dados)

Como anteriormente mensionado, algumas view groups possuem uma UI. Estes objetos tipicamente são subclasses de AdapterView. Como por exemplo uma Gallery (componente de seleção de imagens) ou uma ListView (uma lista de views). Estes objetos possuem dois trabalhos em comum:

:arrow: Preencher o layout com dados
:arrow: Tratar seleções do usuário

Preenchendo o layout com dados

Isto é tipicamente realizado pela vinculação da classe a uma adaptador que traz a data de algum lugar.

// Pega um Spinner e vincula ele a uma ArrayAdapter que
// referencia uma array de Strings
private String[] fruit = {"apples", "oranges", "lemons"}
Spinner s1 = (Spinner)findViewById(R.id.fruitlist);
s1.setAdapter(new ArrayAdapter<String>(this, R.layout.spinner_1, mStrings));
 
// Carrega um spinner e vincula ele a uma consulta de dados
private String[] cols={android.provider.Contacts.PeopleColumns.NAME};
private Cursor cur = managedQuery(android.provider.Contacts.People.CONTENT_URI, cols, null, null);
s2.setAdapter(new CursorAdapter(cur, this));


Tratando seleções do usuário

Isto é feito definindo o método OnItemClickListener da classe AdapterView para um listener e então obter as mudanças de seleção.

// Criamos um objeto como uma classe anônima que trata a seleção exibindo uma mensagem
private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id)
    {
        // Exibe uma caixa de mensagem
        showAlert("You've got an event", "Clicked me!", "ok", false);
    }
};
 
// Agora definimos o onItemClickListener do nosso objeto
// para nossa classe de tratamento
mHistoryView = (ListView)findViewById(R.id.history);
mHistoryView.setOnItemClickListener(mMessageClickedHandler);


Projetando sua tela com XML

Como projetar uma tela em código pode ser chato, o Android suporta uma sintaxe XML para fazer este trabalho. O Android define um grande número de elementos, cada um representando uma subclasse de View específica. Você pode projetar sua tela da mesma forma que você cria arquivos HTML, como uma série de tags aninhadas, salvas em um arquivo XML dentro do diretório res/layout/. Cada arquivo descreve um único elemento android.view.View, mas este elemento pode ser tanto um elemento com visual simples, quanto um elemento que contém uma coleção de elementos imbutidos. Quando o Android compila a sua aplicação, ele compila cada arquivo em um recurso android.view.View que você pode carregar em código chamando setContentView(R.layout.nome_do_arquivo_de_layout) na sua implementação do método Activity.onCreate().

Cada arquivo XML é composto por tags que correspondem a classes GUI do Android. Estas tags possuem atributos que correspondem aproximadamente aos métodos naquela classe (por exemplo, um EditText tem um atributo de text que corresponde a EditText.setText).

Note que não há uma correspondência exata entre os nomes dos métodos e classe, e elemento e nome de atributo.

Também note que o Android tende a desenhar os elementos na ordem em que eles aparecem no XML. Portanto, se os elementos de sobreporem, o último no arquivo XML vai provavelmente ser desenhado acima de qualquer um anteriormente listado naquele espaço.

Cada arquivo XML é compilado numa árvore com uma raíz única, que pode ser uma View ou ViewGroup, e então deve conter uma única tag raíz.

Atributos nomeados layout_algumacoisa são aplicados para o membro LayoutParams daquele objeto.

Os seguintes valores são suportados pelas dimensões (descritos em TypedValue):

- px (pixels)
- dip (pixels independentes de dispositivos)
- sp (scaled pixels — melhor para tamanhos de texto)
- pt (pontos)
- in (polegadas)
- mm (milimetros)

Exemplo:
android:layout_width="25px"


O seguinte arquivo XML cria a tela exibida. Note que o texto no topo da tela foi definido pela chamada ao método Activity.setTitle e que os atributos que se referem a elementos relativos (i.e., layout_toLeft), fazer isso pelo ID, utilizando a sintaxe de um recurso relativo (@id/id_number).

<?xml version="1.0" encoding="utf-8"?>
<!-- Demonstra o uso de um layout relativo para criação de um formulário -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
                android:layout_width="
fill_parent"
                android:layout_height="
wrap_content"
                android:background="
@drawable/blue"
                android:padding="
10px">
 
    <TextView id="@+id/label"
              android:layout_width="
fill_parent"
              android:layout_height="
wrap_content"
              android:text="
Type here:"/>
 
    <EditText id="@+id/entry"
              android:layout_width="
fill_parent"
              android:layout_height="
wrap_content"
              android:background="
@android:drawable/editbox_background"
              android:layout_below="
@id/label"/>
 
    <Button id="@+id/ok"
            android:layout_width="
wrap_content"
            android:layout_height="
wrap_content"
            android:layout_below="
@id/entry"
            android:layout_alignParentRight="
true"
            android:layout_marginLeft="
10px"
            android:text="
OK" />
 
    <Button android:layout_width="wrap_content"
            android:layout_height="
wrap_content"
            android:layout_toLeft="
@id/ok"
            android:layout_alignTop="
@id/ok"
            android:text="
Cancel" />
</RelativeLayout>


Resultado:
Imagem


Carregando um recurso XMl de layout

Para carregar um recurso compilado, realize uma chamada no método onCreate(), como mostrado a seguir:

protected void onCreate(Bundle savedValues)
{
   // Sempre chame a superclasse
   super.onCreate(savedValues);
 
   // Carrega o recurso de layout compilado Load no
   // ViewGroup padrão da janela
   // O arquivo do recurso é res/layout/hello_activity.xml
    setContentView(R.layout.hello_activity);
 
   // Recorda quaisquer valores guardados
   restoreValues(savedValues);
}


Realizando uma ligação com um elemento de tela

Você pode conseguir um ponteiro para um elemento de tela chamando Activity.findViewById. Você pode utilizar este ponteiro para fixar ou obter qualquer valor exposto pelo objeto.

TextView msgTextView = (TextView)findViewById(R.id.msg);
msgTextView.setText(R.string.push_me);


Ouvindo notificações da UI

Algumas notificações são automaticamente expostas e chamadas pelo Android. Por exemplo, uma Activity expõe métodos que podem ser sobre-escritos como onKeyDown e onKeyUp, e Widgets expõem onFocusChanged(boolean, int). Porém, alguns callbacks importantes, como cliques em botões, não são nativamente expostos, e devem ser registrados manualmente, como mostrado abaixo:

public class SendResult extends Activity
{
    /**
     * Inicialização da tela após sua primeira criação. Deve pelo menos
     * chamar setContentView() para definir o que deve ser exibido na tela.
     */

    protected void onCreate(Bundle savedValues)
    {
        ...
 
        // Ouve por cliques no botão
        Button button = (Button)findViewById(R.id.corky);
        button.setOnClickListener(mCorkyListener);
    }
 
    // Cria uma classe anônima para agir como ouvinte de cliques para um botão
    private OnClickListener mCorkyListener = new OnClickListener()
    {
        public void onClick(View v)
        {
            // Para enviar um resultado, simplesmente chame setResult() antes que
            // sua atividade esteja terminada.
            setResult(RESULT_OK, "Corky!");
            finish();
        }
    };



Aplicando um tema na sua aplicação

Se você não especificar explicitamente um tema para a sua UI, o Android irá utilizar o tema padrão definido por android.R.style.Theme. Muitas vezes você vai querer utilizar um tema diferente (como Theme.Dark) ou criar o seu próprio tema.

Para definir o seu tema no XML, simplesmente especifique o tema desejado no AndroidManifest.xml com o atributo theme. Isso pode ser utilizado com a tag <application> para especificar o tema padrão para todas as suas atividades, e/ou em <activity> para controlar o tema separadamente.

<!-- AndroidManifest.xml-->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.google.android.home">

    <application android:theme="@android:style/Theme.Dark" >
        <activity class=".Home"
        ...
        </activity>

    </application>
</manifest>


Você ainda pode definir o tema programaticamente, se necessário. Quando você fizer isso, tenha certeza de definir o tema antes de criar quaisquer views para que o tema correto seja aplicado para todos os seus elementos de interface. Note que esta prática tipicamente deve ser evitada, especialmente nas atividades principais da sua aplicação, por que o tema que você definir aqui pode não ser utilizado para alguma animação que o sistema utilize para exibir a atividade (o que é feito antes que a aplicação inicie).

protected void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    ...
    setTheme(android.R.style.Theme_Dark);
    setContentView(R.layout.linear_layout_3);
 }



Elementos UI e glossário de conceitos

:arrow: Activity – A tela padrão numa aplicação Android. Activity é a classe que o Android pode iniciar quando uma Intent correspondente é lançada por esta ou outra aplicação. Comumente, é representado por uma tela cheia que pode receber e tratar eventos de UI e executar tarefas complexas, devido a Window utilizada para renderizar a janela. Embora um Activity seja tipicamente uma tela cheia, ela pode também ser flutuante ou transparente.

:arrow: View – Uma área retangular na tela que pode ser desenhada, trata cliques, eventos do teclado e outros eventos de interação. Uma View é a classe de base para a maioria dos componentes que uma atividade ou janela (caixas de texto, etc). Ela recebe chamadas de seu container para desenhar a si mesma, e informa ao pai sobre onde e quão grande ela gostaria de ser (pode ou não ser respeitado pelo pai). É representado pela classe de base View.

:arrow: View Group – Um recipiente que detém múltiplos objetos View, decide onde devem ficar e quão grandes eles podem ser, e solicita a eles que se desenhem quando apropriado. Alguns são invisíveis e apenas para layout, enquanto outros têm uma interface gráfica si. View Groups estão no mesmo pacote de widgte, mas extendem ViewGroup.

:arrow: Widget – Um elemento do formulário como uma caixa de texto ou um menu popup. Eles possuem a habilidade de desenhar a si mesmos e tratar eventos. Widgets estão todos no pacote widget.

:arrow: Drawable – Um elemento visual que é carregado em um outro elemento da interface gráfica, tipicamente como uma imagem de fundo. Ela não recebe eventos, mas pode atribuir diversas outras propriedades, tais como “estado” e agendamento para habilitar subclasses para a animação de objetos gráficos ou bibliotecas. Muitos objetos drawable são carregados apartir de arquivos de recursos – arquivos xml ou bitmaps que descrevem a imagem. A classe base é Drawable.

:arrow: Panel – Um painel é um conceito não apoiado por uma determinada classe. Trata-se de uma espécie de View que está estreitamente vinculada a uma janela, mas pode tratar cliques e desempenhar funções simples relacionadas a ele. Um painel flutua na frente de seu pai e é posicionado em relação a ele. Um exemplo comum de um painel (implementado por Android) é o menu de opções disponíveis para todas as telas.

:arrow: Dialog – Uma Dialog é uma janela flutuante que pode ter botões, e atua como uma forma leve que se destina a, no máximo, realizar uma ação simples (como clicar em um botão) e talvez retornar um valor. Não se pretende que persistam na pilha de histórico, contenham layouts complexos, ou executem ações complexas. O Android fornece uma dialog padrão para você com botões opcionais, mas você pode definir uma personalizada. A classe de base é Dialog, e os métodos auxiliares para abrir uma caixa de diálogo são os vários métodos Activity.showAlert().

:arrow: Window – Uma classe abstrata que especifica os elementos genéricos de uma janela, como o look and feel (título , a localização, os conteúdos dos menus, e assim por diante). Dialog e Activity usam uma implementação desta classe para renderizar uma janela. Você não deve precisar implementar esta classe.

:arrow: Surface – Um bloco de memória que é alocado na tela. Um Surface detém um objeto de Canvas para desenho, e fornece diversos métodos auxiliares para desenhar camadas e redimensionar a superfície. Você não deve utilizar esta classe diretamente; utilize SurfaceView ao invéz dela.

:arrow: SurfaceView – Um objeto View que envolve uma superfície de desenho, e expõe métodos para especificar o seu tamanho e formato dinamicamente. O aplicativo de câmera utiliza SurfaceView para realizar sua tela de preview. A SurfaceView fornece uma maneira de chamar independentemente da thread da UI de para operações de intenso uso de recursos (tais como jogos ou previews de câmeras), mas ele usa memória extra como resultado. O SurfaceView suporta gráficos tanto Canvas e OpenGL ES.

:arrow: Canvas – Uma superfície de desenho onde os bits atuais são postos. Possui métodos para desenho computadorizado padrão dos bitmaps, linhas, círculos, retângulos, textos, e assim por diante. Ele está vinculado a um Bitmap ou Surface. Canvas é a maneira mais simples e fácil de se desenhar objetos 2D na tela. No entanto, ele não suporta aceleração de hardware, como OpenGL ES.

:arrow: OpenGL ES – O Android prevê bibliotecas OpenGL ES que você pode usar para fazer rapidamente imagens 3D complexas. É muito mais difícil de usar do que um objeto Canvas, mas é melhor para objetos 3D. O pacote graphics.glutils expõe as funcionalidades OpenGL ES.

_________________
http://www.portalandroid.org - Tudo sobre o Android.


20 Fev 2008, 03:04
Perfil
Android application
Android application

Data de registro: 17 Mai 2010, 15:16
Mensagens: 99
Mensagem Re: Implementando uma User Interface (UI) - Parte 2/2
Como faço para ter mais de uma janela...
Falows


17 Mai 2010, 16:14
Perfil
Mostrar mensagens anteriores:  Organizar por  
Criar novo tópico Responder Tópico  [ 2 Mensagens ] 


Quem está online

Usuários vendo este fórum: Nenhum usuário registrado online e 4 visitantes


Você não pode criar novos tópicos neste fórum
Você não pode responder tópicos neste fórum
Você não pode editar suas mensagens neste fórum
Você não pode excluir suas mensagens neste fórum
Você não pode enviar anexos neste fórum

Procurar por:
Ir para:  

© 2010 Portal Android // Comunidade de Desenvolvedores da Plataforma Android. Entre em contato!!!


Powered by phpBB