Views Compostas

Olá pessoal,

Conforme mencionei no artigo anterior, hoje estou escrevendo o segundo artigo sobre a criação de Views, hoje vamos falar de Views compostas. No artigo anterior descrevi como podemos customizar uma View e fazer uso das propriedades já existentes. Views compostas são aquelas que utilizam mais de uma View em sua composição.

O exemplo que preparei para este artigo é uma View para mostrar resumidamente as informações de contatos. Por enquanto ele irá utilizar dados fictícios, mais adiante irei postar um exemplo com a listagem real dos contatos do telefone.

As Views compostas são construídas por extensão de uma classe ViewGroup (como as classes de Layout vistas aqui neste blog) pois elas irão conter outras Views internamente. No exemplo que desenvolvi para este artigo eu utilizei do GridLayout, devido a flexibilidade que este possui para o encaixe dos objetos.

public class ContactView extends GridLayout

Assim como fizemos quando customizamos a View, podemos utilizar da boa prática de criar um arquivo XML para definir o layout e depois utilizar o serviço de "inflater" para aplicar a visualização do controle.


<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:id="@id/id_contact_view_image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_column="0"
        android:layout_gravity="fill_vertical"
        android:layout_row="0"
        android:layout_rowSpan="2"
        android:contentDescription="@string/string_contact_view_image_contentDescription"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@id/id_contact_view_name"
        android:layout_column="1"
        android:layout_height="30dp"       
        android:layout_marginLeft="5dp"
        android:layout_row="0" />

    <TextView
        android:id="@id/id_contact_view_phoneNumber"
        android:layout_column="1"
        android:layout_height="30dp"
        android:layout_marginLeft="5dp"
        android:textColor="@android:color/holo_blue_light"
        android:layout_row="1" />

</GridLayout>

Repare que eu utilizei valores fixos para a largura, altura e margem de alguns itens, isso foi proposital pois não utilizamos isso antes e também para que o layout ficasse definido no formato que eu necessitava.

Agora repare abaixo que eu defini todo o comportamento da View no código e no trecho em destaque é o ponto onde eu associo o XML ao controle.


package com.example.viewscompostas;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.GridLayout;
import android.widget.ImageView;
import android.widget.TextView;

public class ContactView extends GridLayout {

TextView contactName;
TextView contactPhoneNumber;
ImageView contactImage;


public ContactView(Context context) {
super(context);
init();

}

public ContactView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

public ContactView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

private void init() {

if (this.isInEditMode())
return;

String infService = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li = (LayoutInflater) getContext().getSystemService(
infService);
li.inflate(R.layout.contact_view, this, true);

contactName = (TextView) findViewById(R.id.id_contact_view_name);
contactPhoneNumber = (TextView) findViewById(R.id.id_contact_view_phoneNumber);
contactImage = (ImageView) findViewById(R.id.id_contact_view_image);

}

public static ContactView Create(Context context, Drawable image, String name,
String phoneNumber) {

ContactView contactView = new ContactView(context);
contactView.setContact(image, name, phoneNumber);
return contactView;
}

public void setContact(Drawable image, String name, String phoneNumber) {
contactName.setText(name);
contactPhoneNumber.setText(phoneNumber);
contactImage.setImageDrawable(image);
}

}

No ponto em destaque há alguns pontos importantes. Enquanto eu estava desenvolvendo, reparei que havia uma mensagem de aviso para mim sobre o modo de edição, resolvi verificar o que era e descobri que você pode fazer uma condição para que o Eclipse entenda que você está no modo de edição e assim não tente efetuar funções internas da View. Isso está definido pelas linhas amarelas.

Já as linhas em verde estão descrevendo o momento onde o serviço de layout é chamado e associa a View ao controle.

As linhas em azul mostram o momento em que a referencia aos controles são capturadas para efetuar ações.

Ai está uma view composta criada. A utilização é do mesmo modo como anterior, mas neste exemplo eu fiz diferente e estou adicionando-as através do código.


LinearLayout parent = (LinearLayout) findViewById(R.id.layoutParent);

for (int index = 0; index < 3; index++) {
ContactView cv = ContactView
.Create(parent.getContext(),
getResources().getDrawable(
ContactReference.Image[index]),
ContactReference.Name[index],
ContactReference.Phone[index]);
parent.addView(cv);
}


O exemplo deste artigo pode ser baixado aqui.

O próximo post irei falar sobre como escrever uma nova View.

Abraço a todos!