Criar uma classe de visualização

Testar o Compose
O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a trabalhar com layouts no Compose.
Layouts personalizados no Compose →

Uma visualização personalizada bem projetada é como qualquer outra classe bem projetada. Ela encapsula uma um conjunto específico de funcionalidade de aplicativo com uma interface simples, usa CPU e memória de forma eficiente e assim por diante. Em além de ser bem projetada, uma visualização personalizada precisa fazer o seguinte:

  • Seguir os padrões do Android.
  • Fornecer atributos de estilo personalizados que funcionem com layouts XML do Android.
  • Enviar eventos de acessibilidade.
  • Ser compatível com várias plataformas Android.

O framework do Android oferece um conjunto de classes base e tags XML para ajudar você a criar uma visualização que atende a todas as opções e cumprimento de requisitos regulatórios. Esta lição discute como usar o framework do Android para criar a versão principal funcionalidade de uma visualização .

Também é possível encontrar informações em Componentes de visualização personalizados.

Criar uma subclasse de uma visualização

Todas as classes de visualização definidas no framework do Android estendem View: Seu a visualização personalizada também estendem View diretamente, ou você pode economizar tempo estendendo uma das visualização atual subclasses, como Button.

Para permitir que o Android Studio interaja com sua visualização, você precisa fornecer pelo menos um construtor que use uma Context e um objeto AttributeSet como parâmetros. Esse construtor permite que o editor de layout crie e edite uma instância da sua visualização.

Kotlin

class PieChart(context: Context, attrs: AttributeSet) : View(context, attrs)

Java

class PieChart extends View {
    public PieChart(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

Definir atributos personalizados

Para adicionar um View integrado à interface do usuário, especifique-o em um elemento XML e controlar seu aparência e comportamento com os atributos do elemento. Também é possível adicionar e definir estilos visualizações usando XML. Para ativar esse comportamento na visualização personalizada, faça o seguinte:

  • Defina atributos personalizados para sua visualização em um elemento de recurso <declare-styleable> .
  • Especifique valores para os atributos no seu layout XML.
  • Recuperar valores de atributo no momento da execução.
  • Aplique os valores do atributo recuperados à sua visualização.

Esta seção discute como definir atributos personalizados e especificar os valores deles. A próxima seção aborda recuperação e aplicação dos valores no tempo de execução.

Para definir atributos personalizados, adicione recursos <declare-styleable> ao seu projeto. É comum colocar esses recursos em um res/values/attrs.xml. Aqui está um exemplo de um arquivo attrs.xml: 

<resources>
   <declare-styleable name="PieChart">
       <attr name="showText" format="boolean" />
       <attr name="labelPosition" format="enum">
           <enum name="left" value="0"/>
           <enum name="right" value="1"/>
       </attr>
   </declare-styleable>
</resources>

Esse código declara dois atributos personalizados, showText e labelPosition, que pertencem a um estilo entidade chamada PieChart. Por convenção, o nome da entidade estilizável é o mesmo como nome da turma que define a visualização personalizada. Não é necessário seguir essa convenção, em muitos códigos populares os editores dependem dessa convenção de nomenclatura para fornecer o preenchimento da instrução.

Depois de definir os atributos personalizados, é possível usá-los em arquivos XML de layout, assim como os atributos atributos. O único A diferença é que seus atributos personalizados pertencem a um namespace diferente. Em vez de pertencer a alguém ao namespace http://schemas.android.com/apk/res/android, eles pertencem a http://schemas.android.com/apk/res/[your package name]. Por exemplo, veja como usar atributos definidos para PieChart: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:custom="http://schemas.android.com/apk/res-auto">
 <com.example.customviews.charting.PieChart
     custom:showText="true"
     custom:labelPosition="left" />
</LinearLayout>

Para evitar a repetição do URI do namespace longo, o exemplo usa uma xmlns. Essa diretiva atribui o alias custom a o namespace http://schemas.android.com/apk/res/com.example.customviews. Você pode escolher qualquer alias que quiser para seu namespace.

Observe o nome da tag XML que adiciona a visualização personalizada ao layout. É o nome qualificado do classe de visualização personalizada. Caso sua classe de visualização seja interna, qualifique-a ainda mais com o nome da classe externa da visualização. Por exemplo, o A classe PieChart tem uma classe interna chamada PieView. Para usar o atributos personalizados dessa classe, use a tag com.example.customviews.charting.PieChart$PieView.

Aplicar atributos personalizados

Quando uma visualização é criada a partir de um layout XML, todos os atributos na tag XML são lidos do recurso pacote e transmitido para o construtor da visualização como um AttributeSet: Embora seja ler valores diretamente do AttributeSet. tem algumas desvantagens:

  • As referências de recursos dentro de valores de atributo não são resolvidas.
  • Os estilos não são aplicados.

Em vez disso, transmita AttributeSet para obtainStyledAttributes(). Esse método transmite de volta um TypedArray matriz de que são que já foram desreferenciadas e estilizados.

O compilador de recursos do Android trabalha muito para facilitar as chamadas obtainStyledAttributes() mais fácil. Para cada <declare-styleable> recurso no diretório res/, o R.java gerado define uma matriz de atributos IDs e um conjunto de constantes que definem o índice de cada atributo da matriz. Você usa o modelo constantes para ler os atributos do TypedArray. Saiba como a classe PieChart lê seus atributos:

Kotlin

init {
    context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.PieChart,
            0, 0).apply {

        try {
            mShowText = getBoolean(R.styleable.PieChart_showText, false)
            textPos = getInteger(R.styleable.PieChart_labelPosition, 0)
        } finally {
            recycle()
        }
    }
}

Java

public PieChart(Context context, AttributeSet attrs) {
   super(context, attrs);
   TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs,
        R.styleable.PieChart,
        0, 0);

