如何在 Android 中设计动态 UI 元素

How to design dynamic UI elements in Android

提问人：VanessaF 提问时间：4/16/2021 最后编辑：Narendra_NathVanessaF 更新时间：9/7/2021 访问量：777

问：

我有一个关于如何在 Android（使用 Java）中设计动态 UI 元素的一般问题。

我想在我的应用程序中有一个温度计，它会根据一些外部信息增加或减少一个红色条（如下所示）。enter image description here。如何在 Android 中设计这样的东西？

例如，我可以用一些绘图程序将没有红条的温度计设计为jpeg，然后以某种方式在Android中将红条实现为可以通过编程方式更改的对象，而温度计的“边缘”不会改变。 我看到这种方法的问题是，我认为对于不同的屏幕尺寸和分辨率，将温度计的边缘与红条相匹配是极其困难的。关于我如何做这样的事情，你还有其他建议吗？也许有一个图书馆吗？

我将不胜感激每一条评论，因为我通常没有任何设计此类动态 UI 对象的经验。

Java Android 用户界面 dynamic-ui

评论

0赞 Vlad 4/16/2021
在 SurfaceView 上使用画布

答：

1赞 Narendra_Nath 4/16/2021 #1

为了获得动态 UI，您可以采取两种方法。

  1. Jetpack Compose（未讨论，因为它仍处于测试阶段）
  2. LiveData 和观察者模式

在 LiveData 和观察者模式中。将温度作为 LiveData 变量（在 ViewModel 中）给出，并在 MainActivity 中实现一个 Observer，当温度实时数据的值发生变化时，该观察器会自动触发。

为了获得输出图形，您可以使用画布，然后在画布上绘图并将其绑定到温度变量。 例如，您可以使用 Canvas.drawRect 函数根据温度创建短矩形或长矩形。（温度计从圆圈到顶部的部分可以是矩形）

评论

0赞 VanessaF 4/18/2021
谢谢 Narendra 的回答。但我也可以在没有实时数据的情况下做到这一点，对吧？例如，我可以实现一个线程，该线程始终观察一个变量，并在此基础上更改图形的形状。我不是实时数据的忠实粉丝。我曾经看过它，它似乎相当（不必要地）复杂
0赞 Narendra_Nath 4/18/2021
当然可以。你只需要一个变量，你将持续监控..你如何做是你的自由裁量权
2赞 Nikhil Jain 4/16/2021 #2

更新答案：

我在这里的 Github 上创建了一个演示项目。此项目具有温度计自定义视图，其中外部温度计是从图像文件绘制的，温度计的内部汞视图是从代码中绘制的。您可以查看我在之前的回答中分享的用户 kofigyan 的项目，以了解其他自定义。

上一个答案：

我认为您正在寻找的是 Android 中的自定义视图。

您可以扩展 Android 类，并可以创建自定义视图。它有一个对象，您可以在该对象上绘制温度计的形状，并可以构建功能来更改子类本身中形状的状态。此外，使用该对象，您可以绘制绘制的形状。ViewViewCanvasPaint

我在 Github 上找到了一个用户 kofigyan 的项目。

评论

1赞 Narendra_Nath 4/16/2021
这应该是公认的答案。Github 的项目真的很有帮助。
0赞 VanessaF 4/18/2021
感谢 Nikhil 的回答。所以我不应该使用绘图程序绘制温度计（或任何其他物体）的外缘？但是使用绘图程序，我可以更灵活地设计对象，并且它比 Android 绘图对象更好且更简单
1赞 Nikhil Jain 4/28/2021
@VanessaF我已经更新了我的答案。看一看，如有任何问题，请告诉我。
1赞 Nikhil Jain 7/2/2021
@VanessaF 请查看我以前的聊天消息以及新的聊天消息。
1赞 VanessaF 9/7/2021
非常感谢您的巨大努力 Nikhil。我完全可以理解你不能再帮助我了，因为你已经花了很多时间在上面。不幸的是，我不能使用您建议的代码，因为它会产生很多问题，而且我很难理解它。您在答案中提供的链接根本无济于事，因为这个温度计不适合我的情况。尽管如此，我真的很感谢你的巨大努力。我将尝试为我的问题寻找另一种解决方案。

上一个：R Shiny uiOutput 显示来自另一个 uiOutput 的输入值的标签

下一个：从用户上传的模板动态创建 UI 组件