SDK do Android: criando visualizações personalizadas

A plataforma Android oferece uma ampla variedade de itens de interface do usuário que são suficientes para as necessidades da maioria dos aplicativos. No entanto, pode haver ocasiões em que você sinta a necessidade de implementar uma interface de usuário personalizada para um projeto em que está trabalhando. Neste tutorial, trabalharemos no processo de criação de uma visualização personalizada.

Para criar e usar nossa View customizada, vamos estender a classe View, definir e especificar alguns atributos customizados, adicionar a View ao nosso XML de layout, substituir o onDraw para personalizar a aparência da View e manipulá-la da Activity principal do nosso aplicativo.

Passo 1: Criar um projeto Android

Crie um novo projeto Android no Eclipse. Você pode escolher as configurações que desejar, desde que seu aplicativo tenha uma classe Activity principal e um arquivo de layout para ela. Não precisamos de nenhuma alteração no arquivo Manifesto. No arquivo de download do código-fonte, a Activity principal é chamada de “LovelyActivity” e o arquivo de layout é “activity_lovely.xml” – altere o código para se adequar aos seus próprios nomes, se necessário. Estaremos criando e adicionando alguns arquivos adicionais à medida que avançamos.

Passo 2: Criar uma classe de visualização

Nossa visualização personalizada pode estender qualquer uma das classes Android View existentes, como Button ou TextView. No entanto, criaremos uma subclasse direta de View. A extensão de uma classe existente permite que você use a funcionalidade e o estilo existentes associados a essa classe, enquanto fornece processamento para atender às suas próprias necessidades adicionais.

Crie uma nova classe em seu aplicativo selecionando o pacote principal do aplicativo no Eclipse e escolhendo “File”, “New”, “Class”. Digite um nome de sua escolha e clique em “Concluir”. O código do tutorial usa o nome da classe “LovelyView” – você precisará alterá-lo em todo o código abaixo se escolher um nome diferente. Faça sua nova classe estender View adicionando à sua linha de declaração de abertura:

public class LovelyView extends View {

Adicione as seguintes instruções de importação acima disso:

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;

Etapa 3: Criar recursos de atributo

Para usar nossa Visualização personalizada como usaríamos uma Visualização padrão (ou seja, definir seus atributos no layout XML e referenciá-los em nosso código Java), declararemos recursos de atributo. No Eclipse, crie um novo arquivo na pasta “res/values” do seu projeto selecionando-o e escolhendo “File”, “New”, “File”. Digite “attrs.xml” como o nome do arquivo e clique em “Concluir”.

No arquivo de atributos, primeiro precisamos indicar que estamos listando recursos, então adicione o seguinte elemento pai:

Dentro deste elemento, vamos declarar três atributos para a View que nos permitirá estilizá-la. Vamos manter as coisas relativamente simples – a View exibirá um círculo com algum texto no meio. Os três atributos serão a cor do círculo, o texto String e a cor do texto. Adicione o seguinte dentro do seu Recursos elemento:

o com estilo de declaração O elemento especifica o nome da visualização. Cada atributo tem um nome e formato. Poderemos especificar esses atributos no XML do layout quando adicionarmos a View personalizada e também recuperá-los na classe View. Também poderemos recuperar e definir os atributos de nossa classe Java Activity. Os valores fornecidos para cada atributo precisarão ser do tipo listado aqui como formato.

Passo 4: Adicione a vista ao layout

Vamos adicionar uma instância da View personalizada ao arquivo de layout principal do nosso aplicativo. Para especificar a visualização personalizada e seus atributos, precisamos adicionar um atributo ao elemento de layout pai. No download fonte, é um Esquema relativo mas você pode usar o tipo que preferir. Adicione o seguinte atributo ao elemento pai do seu layout:

xmlns:custom="https://schemas.android.com/apk/res/your.package.name"

Altere “your.package.name” para refletir o pacote em que seu aplicativo está. Isso especifica o namespace do nosso aplicativo, permitindo-nos usar os atributos que definimos dentro dele. Agora podemos adicionar uma instância da nova View. Dentro do layout, adicione-o da seguinte forma:

Novamente, altere o nome do pacote para se adequar ao seu, e o nome da classe, se necessário. Usaremos o ID para fazer referência à View em nosso código de atividade. Observe que o elemento lista os atributos de visualização padrão junto com os atributos personalizados. Os atributos personalizados são precedidos por “custom:” e usam os nomes que especificamos em nosso arquivo XML de atributos. Observe também que especificamos valores dos tipos que indicamos usando o formato atributos no arquivo “attrs.xml”. Vamos recuperar e interpretar esses valores em nossa classe View.

Etapa 5: Recupere os Atributos

Agora vamos voltar para a classe View que criamos. Dentro da declaração da classe, adicione algumas variáveis ​​de instância da seguinte forma:

//circle and text colors
private int circleCol, labelCol;
//label text
private String circleText;
//paint for drawing custom view
private Paint circlePaint;

Usaremos os três primeiros para acompanhar as configurações atuais de cor e texto. O objeto Paint é para quando desenhamos a View. Após essas variáveis, adicione um método construtor para sua classe:

public LovelyView(Context context, AttributeSet attrs){
	super(context, attrs);

}

Como estamos estendendo a classe View, a primeira coisa que fazemos é chamar o método da superclasse. Depois de super chamada, vamos estender o método para configurar a View. Primeiro instancie o objeto Paint:

//paint object for drawing in onDraw
circlePaint = new Paint();

Agora vamos recuperar os valores de atributo que definimos em XML:

//get the attributes specified in attrs.xml using the name we included
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
	R.styleable.LovelyView, 0, 0);