   try {
       mShowText = a.getBoolean(R.styleable.PieChart_showText, false);
       textPos = a.getInteger(R.styleable.PieChart_labelPosition, 0);
   } finally {
       a.recycle();
   }
}

Os objetos TypedArray são recursos compartilhados e precisam ser reciclados após o uso.

Adicionar propriedades e eventos

Os atributos são uma forma eficiente de controlar o comportamento e a aparência das visualizações, mas elas só podem ser lidas quando a visualização é inicializada. Para oferecer um comportamento dinâmico, exponha um getter de propriedade e par setter para cada atributo personalizado. O snippet a seguir mostra como PieChart expõe uma propriedade chamado showText:

Kotlin

fun isShowText(): Boolean {
    return mShowText
}

fun setShowText(showText: Boolean) {
    mShowText = showText
    invalidate()
    requestLayout()
}

Java

public boolean isShowText() {
   return mShowText;
}

public void setShowText(boolean showText) {
   mShowText = showText;
   invalidate();
   requestLayout();
}

Observe que setShowText chama invalidate(). e requestLayout(). Essas ligações são cruciais para garantir que a visualização se comporte de maneira confiável. Você precisa para invalidar a visualização depois de qualquer alteração em suas propriedades que possa alterar sua aparência, para que ou sistema sabe que precisa ser redesenhado. Da mesma forma, você precisa solicitar um novo layout se uma propriedade muda de forma que possam afetar o tamanho ou a forma da visualização. Esquecer essas chamadas de método pode fazer difícil de encontrar insetos.

As visualizações personalizadas também precisam ser compatíveis com listeners de eventos para comunicar eventos importantes. Para instância: PieChart expõe um evento personalizado chamado OnCurrentItemChanged para notificar os listeners que o usuário girou o gráfico de pizza para focar em uma nova fatia.

É fácil esquecer de expor propriedades e eventos, especialmente quando você é o único usuário da visualização personalizada. Definir com cuidado a interface da visualização reduz a manutenção futura custos. Uma boa regra a seguir é sempre expor qualquer propriedade que afete o aparência ou comportamento a visualização personalizada.

Design para acessibilidade

Sua visualização personalizada precisa oferecer suporte a uma grande variedade de usuários. Isso inclui usuários com deficiências que impedir que eles vejam ou usem uma tela sensível ao toque. Para apoiar usuários com deficiências, faça o seguinte:

  • Rotule seus campos de entrada usando android:contentDescription. .
  • Enviar eventos de acessibilidade chamando sendAccessibilityEvent() quando apropriado.
  • Ofereça suporte a controles alternativos, como botão direcional ou trackball.

Para mais informações sobre como criar visualizações acessíveis, consulte Tornar os apps mais acessíveis.