page.title=Como definir sombras e recortar visualizações @jd:body
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.
O valor de Z para uma visualização tem dois componentes:
Z = elevation + translationZ
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).
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:
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 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.