quarta-feira, 15 de junho de 2011

Atributos personalizados em Views Android

Olá povo,

Estou escrevendo mais uma matéria para Java Magazine em parceria com dois colegas meus. No exemplo apresentado no artigo, está sendo usado um componente criado por nós. Para criar um componente personalizado, basta criar uma classe que estenda um componente existente (EditText, Button, TextView, etc.). Porém, se quisermos criar um componente totalmente novo, devemos estender de View, que é classe mãe de todos os componentes do Android, e implementar o método draw que vai desenhar o componente na tela.
Neste ponto, surgiu a seguinte dúvida: como adicionar uma View personalizada em um arquivo de layout e passar atributos personalizados para a View? Bem simples, como quase tudo no Android. Abra o arquivos res/values/strings.xml e deixe-o conforme abaixo:
<resources>
<string name="hello">
debug is on the table
</string>
<string name="app_name">
nglauber
</string>

<declare-styleable name="MeuComponente">
<attr name="texto" format="string"/>
</declare-styleable>
</resources>

Notem que no código acima, além de dois textos com os ids hello e app_name, declaramos um estilo chamado MeuComponente, e dentro dele um atributo chamado "texto" do tipo string. Pronto! Agora é só usar esse atributo tanto na classe que herda de View, quanto no XML. Primeiro vamos ver como fica na classe que herda de view.
public class MeuComponente extends View {

private String text;
private Paint paint;

public MeuComponente(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
paint = new Paint();
paint.setColor(Color.RED);

TypedArray a = ctx.obtainStyledAttributes(
attrs, R.styleable.MeuComponente);

String s = a.getString(
R.styleable.MeuComponente_texto);

if (s != null) {
text = s.toString();
}
a.recycle();
}

@Override
public void draw(Canvas canvas) {
super.draw(canvas);
canvas.drawColor(Color.WHITE);

if (text != null){
canvas.drawText(text, 0, 20, paint);
}
}
}


A classe não é nada complicada, mas temos que observar alguns detalhes. Ao criar uma classe que herda de View, você deve implementar um dos 3 construtores possíveis: View(Context), View(Context, AttributeSet) e View(Context, AttributeSet, int). O primeiro recebe apenas o contexto de onde o componente está sendo criado. O segundo recebe o contexto e um conjunto de atributos que são passados para o componente quando ele está inserido em um arquivo de layout. O último método recebe, além dos dois parâmetros citados anteriormente, recebe um estilo que o componente pode receber.
No exemplo acima, usamos a segunda opção, que recebe o contexto e a lista de atributos definidos no XML de layout. Com o método obtainStyledAttributes obtemos um array com os atributos de um determinados estilo, no nosso caso, passamos o estilos que criamos no arquivos strings.xml.
Na linha seguinte, tentamos obter o valor do atributo "texto", caso tenha sido atribuído algum valor a essa propriedade, o valor é passado para o atributo texto. A chamada do método recycle é obrigatória após terminar o uso do array de propriedades. Por fim, no método draw o texto definido no atributo é desenhado na tela.
Agora veja como adicionar um componente personalizado em um arquivo de layout e como utilizar a nossa própria propriedade.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ngvl="http://schemas.android.com/apk/res/ngvl.android.teste"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ngvl.android.teste.MeuComponente
ngvl:text="@string/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

Vamos analisar os detalhes importantes desse arquivo. No LinearLayout, temos uma propriedade chamada xmlns:ngvl, ela indica onde estão declaras as propriedades que começarem com "ngvl". Outro ponto é que, na declaração do componente, deve constar o nome pacote + nome classe. No nosso caso, a classe MeuComponente está no pacote ngvl.android.teste. Por fim, adicionamos a propriedade ngvl:text ao nosso componente.

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

Referência:
http://jeffreysambells.com/posts/2010/10/28/custom-views-and-layouts-in-android-os-sdk/

Nenhum comentário: