Botão personalizado

  • Artigo

Nesta seção, você criará um botão com uma imagem personalizada em vez de texto, usando o Button widget e um arquivo XML que define três imagens diferentes a serem usadas para os diferentes estados de botão. Quando o botão for pressionado, uma mensagem curta será exibida.

Clique com o botão direito do mouse e baixe as três imagens abaixo e copie-as para o diretório Recursos/desenhável do projeto. Eles serão usados para os diferentes estados de botão.

Ícone do Android verde para o estado normalÍcone do Android Laranja para estado focalizadoÍcone do Android Amarelo para estado pressionado

Crie um novo arquivo no diretório Recursos/desenhável chamado android_button.xml. Insira o seguinte XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/android_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/android_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/android_normal" />
</selector>

Isso define um único recurso desenhável, que alterará sua imagem com base no estado atual do botão. O primeiro <item> define android_pressed.png como a imagem quando o botão é pressionado (ele foi ativado); o segundo <item> define android_focused.png como a imagem quando o botão está focado (quando o botão é realçado usando o trackball ou o teclado direcional); e o terceiro <item> define android_normal.png como a imagem para o estado normal (quando nem pressionado nem focado). Esse arquivo XML agora representa um único recurso desenhável e, quando referenciado por um Button para seu plano de fundo, a imagem exibida será alterada com base nesses três estados.

Observação

A ordem dos <item> elementos é importante. Quando esse desenho é referenciado, os <item>s são percorridos para determinar qual deles é apropriado para o estado atual do botão. Como a imagem "normal" é a última, ela só é aplicada quando as condições e android:state_focused ambas são avaliadas como falsasandroid:state_pressed.

Abra o arquivo Resources/layout/Main.axml e adicione o Button elemento :

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/android_button" />

O android:background atributo especifica o recurso desenhável a ser usado para o plano de fundo do botão (que, quando salvo em Recursos/desenhável/android.xml, é referenciado como @drawable/android). Isso substitui a imagem de plano de fundo normal usada para botões em todo o sistema. Para que o desenhável altere sua imagem com base no estado do botão, a imagem deve ser aplicada à tela de fundo.

Para fazer com que o botão faça algo quando pressionado, adicione o código a seguir no final doOnCreate() Método:

Button button = FindViewById<Button>(Resource.Id.button);

button.Click += (o, e) => {
    Toast.MakeText (this, "Beep Boop", ToastLength.Short).Show ();
};

Isso captura o Button do layout e adiciona uma Toast mensagem a ser exibida quando o Button é clicado.

Agora execute o aplicativo.

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Projeto de Software Livre do Android e usadas de acordo com os termos descritos naLicença de Atribuição do Creative Commons 2.5.