Skip to content

Most visited

Recently visited

navigation

Como definir sombras e recortar visualizações

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 View.setElevation().

Para definir a conversão de uma visualização, use o método View.setTranslationZ().

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

Você também pode usar um 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 ViewOutlineProvider.
  2. Neutralize o método getOutline().
  3. Atribua o novo fornecedor de contorno à visualização com o método View.setOutlineProvider().

Você pode criar contornos ovais e retangulares com bordas arredondadas usando os métodos na classe 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 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 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 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.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Siga o Google Developers no WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)