Estilos

Independentemente da plataforma para que desenvolvemos, parte importante do processo é a definição da aparência do nosso produto, a fim de criar uma identidade visual robusta. Com o Android não é diferente e, para facilitar esse processo, é usado o conceito de estilo, muito semelhante ao CSS (Cascade StyleSheet) em aplicações web.

Um estilo, então, é definido como uma coleção de propriedades utilizadas para definir a aparência e formatação das Views. Nele, podem ser definidas diversas propriedades diferentes (largura, cor de fonte, margens, entre muitas outras) que serão aplicadas aos elementos escolhidos para utilizá-lo. Um estilo garante, além de fácil acesso e utilização, um ótimo controle de mudanças na parte visual do aplicativo, uma vez que, quando usado corretamente, centraliza as propriedades que definirão a estilização dos componentes.

Diferentemente da formatação inline (na qual cada propriedade é inserida juntamente com a declaração do componente no layout), os estilos são definidos em arquivos XML e podem ser utilizados em quantos layouts forem necessários.

Para melhor entendimento, observe as Listagens 1 e 2 apresentadas a seguir.

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:typeface="monospace" android:text="@string/hello" /> Listagem 1– Definição inline
<TextView style="@style/CodeFont" android:text="@string/hello" /> Listagem 2 – Definição usando estilo

Como é possível observar, as diferenças de implementação apresentadas entre as Listagens 1 e 2 são todas relativas às propriedades de definição do estilo do componente. Na Listagem 1, são declaradas as propriedades necessárias ao TextView em 4 linhas, enquanto na Listagem 2, basta uma linha para se atingir o mesmo resultado.

Para definir um estilo, primeiro deve-se criar um arquivo de extensão “.xml” na pasta res/values e declarar como seu elemento principal a tag <resources>. Tendo criado o arquivo e sua estrutura, basta declarar uma tag <style> para cada estilo que se deseja criar. Cada estilo deve definir um nome (propriedade name), que será seu identificador único e utilizado como referência na hora de aplicar um estilo a um determinado componente. Além do nome, cada estilo pode definir diversas propriedades diferentes, e cada uma delas é armazenada em uma tag <item>, que por sua vez deve possuir o nome da propriedade que se deseja declarar e seu valor.

Seguindo, ainda, o exemplo apresentado nas Listagens 1 e 2, a implementação do arquivo de estilo para manter as configurações do componente após seu uso é apresentada na Listagem 3.

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="CodeFont"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style> </resources> Listagem 3 – Arquivo XML de estilos

Além de definir estilos completamente novos, podemos utilizar os conceitos de herança na hora de sua definição, garantindo que todas as propriedades já definidas em um estilo possam ser utilizadas ou reescritas. Para tal, devemos nos atentar a qual estilo queremos herdar.

Se o estilo que nós queremos utilizar é um dos estilos padrão definidos pelo Android, nós utilizaremos a propriedade parent na definição do estilo, conforme visto na Listagem 4.

<style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style> Listagem 4 – Estilo herdando de estilo do Android

Conforme visto na definição da Listagem 4, criamos um estilo chamado GreenText, que possui como pai o estilo TextAppearance, da plataforma. Porém, é definida a propriedade textColor com o valor #00FF00, que é o código hexadecimal da cor verde. Com isso, ao usar o estilo GreenText, teremos todas as propriedades definidas em TextAppearance com a diferença da cor do texto ser verde. Tal comportamento pode ser visto na Listagem 5 e na Figura 1 abaixo.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" style="@style/GreenText" /> </LinearLayout> Listagem 5 – Implementação do layout usando o estilo anteriormente definido

Para os casos nos quais desejamos herdar estilos definidos na própria aplicação, não utilizamos a propriedade parent, mas uma nova forma de declaração do nome do nosso estilo. Essa nova forma consiste em adicionar o nome do estilo pai como prefixo do novo estilo, separando-se os nomes com um "." (ponto). Como exemplo, observe a Listagem 6 a seguir.

<style name="GreenText.Big"> <item name="android:textSize">30sp</item> </style> Listagem 6 – Estilo herdando de estilo próprio

Ao utilizar esse estilo, usaremos o mesmo nome indicado na sua definição, no caso GreenText.Big, e o comportamento esperado com seu uso é a verificação de todas as propriedades definidas em GreenText (inclusive as herdadas de TextAppearance) além do novo tamanho de fonte definido no novo estilo. Dessa forma, o uso desse novo estilo ficaria conforme é mostrado na Listagem 7 e na Figura 2.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" style="@style/GreenText.Big" /> </LinearLayout> Listagem 7 – Implementação do layout usando o estilo com parent anteriormente definido

Conforme observado na Figura 2, todos os comportamentos anteriormente definidos no estilo GreenText foram mantidos, assim como a nova propriedade (referente ao tamanho da fonte) foi adicionada.

Um ponto importante a se notar ao utilizar estilos é que só serão aplicadas à View associada aquelas propriedades existentes na definição da View. Dessa forma, no processo de definição de estilos para um TextView, deve-se atentar àquelas propriedades suportadas por ele, que, no caso, podem ser verificadas em http://developer.android.com/reference/android/widget/TextView.html#lattrs. Dessa forma, qualquer atributo listado que seria utilizado como uma propriedade na definição de um TextView poderá ser definido como um item dentro de um estilo.