page.title=Como definir sombras e recortar visualizações @jd:body

Esta lição ensina a

  1. Atribuir elevação a visualizações
  2. Personalizar sombras e contornos de visualizações
  3. Recortar visualizações

Você também deve ler

O Material Design introduz a elevação em elementos da interface do usuário. A elevação ajuda os usuários a entender a importância relativa de cada elemento e concentrar a atenção deles nas tarefas à mão.

A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual das sombras: visualizações com valores de Z mais altos lançam sombras maiores e mais suaves. Visualizações com valores de Z mais altos ocultam visualizações com valores de Z mais baixos, mas o valor de Z de uma visualização não afeta o tamanho dela.

As sombras são desenhadas pelo pai da visualização elevada e, por isso, estão sujeitas a recortes padrão de visualização, recortadas pelo pai por padrão.

A elevação também é útil para criar animações em que os widgets se elevam temporariamente sobre o plano de visualização ao realizar alguma ação.

Para obter mais informações sobre elevação no Material Design, consulte Objetos no espaço 3D.

Atribuir elevação a visualizações

O valor de Z para uma visualização tem dois componentes:

Z = elevation + translationZ

Figura 1 - sombras para diferentes elevações de visualização.

Para definir a elevação de uma visualização em uma definição de layout, use o atributo android:elevation . Para definir a elevação de uma visualização no código de uma atividade, use o método {@link android.view.View#setElevation View.setElevation()}.

Para definir a conversão de uma visualização, use o método {@link android.view.View#setTranslationZ View.setTranslationZ()}.

Os novos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} e {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} permitem animar facilmente a elevação de visualizações. Para obter mais informações, consulte a referência de API para {@link android.view.ViewPropertyAnimator} e o guia do desenvolvedor Animação de propriedade.

Você também pode usar um {@link android.animation.StateListAnimator} para especificar essas animações de um modo declarativo, o que é especialmente útil para casos em que o estado muda as animações de acionamento, como quando um usuário pressiona um botão. Para obter mais informações, consulte Mudanças de estado de visualização da animação.

Os valores de Z são medidos em dp (pixels independentes de densidade).

Personalizar sombras e contornos de visualizações

Os limites de um desenhável do segundo plano da visualização determinam a forma padrão da sombra. Contornos representam a forma externa de um objeto gráfico e definem a área de ondulação para o feedback de toque.

Analise esta visualização, definida com um desenhável de segundo plano:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

O desenhável do segundo plano é definido como um retângulo com bordas arredondadas:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

A visualização lança uma sombra com bordas arredondadas, uma vez que o desenhável de segundo plano define o contorno da visualização. Fornecer um contorno personalizado neutraliza a forma padrão de uma sombra da visualização.

Para definir um contorno personalizado para uma visualização no seu código:

  1. Amplie a classe {@link android.view.ViewOutlineProvider}.
  2. Neutralize o método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.
  3. Atribua o novo fornecedor de contorno à visualização com o método {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.

Você pode criar contornos ovais e retangulares com bordas arredondadas usando os métodos na classe {@link android.graphics.Outline}. O fornecedor de contorno padrão para visualizações obtém o contorno do segundo plano da visualização. Para evitar que uma visualização lance uma sombra, defina o fornecedor de contorno dela como null.

Recortar visualizações

Recortar visualizações permite mudar facilmente a forma de uma visualização. Você pode recortar visualizações para obter consistência com outros elementos de design ou para mudar a forma de uma visualização em resposta à interação do usuário. É possível recortar uma visualização na área do contorno usando o método {@link android.view.View#setClipToOutline View.setClipToOutline()} ou o atributo android:clipToOutline. Somente contornos retangulares, circulares e retangulares redondos são compatíveis com recorte, conforme determinado pelo método {@link android.graphics.Outline#canClip Outline.canClip()}.

Para recortar uma visualização na forma de um desenhável, defina o desenhável como o segundo plano da visualização (conforme exibido acima) e chame o método {@link android.view.View#setClipToOutline View.setClipToOutline()} .

O recorte de visualizações é uma operação cara, por isso, não anime a forma que você usa para recortar uma visualização. Para atingir esse efeito, use a animação Efeito de Revelação.