Essa matriz digitada fornecerá acesso aos valores de atributo. Observe que usamos o nome do recurso que especificamos no arquivo “attrs.xml”. Vamos agora tentar recuperar os valores dos atributos, usando um tentar bloquear caso algo dê errado:

try {
	//get the text and colors specified using the names in attrs.xml
	circleText = a.getString(R.styleable.LovelyView_circleLabel);
	circleCol = a.getInteger(R.styleable.LovelyView_circleColor, 0);//0 is default
	labelCol = a.getInteger(R.styleable.LovelyView_labelColor, 0);
} finally {
	a.recycle();
}

Lemos os atributos em nossas variáveis ​​de instância. Observe que usamos os nomes listados para cada um em “attrs.xml” novamente. As cores são recuperadas como valores inteiros e o rótulo de texto como uma String.

Esse é o método construtor completo – no momento em que for executado, a classe deve ter recuperado os atributos View selecionados que definimos no arquivo de recursos de atributo e definido os valores no layout XML.

Etapa 6: Desenhe a vista

Agora temos nossos atributos View na classe, então podemos ir em frente e desenhá-lo. Para fazer isso, precisamos substituir o onDraw método. Adicione seu contorno após seu método construtor da seguinte forma:

@Override
protected void onDraw(Canvas canvas) {
	//draw the View
}

Já que vamos desenhar um círculo, vamos pegar algumas informações sobre o espaço disponível, dentro do onDraw método:

//get half of the width and height as we are working with a circle
int viewWidthHalf = this.getMeasuredWidth()/2;
int viewHeightHalf = this.getMeasuredHeight()/2;

Agora podemos calcular o raio do círculo:

//get the radius as half of the width or height, whichever is smaller
//subtract ten so that it has some space around it
int radius = 0;
if(viewWidthHalf>viewHeightHalf)
	radius=viewHeightHalf-10;
else
	radius=viewWidthHalf-10;

Agora vamos definir algumas propriedades para pintar com:

circlePaint.setStyle(Style.FILL);
circlePaint.setAntiAlias(true);

Agora usaremos a cor do círculo selecionada conforme armazenada em nossa variável de instância:

//set the paint color using the circle color specified
circlePaint.setColor(circleCol);

Isso significa que o círculo será desenhado com qualquer cor listada no layout XML. Vamos desenhá-lo agora usando estes detalhes:

