Estilos e Temas (Styles e Themes)
O Android foi construído com o conceito de que quase todos os elementos da interface do usuário de um aplicativo devem ser personalizáveis, permitindo que os aplicativos ajustem sua aparência para expressar sua marca, mantendo os comportamentos comuns que os usuários já entendem. Para suportar isso, o Android possui estilos, que são definidos em XML como coleções de atributos que podem ser aplicados em Vistas. Um único estilo pode ajustar cores, dimensões, espaçamento, fontes e quaisquer outros atributos personalizáveis que um View suporte. Ao agrupar esses atributos, um único estilo pode ser aplicado a muitas visualizações. Se esse estilo for atualizado, todas as Vistas usando o estilo também serão atualizadas, sem precisar ajustar todas e cada Vista. Os estilos também suportam a herança, com a capacidade de substituir e adicionar novos atributos para criar múltiplas variações de um estilo.
Agora que você entende o básico dos estilos, quais são os temas no Android? Um tema é uma coleção de atributos globais que são aplicados a uma atividade ou a um aplicativo inteiro. Esses atributos definem cores, tamanhos e estilos padrão para as vistas padrão, configurando o aspecto geral de uma aplicação. Os atributos globais do tema podem então ser referenciados dentro dos layouts da Atividade ou Aplicação aos quais eles são aplicados, que serão abordados mais tarde. Para resumir: um estilo é uma coleção de atributos aplicados em um nível de componente local e individual, enquanto os temas são aplicados em uma tela por tela ou inteiro.
Compreender atributos
Eu mencionei que os estilos e temas definem atributos, mas o que realmente é um atributo? Basicamente, você pode pensar em atributos, como variáveis, que representam propriedades que podem ser definidas, alteradas e aplicadas na interface do usuário para definir aparência e comportamento. Os atributos são definidos em XML como um dos poucos tipos: booleano, número, texto, enum ou uma referência para outro recurso. Esses atributos podem então ser referenciados ao definir elementos da interface do usuário em código ou XML. O SDK do Android define seus próprios atributos sob o android: namespace, que são usados pelos elementos e temas da interface de usuário padrão. a lista completa pode ser encontrada em R.attr. Esses atributos padrão do Android são úteis para marcar a interface de usuário padrão, mas os aplicativos podem adicionar seus próprios atributos personalizados em attrs.xml para serem usados com temas personalizados e visualizações.
Agora vamos começar com um exemplo de como um atributo pode ser usado. O caso de uso mais simples para um atributo é uma propriedade explícita que uma Vista será aplicada. Por exemplo, o TextView suporta o atributo android: textColor, que define uma cor específica para o seu texto. Em termos de Java, você basicamente configura a variável textColor para um valor específico.
int textColor = 0x00FF00;<style name="TextStyle" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>int textColorPrimary = 0x00FF00;
int textColor = textColorPrimary;<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorPrimary">#00FF00</item>
</style>
<style name="TextStyle" parent="TextAppearance.AppCompat">
<item name="android:textColor">?android:textColorPrimary</item>
</style>Temas Holo e sobrecarga de ativos
Em teoria, os temas e estilos são uma solução simples para criar uma interface de usuário completamente dinâmica que pode ser atualizada e mantida com facilidade; No entanto, na prática, é muito mais fácil dizer do que fazer. Antes do Android 5.0 (API 21), os temas eram úteis para contextos de configurações, espaçamentos de layout e tamanhos, tamanhos de fontes e cores, tamanhos e cores do divisor e outros elementos básicos da interface do usuário. No entanto, os principais elementos da interface do usuário (botões, caixas de texto, interruptores, imagens, ícones, etc.) foram muito mais difíceis de usar. Isso ocorreu porque esses elementos eram gráficos de quadriculação (png, jpeg, etc.), que definiram dimensões e cores e não são dinâmicos de nenhuma maneira. Isso significava que um botão não poderia facilmente referenciar uma cor de tema e colorir-se. Em vez disso, uma versão colorida do botão precisava ser criada e incluída como um recurso no aplicativo. Para lidar com todos os estados de botão (5) e balde de densidade de tela (6) suportados pelo Android, 30 (5 estados x 6 densidades de tela) teriam que ser gerados para esse único botão. Isso é apenas um botão, se uma nova cor do botão fosse necessária, outro conjunto de recursos era necessário. Mesmo que a cor de um botão existente precisasse ser atualizada, o conjunto completo de ativos precisaria ser atualizado e substituído. Então, você pode ver como isso rapidamente se tornou uma tarefa muito tediosa, dificultando a atualização e manutenção de temas e estilos para elementos de controle porque eles tinham que ser gerados manualmente.
No entanto, as imagens raster não eram a única opção para os elementos da interface do usuário. O Android suporta ShapeDrawables, que são recursos de forma vetorial que podem escalar sem perder a fidelidade, eliminando a necessidade de versões de densidade múltipla para um recurso. Eles também podem referenciar recursos de cores e dimensões e colorir-se dinamicamente. Então, por que não apenas atributos do tema de referência do ShapeDrawables? Infelizmente, antes que o Android 5.0 referenciando atributos do tema em ShapeDrawables compilaria, mas lançaria uma Exceção em tempo de execução. ShapeDrawables se aproximou de um conjunto mais dinâmico de elementos da interface do usuário, mas, em última instância, teve uma limitação semelhante às imagens raster, onde um recurso separado para cada cor era necessário. Isso permitiu um pouco mais fácil de programação dos controles, mas ainda demorou muito trabalho do desenvolvedor para criar elementos de interface de usuário não triviais.
Temas dinâmicos num mundo material
O Google estava ciente dos pontos de dor dos aplicativos de estilo e estilo, e no verão de 2014, desvelou Material Design ao lado do Android 5.0. O tema material foi uma forte divergência com o tema Holo que havia decorrido desde o outono de 2011 com o Android 4.0 (API 14). O design do material adicionou novas animações, controles da interface do usuário, feedback por toque e uma paleta de cores brilhante. Mas, mais importante ainda, o Android 5.0 adicionou novos recursos críticos para projetar quase todos os aspectos das interfaces de usuários de material.
Suporte de cor para Drawables e Views
Acesso atributo tema em Recursos Drawable
Capacidade de exibições individuais do tema
Isso finalmente abriu a porta para elementos de interface de usuário de cores dinâmicas sem ter que fazer várias versões para cada cor. A coloração de cores permitiu que ícones e imagens fossem coloridos sobre a marcha, enquanto o ShapeDrawables poderia fazer referência aos atributos do tema de cor para colorir dinamicamente os elementos da interface do usuário. Por último, ser capaz de aplicar temas no nível View permitiu Views no mesmo layout para usar temas completamente diferentes.
Tudo isso parece ótimo, mas e os dispositivos legados que não possuíam os novos recursos do Android 5.0? A solução do Google foi a v7 AppCompat Support Library, que inclui elementos de interface de usuário de design de materiais "tint-aware" que suportam todo o caminho de volta ao Android 2.1 (API 7).
AppCompat 101
A Biblioteca de Suporte AppCompat é muito útil, permitindo que os aplicativos usem os novos elementos de interface de usuário de material com cores dinâmicas de cor em qualquer dispositivo com Android 2.1+. No entanto, a documentação sobre como aproveitar adequadamente esses recursos é escassa. AppCompat confia em algumas coisas para funcionar como pretendido:
Qualquer atividade em uso deve se estender a partir de AppCompatActivity ou implementar AppCompatDelegate
Aplica temas e estilos que se estendem a partir de versões AppCompat
Defina os atributos do tema personalizado para temas e estilos AppCompat
Então, o que o AppCompat realmente está fazendo com tudo isso? Primeiro, o AppCompatActivity intercepta os layouts sobre a inflação e envolve as visualizações que ele pode suportar com as versões AppCompat. Essas versões AppCompat lerão os atributos do tema AppCompat personalizados e colorizarão dinamicamente as visualizações, com compatibilidade automática com versões anteriores. Se algum aspecto ou matiz precisa acontecer no tempo de execução, a Visualização só precisa ser lançada na classe apropriada do AppCompat.
Tema Todas as coisas
Agora que você sabe como o AppCompat foi projetado para funcionar, vamos juntar tudo. O Google configurou AppCompat para usar um conjunto de atributos de tema personalizados, que definem a paleta de cores a ser usada pelos estilos AppCompat. Com a capacidade de tema no nível View, diferentes temas podem ser definidos nos mesmos layouts para colorizá-los de diferentes maneiras. Para começar, você precisa de um tema de aplicativo, um tema de diálogo e um tema de diálogo de alerta.
<!-- Green App Theme -->
<style name="AppTheme.Green" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- AppCompat Attributes -->
<item name="colorPrimary">@color/material_green_500</item>
<item name="colorPrimaryDark">@color/material_green_700</item>
<item name="colorAccent">@color/material_green_a700</item>
<!-- AppCompat Control Attributes -->
<!-- Other control states (not in this example)
<item name="colorButtonNormal">@color/material_green_500</item>
<item name="colorControlNormal">@color/material_green_500</item>
<item name="colorControlActivated">@color/material_green_500</item>
<item name="colorControlHighlight">@color/selector_green_pressed</item>
-->
<!-- AppCompat Dialog Attributes -->
<item name="dialogTheme">@style/AppTheme.Dialog.Green</item>
<item name="alertDialogTheme">@style/AppTheme.Dialog.Alert.Green</item>
</style>
<!-- Green Dialog Theme -->
<style name="AppTheme.Dialog.Green" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">@color/material_green_500</item>
<item name="colorPrimaryDark">@color/material_green_700</item>
<item name="colorAccent">@color/material_green_a700</item>
</style>
<!-- Green Alert Dialog Theme -->
<style name="AppTheme.Dialog.Alert.Green" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorPrimary">@color/material_green_500</item>
<item name="colorPrimaryDark">@color/material_green_700</item>
<item name="colorAccent">@color/material_green_a700</item>
</style>Aplicando a Vistas
Agora que você tem um tema colorido, você pode configurá-lo para todo o seu Aplicativo ou atividade e ele configurará seus atributos AppCompat personalizados para serem usados por todas as Vistas AppCompat. No entanto, você também pode criar um tema de View ou ViewGroup usando o android: atributo do tema, que AppCompatActivity lida com a leitura e configuração correta quando intercepta layouts à medida que são inflado. Vamos assumir que você configurou seu tema verde no nível do aplicativo, e você não precisa definir seu tema em cada elemento.
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.Green"/>
Botões
Use @style/Widget.AppCompat.Button (padrão, se não definido), que define a cor do botão para colorButtonNormal, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green Theme"/>Para obter uma versão colorida, use @ style/Widget.AppCompat.Button.Colored, que define a cor do botão para colorAccent, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.
<Button
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green Theme"/>
Botões sem margem
Use @style/Widget.AppCompat.Button.Borderless, que usa ColorControlHighlight como uma sobreposição para estados focados e pressionados.
Use @style/Widget.AppCompat.Button.Borderless, que usa ColorControlHighlight como uma sobreposição para estados focados e pressionados.
<Button
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green Theme"/>Obtenha uma versão colorida, use @style/Widget.AppCompat.Button.Borderless.Colored, que define a cor do texto para colorAccent, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.
<Button
style="@style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green Theme"/>Botões de ação flutuante (Floating Action Button)
Use o FloatingActionButton da biblioteca de suporte de design com @style/Widget.Design.FloatingActionButton (padrão, se não definido), que define a cor do botão para colorAccent, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_palette"/>Continua no próximo artigo.
Nenhum comentário:
Postar um comentário