terça-feira, 27 de julho de 2010

Utilização de Estilos no Android - Parte 2

Olá povo,

Dando continuidade ao exemplo de utilização de estilos no Android, vou mostrar como modificar o visual de alguns componentes. Todos os elementos visuais que são selecionáveis ou clicáveis podem utilizar o recurso <selector> que permite modificar a aparência do componente, indicando quais imagens serão utilizadas para cada estado do componente. Essas imagens são definidas em um arquivo XML que deve ficar dentro da pasta res/drawable. Isso mesmo, a pasta drawable não armazena só imagens.
Vamos criar um selector que modificará as imagens de um RadioButton. Para isso, crie o arquivo res/layout/meuradiobutton.xml que deve ficar como abaixo:

<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_checked="false"
android:drawable="@drawable/img_radio_desmarcado" />
<item
android:state_window_focused="true"
android:state_checked="true"
android:drawable="@drawable/img_radio_marcado" />
</selector>

No exemplo acima, dentro da tag <selector> definimos as imagens utilizadas quando o componente estiver marcado (checked) e desmarcado. Lembrando que as imagens "img_radio_marcado" e "img_radio_desmarcado" também devem estar dentro da pasta res/drawable.

Agora devemos aplicar o selector ao RadioButton. Para utilizar o selector, basta utilizar a propriedade android:button.


<RadioButton
android:checked="false"
android:button="@drawable/meuradiobutton"
android:layout_width="wrap_content"
android:layout_heighth="wrap_content"
android:id="@+id/radioButton1"
android:text="Fácil" />


Podemos observar o resultado na figura abaixo:

Um outra característica legal de modificar é a cor de seleção de Grid e Lista. A idéia é a mesma, criamos um selector e o associamos ao GridView ou ao ListView.

<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!--Imagem do item da lista clicado -->
<item
android:state_pressed="true"
android:drawable="@drawable/img_clicado" />
<!--Imagem do item da lista selecionado sem foco -->
<item
android:state_focused="false"
android:drawable="@drawable/img_selecionado" />
<!--Imagem do item da lista selecionado com foco -->
<item
android:state_window_focused="true"
android:drawable="@drawable/img_selecionado" />
<!--Imagem do item da lista não selecionado -->
<item
android:state_window_focused="false"
android:drawable="@android:color/transparent" />
</selector>


Para esse exemplo temos uma imagem para quando item da lista está selecionado (navegando com o direcional, se o telefone possuir) e outra pra quando o item for clicado. Para aplicar o selector à lista, altere a propriedade listSelector.

<ListView
android:id="@+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="@drawable/meuselector"/>


O resultado é apresentado na figira abaixo.



Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

4 comentários:

César Oliveira disse...

Boa noite,

Fabulosa a sua matéria.
Confesso que estudo Android há quase 2 anos e ainda não tinha lido sobre nada do que consta a sua matéria.

A pergunta que eu lhe deixo é:

Por uma questão de padrão de Projecto devemos alterar a imagem dos Radio ?

Obrigado

Cumprimentos
Malainho

Nelson Glauber disse...

Oi César,

Obrigado pelo comentário.
Não é um padrão, é uma necessidade. Se você deseja personalizar o aspecto visual da sua aplicação, é uma boa ideia customizar os componentes para dar uma identidade à mesma.

4br4ç05,
nglauber

César Oliveira disse...

Boa noite,

Não sei se me expressei bem.

O que eu queria dizer é o seguinte.
Por exemplo, não devemos fazer um layout para um aplicativo que fuja aos padrões do Android. Isto é, não devemos fazer um layout para um aplicativo Android parecido com o layout de um aplicativo para ios.

Por isso fiz essa questão da alteração dos componentes.

Obrigado pela resposta

Cumprimentos
Malainho

Nelson Glauber disse...

Oi Cesar,

Sem sombra de dúvida. Aplicativos Android devem ter a cara do Android. Mas isso não que dizer que não possam haver algumas customizações.
Esse post tem um exemplo prático. O componente RadioButton, não existe no iOS, mas existe no Android. Eu apenas mudei o seu visual, mas preservei a funcionalidade.

4br4ç05,
nglauber