canvas.drawCircle(viewWidthHalf, viewHeightHalf, radius, circlePaint);

Agora vamos adicionar o texto. Primeiro, defina a cor usando o valor recuperado do XML do layout:

//set the text color using the color specified
circlePaint.setColor(labelCol);

Agora defina mais algumas propriedades:

//set text properties
circlePaint.setTextAlign(Paint.Align.CENTER);
circlePaint.setTextSize(50);

Finalmente, podemos desenhar o texto, usando a string de texto recuperada:

//draw the text using the string attribute and chosen properties
canvas.drawText(circleText, viewWidthHalf, viewHeightHalf, circlePaint);

Isso é onDraw completo.

Etapa 7: Fornecer métodos Get e Set

Ao criar uma Visualização personalizada com seus próprios atributos, é recomendável que você também forneça pegue e definir métodos para eles em sua classe View. Depois de onDraw método, primeiro adicione o pegue métodos para os três atributos personalizáveis:

public int getCircleColor(){
	return circleCol;
} 

public int getLabelColor(){
	return labelCol;
}

public String getLabelText(){
	return circleText;
}

Cada método simplesmente retorna o valor solicitado. Agora adicione o definir métodos para os atributos de cor:

public void setCircleColor(int newColor){
	//update the instance variable
	circleCol=newColor;
	//redraw the view
	invalidate();
	requestLayout();
}
public void setLabelColor(int newColor){
	//update the instance variable
	labelCol=newColor;
	//redraw the view
	invalidate();
	requestLayout();
}

Esses métodos aceitam int parâmetros que representam a cor a ser definida. Em ambos os casos, atualizamos a variável de instância em questão e solicitamos que a View seja redesenhada. Isso fará com que o onDraw execute novamente, para que os novos valores afetem a View exibida ao usuário. Agora adicione o definir método para o texto:

public void setLabelText(String newLabel){
	//update the instance variable
	circleText=newLabel;
	//redraw the view
	invalidate();
	requestLayout();
}

Este é o mesmo que os outros dois definir métodos exceto para o parâmetro String. Chamaremos esses métodos em nossa classe Activity a seguir.

Etapa 8: Manipular a visualização da atividade

Agora que temos o básico de nossa View customizada, vamos demonstrar usando os métodos dentro de nossa classe Activity. Na classe Activity principal do aplicativo, adicione as seguintes instruções de importação:

import android.graphics.Color;
import android.view.View;

Antes de o onCreate método, dentro da declaração de classe, adicione uma variável de instância representando a instância da View personalizada exibida:

private LovelyView myView;

Dentro de onCreate método, após o código existente, recupere-o usando seu ID conforme incluído no arquivo de layout XML:

myView = (LovelyView)findViewById(R.id.custView);

Para demonstrar a configuração dos valores do atributo View da Activity, adicionaremos um botão simples. Abra seu arquivo de layout e adicione-o após o elemento View personalizado:

Especificamos um método para executar nos cliques do usuário – adicionaremos isso à classe Activity. Primeiro adicione a String ao seu arquivo XML “res/values/strings”:

Press Me

Agora volte para a classe Activity e adicione o método listado para cliques no botão:

public void btnPressed(View view){
//update the View
}

Vamos usar o definir métodos que definimos para atualizar a aparência personalizada da View:

myView.setCircleColor(Color.GREEN);
myView.setLabelColor(Color.MAGENTA);
myView.setLabelText("Help");

Obviamente, isso é apenas para demonstrar como você pode interagir com uma exibição personalizada em seu código de atividade. Quando o usuário clica no botão, a aparência da exibição personalizada será alterada.

Conclusão

Em geral, é aconselhável usar classes existentes do Android View sempre que possível. No entanto, se você sentir que precisa de um nível de personalização além das configurações padrão, criar suas próprias exibições personalizadas normalmente é simples. O que abordamos neste tutorial é realmente apenas o começo quando se trata de criar interfaces de usuário Android personalizadas. Consulte o guia oficial para obter informações sobre como adicionar interatividade e otimização às suas personalizações.