AULA-4 ASPECTOS DE DESIGN NA PLATAFORMA ANDROID

Prévia do material em texto

DESENVOLVIMENTO NATIVO
AULA-4 ASPECTOS DE DESIGN NA PLATAFORMA ANDROID
INTRODUÇÃO
O desenvolvimento de aplicações móveis nativas requer a construção de interfaces intuitivas, com ênfase na usabilidade e experiência do usuário. A construção de uma boa interface gráfica contribui para o sucesso de um projeto móvel.
O Android oferece um conjunto de componentes e recursos para permitir a construção de interfaces ricas.
A Google disponibiliza um conjunto de recomendações chamadas de “Android Design” que trata de princípios básicos de design, materiais para design, dispositivos, estilos, padrões, dentre outros.
INTRODUÇÃO AO DESIGN DE INTERFACE ANDROID
O Google disponibiliza em sua página um conjunto de princípios e boa práticas para a construção da interface gráfica do usuário para o Android.
O Android Design* é um conjunto de diretrizes para auxiliar desenvolvedores a construir a UI (user interface).
Os princípios de projeto para Android consiste de um detalhamento quanto ao projeto de UI para diferentes tipos de tipos de dispositivos Android.
ANDROID DESIGN
Um conjunto de diretrizes de projeto proposto pela Google para auxiliar os desenvolvedores na construção da interface gráfica de aplicações para o Android.
Princípios básicos de design, 
Materiais para design, 
Animações, 
Estilos, 
Padrões, 
etc.
Não é uma obrigação a ser cumprida pelo desenvolvedor, e sim um conjunto de recomendações a serem seguidas.
ANDROID DESIGN
ANDROID DESIGN
O processo de aprovação de aplicações para a loja virtual Google Play não considera a avaliação da interface gráfica da aplicação.
“Liberdade de criatividade”.
PRINCÍPIOS DE PROJETO DE DESIGN PARA ANDROID
Encante-me
Simplifique minha vida
Faça com que eu seja incrível
SISTEMA DE UI DO ANDROID
Estrutura que permite que os aplicativos sejam criados.
Smartphones e Tablets contém 3 elementos básicos:
Tela inicial
Tela “Todas as aplicações”
Telas recentes 
SISTEMA DE UI DO ANDROID
Tela Inicial
É um espaço personalizável que abriga atalhos de aplicativos, pastas e widgets. 
Consiste de um conjunto de paineis cuja navegação se dá através do deslizamento horizontal, para a direita ou para a esquerda.
A parte inferior é composto por atalhos e pastas mais importantes, e com visão independente do painel da tela inicial.
O acesso aos aplicativos e widgets se dá tocando no botão virtual central.
SISTEMA DE UI DO ANDROID
Tela “Todas as aplicações”
Tela que permite navegar por todo o conjunto de aplicativos e widgets instalados no dispositivo Android.
Permite aos usuários criar atalhos na tela inicial através da ação de arrastar um ícone de aplicação ou widget da tela Todos os apps e colocá-lo em qualquer local vazio dos painéis da tela inicial.
SISTEMA DE UI DO ANDROID
Telas Recentes
Corresponde ao botão virtual no inferior do lado direito da barra de navegação.
Exibe os aplicativos que o usuário interagiu com mais recentemente. 
Permite alternar entre aplicativos usados ​​recentemente.
Fornece uma forma de navegação clara entre várias aplicativos em execução.
O aplicativos são exibidos na ordem cronológica inversa com o aplicativo usado mais recentemente na parte inferior.
BARRA DE STATUS NO ANDROID
As barras do sistema Android são áreas da tela voltada à exibição de notificações, comunicação de status do dispositivo, e navegação dispositivo.
BASE DA UI NO ANDROID
Os elementos da interface gráfica do usuário (GUI – Graphic User Interface) do Android são criados usando objetos View e ViewGroup. 
O Android fornece uma coleção de subclasses View e ViewGroup que oferecem controles de entrada comuns (como botões e campos de texto) e vários modelos de layout (como um layout linear ou relativo).
CONSTRUÇÃO DA INTERFACE GRÁFICA NO ANDROID
O Android faz uso do padrão arquitetural MVC (Model-View-Controller) na construção de telas.
Contém um conjunto de componentes da UI (User Interface) conhecidos como WIDGETs, organizados através de componentes VIEWGROUPs. 
VIEW DO ANDROID
Uma View é uma classe que pertence a API do Android.
Representa uma área retangular utilizada para desenhar um elemento gráfico.
Componente primitivo do qual todos os componentes da interface do usuário são filhos.
Componente que desenha algo na tela com o qual o usuário pode interagir. 
VIEW DO ANDROID
Um ViewGroup é uma especialização da View.
Permite agrupar diversos componentes do tipo View.
Utilizado para organizar os elementos da interface.
Permite definir o layout da interface.
ELEMENTOS BÁSICOS DE UMA TELA ANDROID
ESTRUTURA DE CLASSES DA VIEW E VIEWGROUP
TextView
ImageView
ViewGroup
LinearLayout
FrameLayout
GridView
Button
EditText
. . .
TableLayout
View
. . .
ESTRUTURA DE CLASSES DA VIEW E VIEWGROUP
TextView
ImageView
ViewGroup
LinearLayout
FrameLayout
GridView
Button
EditText
. . .
TableLayout
View
. . .
Widgets
A construção de uma tela inicia com a determinação de um ViewGroup.
É um tipo especial de view.
Permite agrupar uma ou mais componentes view.
Permite organizar a aparência e a sequencia dos componentes view de uma tela.
Uma tela pode conter um ViewGroup, ou a combinação de diferentes tipos de ViewGroup.
CONSTRUÇÃO DO LAYOUT DE TELA COM VIEWGROUP
ORGANIZAÇÃO DOS COMPONENTES DE UMA TELA
LinearLayout
RelativeLayout
TableLayout
FrameLayout
ScrollView
GridView
TIPOS DE VIEWGROUP
TIPOS DE VIEWGROUP
Linear Layout
Relative Layout
Grid View
CONSTRUÇÃO DE TELAS NO ANDROID
Uma tela pode ser criada de 2 formas básicas no Android:
Através de especificação em um arquivo de layout em formato XML;
Através da API do Android (similar a implementação via API Swing do Java).
Tela
Arquivo XML
API Android
TIPOS DE RESOLUÇÕES NO ANDROID
Fonte: http://grahamtodman.co.uk/blog/2013/02/how-to-design-android-apps-in-photoshop-what-the-frak-is-a-dp/
TIPOS DE RESOLUÇÕES NO ANDROID
Fonte: http://stackoverflow.com/questions/33634058/android-create-android-assets-with-photoshop
UNIDADES DE MEDIDA NO ANDROID
O android utiliza um conjunto de unidades de medida para definir os limites do elemento e de seu tamanho no layout. 
wrap_content - Ajusta o tamanho do componente para se adequar ao tamanho original de seu conteúdo.
match_parent (fill_parent nas versões anteriores) – Ajusta o tamanho do componentes de forma a "igualar" os limites do elemento para seu elemento pai, usando o máximo permitido espaço.
Permite que o elemento ocupe o tamanho máximo que o componente pai permite, e ajusta o tamanho do elemento, se necessário.
UNIDADES DE DIMENSIONAMENTO
dp - Pixel independente de densidade. 
Unidade recomendada para posicionamento de objetos na tela.
160dp correspondem a 1 polegada de tamanho da tela física.
dp ou dip.
O tamanho físico de um único "DP" é aproximadamente a mesma densidade em cada tela. 
sp - Pixel independente de escala.
Especialmente designado para definir o tamanhos da fonte de textos. 
O número de pixels varia de acordo com a densidade da tela.
UNIDADES DE DIMENSIONAMENTO
pt - Pontos, uma unidade de tamanho de fonte comum, na tela. 
É independente da densidade.
Corresponde a 1/72 de uma polegada, baseada no tamanho físico da tela
O tamanho físico de um único "PT" é o mesmo em cada densidade de tela. 
px - Pixel real na tela. 
É dependente da densidade.
Não é recomendado seu uso na tela devido a diversidade de tamanho de telas dos diferentes tipos de dispositivos móveis.
O tamanho físico de um único "px" varia dependendo da densidade da tela.
TEXTO X UNIDADES DE DIMENSIONAMENTO
Fonte: http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-on-android
MATERIAL DESIGN
Disponibilizado a partir da versão Lollipop do Android.
É um guia abrangente para design visual, de movimento e de interação para diversas plataformas e dispositivos. 
O Google disponibilizou um conjunto de orientações definidas nas especificações do Material Design para utilização de novos componentes e funcionalidades disponíveis a partir do Android 5.0 (API de nível 21).
MATERIAL DESIGN
O Android forneceos seguintes elementos para criar aplicativos do Material Design:
Novo tema
Novos widgets para views complexas
Novas APIs para sombras e
 animações personalizadas.
MATERIAL DESIGN
Tema do Material
Novo estilo que pode ser utilizado no aplicativo, composto por widgets de sistema que permitem definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades.
Listas e cartões
São dois novos widgets para exibir cartões e listas com estilos e animações do Material Design: RecyclerView e CardView.
MATERIAL DESIGN
Sombras de views
Inclusão da propriedade Z, que representa a elevação de uma view, determinando o tamanho da sombra e a ordem de desenho das views.
Animações
Novas APIs de animação que permitem criar animações personalizadas para feedback de toque em controles de IU, mudanças no estado da vista e transições de atividades.
MATERIAL DESIGN
Desenháveis
Suporte ao uso de imagens vetoriais, ideais para ícones de uma cor dentro do aplicativo.
Uso de texturas que permite definir máscaras de visualização de imagens em tempo de execução.
CONCLUSÕES
Android é a plataforma mais fragmentada do mercado, e para lidar com as diferenças entre os dispositivos e auxiliar na construção da UI, o Google criou um conjunto de diretrizes para apoiar desenvolvedores no projeto da UI.
O Android disponibliza um conjunto de componentes do tipo VIEW para construção da UI.
O Material Design é um guia abrangente para design visual, de movimento e de interação para diversas plataformas e dispositivos.