Introdução ao desenho no Compose
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Aprenda a desenhar algo personalizado no Compose. Com o desenho personalizado, é possível
melhorar a aparência e a sensação do app quando os componentes integrados não atendem
exatamente às necessidades dele.
Pontos principais
DrawScope
é uma API de desenho declarativa e sem estado para desenhar formas,
caminhos e muito mais sem precisar manter o estado do componente
manualmente.
- Vários modificadores de desenho dão acesso a
DrawScope
, permitindo que você desenhe
com outros elementos combináveis:
drawBehind
: desenha atrás do conteúdo combinável.
drawWithContent
: útil para reorganizar o conteúdo. Você pode escolher
quando chamar o conteúdo do elemento combinável, antes ou depois.
drawWithCache
: armazena os objetos em cache até que o tamanho mude ou as
variáveis de estado lidas mudem.
- O sistema de coordenadas no Compose é o mesmo que o sistema de visualização.
- Todas as chamadas de desenho e layout são realizadas em valores de pixel, não em
dp
. Para
desenhar de forma consistente em telas, use dp
e converta para pixels antes
de desenhar.
- As chamadas de desenho são sempre relativas ao elemento combinável pai.
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem
metas mais amplas de desenvolvimento para Android:
Exibir imagens
Descubra técnicas para usar recursos visuais vibrantes e envolventes e
dar ao seu app Android uma aparência bonita.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-02-06 UTC.
[null,null,["Última atualização 2025-02-06 UTC."],[],[],null,["# Intro to drawing in Compose\n\n\u003cbr /\u003e\n\nLearn how to draw something custom in Compose. With custom drawing, you can\nimprove the look and feel of your app when the built-in components don't cover\nexactly what your app needs. \n\nKey points\n----------\n\n- [`DrawScope`](/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope) is a declarative, stateless drawing API to draw shapes, paths, and more without needing to maintain the state of the component manually.\n- Several drawing modifiers give you access to `DrawScope`, letting you draw with other composables:\n - [`drawBehind`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawBehind(kotlin.Function1)): draws behind the composables content.\n - [`drawWithContent`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawWithContent(kotlin.Function1)): useful for rearranging content. You can choose when to call the content of the composable, either before or after.\n - [`drawWithCache`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawWithCache(kotlin.Function1)): caches the objects until the size changes or the state variables read inside change.\n- The coordinate system in Compose is the same as the view system.\n- All draw and layout calls are performed in pixel values, not [`dp`](/reference/kotlin/androidx/compose/ui/unit/package-summary#(kotlin.Int).dp()). To draw consistently across screens, use `dp` and convert to pixels before drawing.\n- Draw calls are always relative to the parent composable.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]