JetPack中的帆布组成
#初学者 #编程 #前端 #android

Android gif

你好,互联网上的好人!我希望你一切都好。

我们都知道JetPack组成非常适合创建本机Android UI,但是您知道如何使用Canva API来实现这一点?

帆布API

帆布API揭示了一种新的可能性领域,使我们能够以无与伦比的精度和艺术性绘制和雕刻UI。

屏幕

我们首先需要了解屏幕的工作原理。我们的界面由许多像素组成,并且我们拥有的像素越多,组件的清洁度越多。

观察,我们可以简单地放大一个组件:

pixel image

知道我们可以开始使用Canva API开始绘画。

执行

转到您的组合功能并调用画布方法。

现在,您有能力开始绘画。这些是一些可以帮助您的简单功能:

  • 使用drawRect()绘制正方形。
  • 使用drawCircle()绘制一个圆圈。
  • 使用drawRoundRect()绘制一个带有圆角的正方形。

正方形

绘制一个简单的正方形:

square image

画一个有圆角的正方形:

square with rounded corners

圆圈

绘制一个简单的圆圈:

circle image

用冲程线绘制一个简单的圆圈:

circle with stroke line image

位置

您还可以通过指定数量的像素来更改元素的位置。

想象我有100像素的正方形:

pixel image

我想在左下角绘制一个正方形,仅占据一半的布局。我们可以使用topleft设置对齐方式,我可以将X和Y轴的偏移调整为100F:

您的布局将看起来像这样:

pixel image

画布的力量

您可能想知道为什么需要画一个圆或正方形。这个问题的答案是,有了这样的简单符号,您可以设计许多其他美丽而不可思议的插图。

例如:

惊人的图形

graphics

徽标

instagram logo

或任何形状

spiral, flower and waves images

结论

当您需要创建独特的插图或找到高质量的插图时,画布API可能非常有用。

您可以将帆布API与构图动画相结合,以创建美丽的布局。 Check my article on animation created using Compose for more information on this topic.

所有代码和示例是in this repository.

快乐编码â€


请让我知道您在评论中的想法。

与我联系ð

Linkedin

GitHub

Instagram

Twitter

Medium

dinossor google gif