如何在中心安装带圆形进度条和播放按钮的音乐播放器？

Question

我想要一个像这张图片的音频播放器应用程序：

我在按钮点击时使用依赖注入来播放音频。

Answer 1

我知道有一些外部nuget，例如Telerik和Syncfusion为您提供实现圆形量表的API，因此您可以在Xamarin中创建音频播放器按钮。

如果您想自己实现该功能，可以创建自己的布局。 设音频的总长度为total，播放的长度为played。

  

方法1：

我们将此布局称为Base：

• 当音频条小于或等于50％时，请创建一个蓝色圆圈基座B。将B的左半部分覆盖为灰色半圆G1，将B的右半部分覆盖为另一个灰色半圆G2。然后按G2

转动360.0 * played / total

• 当音频条的填充率超过50％时，请创建一个灰色的圆形基座G。用蓝色半圆G覆盖B1的右半部分，再用另一个蓝色半圆G覆盖B2的右半部分。然后按B2

转动360.0 * played / total - 180.0

最后在Base顶部的较小的白色圆圈顶部放置一个播放/暂停图标，以创建最终的音频播放器按钮。

  

方法2：

您可以在Xamarin.Forms中使用SkiaSharp来绘制圆和圆弧。您可以根据played和total绘制灰色弧线和长度为蓝色的蓝色弧线来创建音频播放按钮。他们对如何使用SkiaSharp有documentation。

Answer 2

是的，我是使用混合WebView完成的。我打电话给一个html页面，它有与我的图像相同的音频播放器，它工作得很完美。在this link中获取音频播放器并在Xamarin Forms中进行混合webview。简单。